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

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