前端的性能优化主要分为三部分：
-
HTML优化
-
避免
HTML中书写CSS代码，因为这样难以维护。 -
使用
Viewport加速页面的渲染。 -
使用语义化标签，减少
CSS代码，增加可读性和SEO。 -
减少标签的使用，
DOM解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。 -
避免
src、href等的值为空，因为即时它们为空，浏览器也会发起HTTP请求。 -
减少 DNS 查询的次数。
-
CSS优化
-
优化选择器路径：使用 .c {} 而不是 .a .b .c {}。
-
选择器合并：共同的属性内容提起出来，压缩空间和资源开销。
-
精准样式：使用
padding-left: 10px而不是padding: 0 0 0 10px。 -
雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。
-
避免通配符：.a .b * {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 * {} 会遍历整个
DOM，性能大大损耗。 -
少用
float：float在渲染时计算量比较大，可以使用flex布局。 -
为 0 值去单位：增加兼容性。
-
压缩文件大小，减少资源下载负担。
-
JavaScript优化
-
尽可能把
<script>标签放在body之后，避免JS的执行卡住DOM的渲染，最大程度保证页面尽快地展示出来。 -
尽可能合并
JS代码：提取公共方法，进行面向对象设计等…… -
CSS能做的事情，尽量不用JS来做，毕竟JS的解析执行比较粗暴，而CSS效率更高。 -
尽可能逐条操作
DOM，并预定好CSS样式，从而减少reflow或者repaint的次数。 -
尽可能少地创建
DOM，而是在HTML和CSS中使用display: none来隐藏，按需显示。 -
压缩文件大小，减少资源下载负担。