|
前端的性能优化主要分为三部分： 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 来隐藏，按需显示。 压缩文件大小，减少资源下载负担。
| 
收藏
淘帖
踩
