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