前端性能优化的目的
1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
- 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
1.封装函数
把重复使用的代码块,封装成函数,使加载速度更快
2.页面级别的优化:
CSS精灵图
如果可以,尽量将外部的脚本、样式进行合并,多个合为一个。且CSS,JS,image都可以用相应工具进行压缩
能使用CSS替代效果的尽量少使用图片
图片懒加载。可以在某些条件下或者页面刚加载时减少HTTP请求数。
3.代码级别的优化
(1) javascript
1.用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
2.慎用with。with相当于增加了作用域链的长度,过长的作用域链会导致查找性能下降
(2) CSS
1.使用link而不使用@import。link在页面加载时CSS同时被加载,@import引入的CSS要等页面加载完毕后再加载
2.设置className而不是直接使用css表达式
3.避免正则的属性选择器。
4.缩减HTML文档大小
①.删除对执行结果无影响的空格空行和注释;
②.避免table布局;
③.使用HTML5;
5.避免节点深层级嵌套
层级越深的节点在初始化构建时,所占内存越多。
通过浏览器HTML解析器会将整个HTML文档的结构存储为DOM树结构。当节点嵌套层次越深,构建的DOM书层次也越深。
6.避免空的src和hre
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。