前端性能优化原理与实践总结

一、Http优化

1、减少请求次数，如资源合并

2、减少单次请求所花费的时间

二、各种图片

1、复杂的、色彩层次丰富的图片使用 JPG 去存储

2、小的 Logo、颜色简单且对比强烈的图片或背景使用 PNG

3、svg 体积小、可压缩性高、不失真，但是性能消耗大

4、Base64 小图标的解决方案， Base64 编码，减少 HTTP 请求的次数

三、CSS优化

1、避免使用通配符，只对需要用到的元素进行选择

2、如果有可继承的属性，则避免重复匹配重复定义

3、少用标签选择器。如果可以，用类选择器替代

4、id 和 class 选择器尽量单独使用，不要并列使用

5、减少嵌套，最高不要超过三层

四、js加载优化

1、使用async加载js，该模式下js进行异步加载，不会阻塞浏览器，加载结束时立即执行js 脚本

2、使用defer加载js，该模式下js同样异步加载，但是会等到整个DOM文档解析完成，DOMContentLoaded事件即将触发时，js才会被执行

五、DOM操作优化

减少回流与重绘

1、减少或避免对几何属性的操作，如 width、height、padding、margin、left、top、border 等等

2、减少或避免对节点进行增减、移动等操作

3、减少或避免对即时计算属性的使用，如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight等

4、减少对重绘属性的操作，如background-color、color、visible等触发了样式改变的属性