web性能优化——浏览器相关

简介

优化是一个持续的过程。所以尽可能的不要有人为的参与。所以能自动化的或者能从架构、框架级别解决的就最更高级别解决。

这样即能实现面对开发人员是透明的、不响应，又能确保所有资源都是被优化过的。

场景

1. 确保静态资源是有缓存。
2. 确保静态资源的大小最小。
3. 确保加载的资源最少。
4. 确保用户以最短的时间看到页面
5. 减少人为因素的性能瓶颈。

解决方案

缓存

让资源更可能快的让用户看到。

结合代理（nginx）来实现。给http添加缓存的时长。

# 需要缓存的静态资源类型
location ~ .*.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {
    ....
    if (-f $request_filename) {
        expires 1d;
        break;
    }
}

说明：

html文件的缓存，要根据具体业务来判断。因为有些是真实的Html文件。有些是伪静态，并没有真的html文件
也可以通过cdn来缓存。

压缩

通过自动化压缩的工具来实现，尽量不要有人为的参与。这样即能对开发是透明的，不增加复杂度，也能防止因为人为的因素的遗忘。

建议：glup的插件（jsmin，cssmin,imgmin）

按需加载

图片加载延迟

所谓图片延迟加载，就是每次只加载当前屏幕可见区域的图片，其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术，减少了并发数，不但减少了服务器的压力，也降低了页面的加载时间，目前很多门户网站都使用了该技术，如腾讯微博的“看看推荐的人”页面，在该页面上有几千个头像，如果一次性加载全部的图片，就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单，就是将页面上的src替换成其他标记（如original），在页面滚动到相应位置后，再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载，而且这个方法也能减少请求数。

异步加载

首屏为行，重要信息为先，次要信息异步加载。

减少不必要的传输

动静域名分离。不传输cookie。有很多业务相关的cookie会通过http传输。比如登录后的token等。

减少请求数

网络请求是很费时。即增加了服务器压力，也影响用户使用的性能。

一般思路是通过合并来实现。

1. 合并请求。结合代理(nginx)的模块(concat)来实现。
2. 合并资源。雪碧图。这个也可以通过glup插件来实现。

加快渲染

image属性设置

有时需要在页面加载完之前，就对页面布局进行定位。
若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并重新显示，从而浪费时间。

# 页面的请求过程
...

12. 渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
13. 一旦计算出来渲染的坐标后，又同步去开始渲染
14. 10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染

...

所以，如果image如果没有width和height的话，会影响性能。

js位置

js的加载方式是阻塞式的。放在最后，等页面都渲染完了再加载。

减少嵌套层级

嵌套越深，document的构建越慢。

高性能的规范

比如说：

1. 避免CSS表达式
2. 避免过大的cssName
3. 避免频繁的DOM操作等。
   ...

也可以把上面的一些对性能有响应加到规范里，比如img标签必须有width和height，不允许css import，嵌套不允许超过3级等等。具体还是要看前端的规范。最好能有一些自动检验规范的工具。比如csshint，或者自己写一些小工具等。

验证方法

1. 谷歌浏览器的开发者工具（控制台）
2. pagespeed
3. yslow
4. https://varvy.com/tools/css-delivery/
5. Chrome Task Manager。能查看内存泄漏

参考资源

1. 网站性能优化工具大全
2. web前端性能分析--原理篇
3. Web性能优化分析
4. Web前端，高性能优化
5. Web前端优化最佳实践及工具集锦