web前端必知篇：提高web性能，学会优化！

在这个快节奏的社会中，你的步调稍稍一慢，你就会被社会无情的淘汰。对于一个好的网站来说，良好的性能也是用户来源的一大关键点。毕竟，谁愿意坐在电脑显示屏前面对着一个空白的网页发呆呢？好吧，咱们进入正题，如何提高Web的性能呢？

1 · 减少HTTP的请求次数

a) 合并CSS、JavaScript

b) 合并小图片，使用雪碧图

2 · CSS放在头部，JS放在结尾

3 · 压缩HTML、CSS、JS资源大小

减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip

4 · 压缩图片

图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后压缩，同时在代码中用Srcset来按需显示

a）使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)

b）选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)

c）使用Srcset

5 · 避免图片和iFrame等的空Src

空Src会重新加载当前页面

6 · 避免重设图片大小

在页面、CSS、JS等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能

7 · 利用缓存

使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）

a）缓存一切可缓存的资源

b）使用外联式引用CSS、JS文件

c）使用长Cache

8 · 预加载

大型重资源页面可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失

对用户行为分析，可以在当前页加载下一页资源，提升速度

a) 可感知Loading(如进入空间游戏的Loading)

b) 不可感知的Loading（如提前加载下一页）

9 · 按需加载

将不影响当前屏幕资源放在用户需要的时候在加载（PS：按需加载会导致大量重绘，影响渲染性能）

a) LazyLoad

b) 滚屏加载

10 · 第三方资源使用异步加载

第三方资源不可控会影响页面的加载和显示。

这里还是要推荐下小编的web前端学习 裙 : 6879，

58461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括

小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和

进阶中的小伙伴。在不忙的时间我会给大家解惑。

[CSS优化]

CSS表达式

CSS表达式的执行需跳出CSS树的渲染，尽量避免；

空的CSS规则

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，将其删除；

能不在标签中写Style属性就不要写

Font-size

过多的Font-size引发CSS树的效率；

为了浏览器的兼容性和性能，值为0时不要带单位；

Web字体

Web字体需要下载，解析，重绘当前页面，尽量减少使用；

标准化各种浏览器前缀

a）无前缀应放在最后；

b）CSS动画只用 （-webkit- 无前缀）两种即可；

[JavaScript优化]

尽量使用ID选择器（ID选择器是最快的）；

尽量使用事件代理，避免批量绑定事件；

减少重绘和回流

a）避免不必要的Dom操作；

b）避免使用document.write；

c）尽量改变Class而不是Style，使用classList代替className；

[渲染优化]

Dom节点

Dom节点太多影响页面的渲染，尽量减少使用

动画优化

a) 尽量使用CSS3动画

b) 合理使用requestAnimationFrame动画代替setTimeout

c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画