前端性能优化 前端性能优化建议

前言：

一说到性能优化，大家都不约而同的想起了雅虎的军规，2-5-8原则，3秒的首屏准则等等，这些规则在开发中虽然不是强制要求的，但是为了追求页面性能的完美体验，就不得不对代码进行修改和优化。

下面就与大家一同分享一下我了解的一些性能优化指标：

一．加载优化

1. 减少HTTP请求：尽量减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。

2. 压缩代码：减少资源大小可加快网页的显示速度，对代码进行压缩，并在服务器开启Gzip

3. 无阻塞：头部内联的样式和脚本会阻塞页面的渲染，样式放在头部使用link引入，脚本放在尾部并使用异步方式加载。

4. 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。

5. 按需加载：将不影响首屏的资源和当前屏幕不使用的资源放到用户需要时才加载，可大幅度提升显示速度和降低总体流量。但是按需加载会导致大量重绘，影响渲染性能。

6. 预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。

7. 压缩图像：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中进行图片懒加载。

8. 减少Cookie：Cookie会影响加载速度，所以尽量减少不必要的Cookie。

9. 异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。

二．执行优化

1．css写在头部，js写在尾部并异步。

2．避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。

3．尽量避免重置图像大小：多次重置图像大小会引发图像的多次重绘，影响性能。

4．图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

三．渲染优化

1．设置Viewport：HTML的viewport可加快页面的渲染。

2．减少DOM结点：DOM结点太多会影响页面的渲染。

3．尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout。

4．优化高频事件：scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

四．样式优化

1．避免在HTMl中书写style。

2．避免css表达式：css表达式的执行需要跳出css树的渲染。

3．移除css空规则：css空规则增加了css文件的大小。

4．正确使用display：display会影响页面的渲染。

5．不滥用float：float在渲染时计算量较大，尽量减少使用。

6．不滥用WEB字体：WEB字体需要下载、解析、重绘当前页面，尽量减少使用。

五．脚本优化

1．尽量减少回流和重绘。

2．缓存DOM选择与计算：每次DOM选择都要计算和缓存。

3．缓存.length的值：每次.length计算使用一个变量保存值。

4．尽量使用事件代理：避免批量绑定事件。

5．尽量使用id选择器：id选择器选择元素是最快的。

2-5-8原则

在前端开发中，此规则作为一种开发指导思路，针对浏览器页面的性能优化。

o 用户在2秒内得到响应，会感觉页面的响应速度很快 Fast

o 用户在2~5秒间得到响应，会感觉页面的响应速度还行 Medium

o 用户在5~8秒间得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow

o 用户在8秒后仍然无法得到响应，会感觉页面的响应速度垃圾死了(「此时会有以下四种可能」)

§ 难道是网速不好，发起第二次请求 => 刷新页面

§ 什么垃圾页面呀，怎么还不打开 => 离开页面，有可能转投竞争对手的网站

§ 垃圾程序猿，做的是什么页面啊 => 咒骂开发此页面的程序猿

§ 断网了 => 网线断了？Wi-Fi断了？信号不好？话费用完了？

Ok完事儿，这就是本小白总结的一点点小经验啦～