web 性能优化

web 性能优化主要分为两类：加载时优化与运行时优化；
从以下几个方面考虑；减少请求次数、减少资源加载量、减少请求耗时、提高页面响应速度、注重用户体验；
性能优化也有相应的代价，需要根据实际场景测试后进行权衡，避免不必要的优化。

1.DNS 服务优化

• 采用 DNS 加速器加速 DNS 解析；
• 配置 host，减少 DNS 解析；

2.TCP 连接复用 keep-alive

• HTML，css，js等文件可以通过一次 TCP 连接发起请求

3.SQL 优化

• 通过优化 SQL 查询数据库的时间，减少 waiting 时间

4.提高服务器带宽

• 升级服务器带宽提高响应速度

5.gzip 压缩

• Content-Encoding: gzip 后台开启 gzip 压缩响应资源
• 浏览器解压缩资源

6.优化 css

• 去除冗余的 css 选择器和内容，减少重复渲染

7.优先加载 css

• css 先加载呈现页面内容，再加载 js 资源

8.懒加载

• 先加载首屏资源，提高页面响应速度

9.资源预加载

• 一些重要的资源可以预先加载，提高用户点击时的页面响应速度，比如上一页、下一页内容

10.利用 HTTP 缓存

• 除首页 HTML 之外资源可以利用 Cache-Control: max-age 强制缓存
• 利用 md5 对资源添加版本号
• 当资源发生更新时，版本号会变化，重新去服务器获取新资源

11.多个域名分批请求

• 一个域名的最大并发请求数是有限制的
• 将资源进行分类，不同的 CDN 域名请求不同的资源，提高并发请求数
• cookie-free: css 资源，图片资源等利用 CDN 域名可以不用携带 cookie，减少上传量

12.采用 HTTP2.0

• 多路复用；
• 头部压缩；
• 服务端推送

13.服务端渲染

• 服务端渲染的网站则会渲染完页面再返回 HTML 文件，客户端只需解析 HTML 即可
• 首屏渲染速度提高，同时利于 SEO 优化

14.采用 iconfont 字体图标

• 字体图标生成文件小，矢量图不失真
• 可以和字体一样设置属性

15.减少页面的重排重绘

• JS避免直接修改样式，通过替换 class 来修改样式
• 合理利用文档流特点，脱离文档流使得操作 DOM 对页面其它元素的影响降低
• 使用 CSS3 的 transform 触发浏览器开启 GPU 加速，如transform: translateZ(0)
• 减少浮动的使用，减少渲染性能消耗

16.添加 favicon.ico

• 如果没有设置图标 ico，浏览器默认的图标会多发送一个 404 或者 500 的请求

17.采用事件委托添加事件

• 利用事件冒泡机制，通过指定一个事件来托管子元素的事件
• 多数鼠标事件、键盘事件都适合采用事件委托