前端性能优化常用总结

性能优化优点

1、加快页面展示和运行速度
2、节约服务器带宽流量
3、减少服务器压力

在这之前，我们先分析一个页面从发起请求到展示到用户大概流程：
1、DNS 查询
2、发送 HTTP 请求
3、等待服务器响应
4、下载服务器响应内容
5、解析 HTML、CSS、JS
6、渲染 HTML、CSS、JS 和图片
7、响应用户事件

减少 DNS 查询的次数

减少网站所用的域名个数，减少 DNS 查询时间建议一个网站使用至少 2 个域，但不多于 4 个域来提供资源

本地存储

使用较小的图片，合理使用 base64 内嵌图片

在页面使用的背景图片不多且较小的情况下，可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中，这样可以减少页面的 HTTP 请求数。需要注意的是，要保证图片较小，一般图片大小超过 2KB 就不推荐使用 base64 嵌入显示了。

使用 CDN 加速

雪碧图

优化原理来于web优化中的减少http请求数量，通过减少页面图片的数量来实现

尽可能合并 JS 代码

提取公共方法，进行面向对象设计等……

合理设置 HTTP 缓存
使用 CDN 缓存
闲话 CDN
CDN是什么？使用CDN有什么优势？

延迟(defer)加载/异步(async)加载依赖
懒加载
静态资源打包，开启 Gzip 压缩，减少资源下载负担

最小化重绘和回流

批量修改元素样式、避免 table 布局等针对响应用户事件优化尽量不在前端做复杂的运算

避免 HTML 中书写 CSS 代码

因为这样难以维护。

使用 Viewport 加速页面的渲染

使用语义化标签

减少 CSS 代码，增加可读性和 SEO

减少标签的使用

DOM 解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数

避免 src、href 等的值为空

因为即时它们为空，浏览器也会发起 HTTP 请求

把 CSS 资源引用放到 HTML 文件顶部

一般推荐将所有 CSS 资源尽早指定在 HTML 文档 <head> 中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。

CSS 动画使用 translate、scale 代替 top、height

尽量使用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大量的重排计算

优化选择器路径

使用 .c {} 而不是 .a .b .c {}

选择器合并

共同的属性内容提起出来，压缩空间和资源开销。

精准样式

使用 padding-left: 10px 而不是 padding: 0 0 0 10px。

避免通配符

.a .b * {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 * {} 会遍历整个 DOM，性能大大损耗。

少用 float

float 在渲染时计算量比较大，可以使用 flex 布局。

为 0 值去单位

增加兼容性

压缩文件大小，减少资源下载负担

预先设定图片大小

尽量预先设定图片大小在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排

JavaScript 资源引用放到 HTML 文件底部

JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。

DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

CSS 能做的事情，尽量不用 JS 来做

毕竟 JS 的解析执行比较粗暴，而 CSS 效率更高