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前端优化最佳实践及工具集锦