web性能优化——浏览器相关
简介
优化是一个持续的过程。所以尽可能的不要有人为的参与。所以能自动化的或者能从架构、框架级别解决的就最更高级别解决。
这样即能实现面对开发人员是透明的、不响应，又能确保所有资源都是被优化过的。
场景
- 确保静态资源是有缓存。
- 确保静态资源的大小最小。
- 确保加载的资源最少。
- 确保用户以最短的时间看到页面
- 减少人为因素的性能瓶颈。
解决方案
缓存
让资源更可能快的让用户看到。
结合代理（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等。
减少请求数
网络请求是很费时。即增加了服务器压力，也影响用户使用的性能。
一般思路是通过合并来实现。
- 合并请求。结合代理(nginx)的模块(concat)来实现。
- 合并资源。雪碧图。这个也可以通过glup插件来实现。
加快渲染
image属性设置
有时需要在页面加载完之前，就对页面布局进行定位。
若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并重新显示，从而浪费时间。
# 页面的请求过程
...
12. 渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
13. 一旦计算出来渲染的坐标后，又同步去开始渲染
14. 10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染
...
所以，如果image如果没有width和height的话，会影响性能。
js位置
js的加载方式是阻塞式的。放在最后，等页面都渲染完了再加载。
减少嵌套层级
嵌套越深，document的构建越慢。
高性能的规范
比如说：
- 避免CSS表达式
- 避免过大的cssName
- 避免频繁的DOM操作等。
...
也可以把上面的一些对性能有响应加到规范里，比如img标签必须有width和height，不允许css import，嵌套不允许超过3级等等。具体还是要看前端的规范。最好能有一些自动检验规范的工具。比如csshint，或者自己写一些小工具等。
验证方法
- 谷歌浏览器的开发者工具（控制台）
- pagespeed
- yslow
- https://varvy.com/tools/css-delivery/
- Chrome Task Manager。能查看内存泄漏
