前端性能优化总结(二)

CSS选择符
在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如#toc A { color: #444; }这样一个选择符,如果是从左往右解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高,所以在写选择符的时候需要注意很多事项。

  • 避免使用css表达式,避免使用高级选择器,通配选择器。
  • 不要限定ID选择符或类选择符: 在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符。例如:div#id是没必要的,应该简化为#id。
  • 依靠继承:了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。
  • 减少css动画的使用。

其它方面

1.避免页面跳转,也就是使用单页面应用的开发。

每次页面跳转,就是一次html文件的下载过程。而这个过程,我们首先从服务端下载网页,再进行渲染,网页性能体验会很差。而单页面应用,它从一开始,就把完整的网页给加载到本地。

2.延迟加载、懒加载技术
原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

3.将css放在HEAD中
页面通常先解析完css文件再进行渲染,如果放到后面,页面渲染在前,则用户体验很差。有些浏览器会等css文件加载完再进行渲染,把css放后面会造成堵塞。

4.节流Throttle和防抖Debounce

节流:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。

防抖:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,它的计时有一个更新。

5.HTML Collection

document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。

发布了15 篇原创文章 · 获赞 21 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_41531446/article/details/86369948