黑马程序员技术交流社区
标题: 【上海校区】web前端如何优化自己的代码 [打印本页]
作者: 梦缠绕的时候 时间: 2019-7-19 08:59
标题: 【上海校区】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 来隐藏，按需显示。
压缩文件大小，减少资源下载负担。
作者: 梦缠绕的时候 时间: 2019-7-19 08:59
有任何问题欢迎在评论区留言
作者: 梦缠绕的时候 时间: 2019-7-19 08:59
或者添加学姐微信
DKA-2018
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |