前端性能优化经常使用总结

时间 2020-04-10

原文原文链接

性能优化优势

一、加快页面展现和运行速度
二、节约服务器带宽流量
三、减小服务器压力web

在这以前，咱们先分析一个页面从发起请求到展现到用户大概流程：
一、DNS 查询
二、发送 HTTP 请求
三、等待服务器响应
四、下载服务器响应内容
五、解析 HTML、CSS、JS
六、渲染 HTML、CSS、JS 和图片
七、响应用户事件浏览器

减小 DNS 查询的次数缓存

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

本地存储性能优化

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

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

使用 CDN 加速异步

雪碧图前端性能

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

尽量合并 JS 代码async

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

合理设置 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 效率更高