前端八股文浏览器系列性能优化——HTML、CSS、JS、渲染优化
性能优化,从以下几个方面来进行。
HTML
- 避免HTML中直接写CSS
- viewport加速页面渲染
- 使用语义化标签
- 减少标签的使用:DOM解析是一个大量遍历的过程
- 避免src空值
- 减少DNS查询数
避免HTML中直接写CSS
- 对浏览器来说,样式文件是一个单独的文件,可以在本地建立一个缓存,有利于加快访问网页。
- 对服务器来说,如果样式文件浏览器减少加载,就可以减少此网络请求,可以节约服务器带宽。
viewport加速页面渲染
<meta name="viewport" content="width=device-width, initial-scale=1">
使用语义化标签
语义化标签,如p表示段落paragraphs,h表示标题head
使用语义化标签有利于搜索引擎优化(SEO)。
减少标签的使用
DOM解析是一个大量遍历的过程,减少不必要的标签,就能降低遍历的次数。
避免src空值
src用于替换当前元素。它指向外部资源,指向的内容会嵌入到文档中标签的位置。请求src资源时会阻塞其他资源的下载和处理。即,src是先加载再运行后面的代码。
避免src空值可以缩减浏览器首屏渲染的时间。 原因:浏览器在渲染过程中会把src属性中的空内容进行加载,直至加载失败,影响DOMContentLoaded
与Loaded
事件之间的资源准备过程,拉长了首屏渲染的事件。
减少DNS查询数
在DNS查询过程中,浏览器什么都不会做,保持空白。如果DNS查询很多,网页性能会受到很大影响。
减少DNS查询次数:需要减少来自不同domain的请求的数量,如尽量将外部域的对象下载到本地服务器上等。
CSS
- 避免后代选择符
link
代替@import
- 减少回流与重绘
- CSS放head中
- 压缩CSS,开启gzip压缩
- 骨架屏 loading
- 避免选择器过多嵌套
避免后代选择符
一般来说开发中HTML和CSS是分开的。使用后代选择符会严重依赖于HTML代码,当HTML修改后CSS也要修改。
如:
div ul li{
}
link代替@import
使用@import引入CSS会影响浏览器的并行下载。 用@import引用的CSS文件只有在此文件下载解析结束后,浏览器才会知道还有别的CSS要下载。这会导致浏览器无法并行下载样式文件。
多个@import可能会导致下载顺序紊乱。 在IE中,排列在@import后面的js文件会先于@import下载,会打乱甚至破坏@import自身的并行下载。
减少回流与重绘
回流会导致浏览器重新构建渲染树,降低浏览器渲染速度。以下操作会触发回流与重绘,我们要尽量避免以下操作:
- 改变
font-size
和font-family
- 改变元素内外边距
- 通过JS改变CSS类
- 通过JS获取DOM元素的位置相关属性(如width/height/left等)
- CSS伪类激活
- 改变窗口大小
css放head中
css放在head中,先加载css,构建css规则树,同时构建DOM树,都构建完成后就构建render树,进行计算布局网页。
css放在body底部,在DOM树构建完成后开始构建render树(这里的render树中的css规则是浏览器默认样式),计算布局绘制网页,在css加载完之后,开始构建css规则树,然后再构建render树,再进行计算布局和绘制。
也就是说,css放在body底部会比在head中多构建一次render树,在性能方面不够好。同时,放在body底部网页会闪现 默认样式的DOM结构,用户体验不好。
压缩CSS,开启gzip压缩
gzip主要用于压缩html、css、js等静态文本文件,压缩后的体积可以达到原来的30%左右。
骨架屏 loading
当资源加载耗时较长时,页面会显示为白屏。而骨架屏就是在页面显示出来之前的、与页面内容类似的屏幕。它只需要CSS支持,不需要网络请求,可以减少白屏的时间,提升用户体验。
避免选择器过多嵌套
浏览器解析选择器会逐级匹配,嵌套过多会产生性能问题。实际上,css选择器是从右往左解析的。也就是说,如:
div ul li{
}
先找到所有的li,再留下有祖先节点ul的li,最后留下有祖先节点div的ul的li。显然,过多的嵌套会影响性能。
相关方法:
- 避免使用通配符:通配符可以匹配HTML的任何元素(即,遍历DOM),增加解析复杂度
- 使用class和id选择器:降低选择器的嵌套层数,减少解析的复杂度
- 避免使用后代选择器
CSS加载会造成阻塞吗
- CSS加载不会阻塞DOM树解析
- CSS加载会阻塞DOM树渲染
- CSS加载会阻塞后面JS的执行
相关解释:
DOM树解析与CSS无关,与HTML有关,因此CSS加载不会阻塞DOM树解析。
CSS加载会阻塞DOM树渲染,因为CSS会改变样式布局,若边加载CSS边渲染DOM树,一旦布局发生变化就会引起回流和重绘。
CSS加载会阻塞后面JS的执行。因为JS可以动态修改CSS,若不阻塞的话,结果会不可预估。
JavaScript
- 避免循环操作DOM
- 把script放在body后
- 事件委托
对于把script放在body后,可以详看:【前端】JS异步加载
省流:
JS会操作DOM元素,若把script放在body前,JS会阻塞HTML的解析。
对于事件委托:绑定事件时,不绑定在目标元素上,而是绑定到其祖先元素上。这样:
- 监听事件少
- 新增节点时,无需增加事件绑定
原理是事件捕获和事件冒泡:终于弄懂了事件冒泡和事件捕获!
关于阻止事件冒泡:
有两种方式来阻止事件冒泡:
- event.stopPropagation():只阻止事件冒泡。
$('#div1').mousedown(function(event)){
event.stopPropagation();
}
- return false:不仅阻止事件冒泡,还阻止事件本身。
$('#div1').mousedown(function(event)){
return false;
}
渲染优化
- 懒执行
- 懒加载
- 防抖节流
- 雪碧图
懒执行
将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化。
对于某些耗时逻辑且不需要在首屏就使用的,就可以使用懒执行。懒执行需要唤醒:一般可以通过定时器或者事件的调用来唤醒。
懒加载
将不关键的资源延后加载——只加载用户正浏览或即将浏览的图片
只加载自定义区域(通常是可视区域,或即将进入可视区域)内需要加载的东西。对图片来说,先设置图片标签的src属性为一张占位图,真实的图片资源放入自定义属性data-src中,当进入自定义区域时,将自定义属性替换为src属性,这样就会下载图片资源。
防抖节流
防抖
n秒后再执行该事件,若在n秒内被重复触发,则重新计数。
也可以理解为:单位时间内多此触发,只执行最后的那一次。
原理:延迟执行,期间但凡有新的触发就重置定时器。
节流
n秒内只触发一次,若在n秒内重复触发,只有一次生效。
原理:上锁,只有满足一定价格时间才能执行。
应用场景
防抖场景:
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求。
- 手机号、邮箱验证输入检测。输入完后再检测。
- 窗口大小resize。窗口调整完毕后再进行渲染。防止重复渲染。
节流场景:
- 滚动加载,滚动到底部加载更多。不用一滚动就监听,可以n秒内监听一次。
- 监听搜索框,搜索联想功能。n秒内联想一次即可,不用时时联想。
雪碧图
若页面有10个图,则需要10次网络请求。若把10个图拼成一个大图,则只需要一次网络请求。
且同源域名有最大并发限制,如Chrome为6个,则要加载10个图需要两次并发。
优点:
- 减少请求次数
- 减少服务器压力
- 减少并发
- 提高加载速度
参考
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggfjbf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13