web前端如何优化自己的代码

前端的性能优化主要分为三部分：

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 来隐藏，按需显示。

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