乐趣区

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

一、Http 优化

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

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

二、各种图片

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

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

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

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

三、CSS 优化

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

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

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

4、idclass 选择器尽量单独使用,不要并列使用

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 等触发了样式改变的属性

退出移动版