前端的性能优化主要分为三部分：
HTML优化
避免HTML中书写CSS代码，因为这样难以维护。
使用Viewport加速页面的渲染。
使用语义化标签，减少CSS代码，增加可读性和SEO。
减少标签的使用，DOM解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。
避免src、href等的值为空，因为即时它们为空，浏览器也会发起HTTP请求。
减少DNS查询的次数。
CSS优化
优化选择器路径：使用.c{}而不是.a.b.c{}。
选择器合并：共同的属性内容提起出来，压缩空间和资源开销。
精准样式：使用padding-left:10px而不是padding:00010px。
雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。
避免通配符：.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来隐藏，按需显示。
压缩文件大小，减少资源下载负担。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML