那如何才能优化前端性能?归纳为三步
一、关键资源字节数
字节数也就是通常说的减少资源文件(js、css、image、video…)的大小。
1、压缩
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩,使用压缩比例更高的格式(WebP)
2、缓存
强缓存(http状态码:200),不用请求服务器直接使用本地缓存,协商缓存(http状态码:304),使用时先请求服务器若被告知缓存没过期则使用本地缓存,不用下载资源,使用localstorage对数据进行存储。
3、针对首屏优化
对非关键资源延迟加载、异步加载,减少首屏资源大小
二、关键资源连接数
1、合并请求
使用http2.0的多路复用合并请求配置combo,在无法使用http2.0的情况下作为一种合并资源请求的手段。
2、减少图片请求数
使用spite图,使用svg-symbol。
3、针对一些场景采用css、js内联的方式。
4、使用强缓存减少了一次服务器请求。
5、非关键资源延迟、异步加载,减少了首屏资源连接数。
三、关键渲染路径
1、bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务,大家可以将这些多个任务进行分块,谁先完成谁就先输出,最终通过JS回填的方式输出DOM节点,这种方式主要解决了直出页面阻塞的问题。
2、bigrender分块渲染
常规的手段就是采用前端模板渲染页面,针对首屏时间主要减少了首次构建DOM树时的节点数
3、针对reflow,repaint,composit路径处理。
4、涉及到动画时关于layer的概念render layer、graphics layer。
5、css放在头部、js放底部避免阻塞DOM树的构建,关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。核心:css资源不会阻塞DOM树的构建但会阻塞DOM的渲染,JS会阻塞DOM树的构建,CSS会阻塞JS的执行。
以上就是针对Web前端性能优化归纳出的解决方案。更多Web前端学习资料,关注“武汉千锋”微信公众号领取。
@ 你遇到的前端面试题都有什么?
1.前端框架类问题,问你会不会用vue react啊
2.语言类,问你一些JavaScript语言的问题
3.项目经验,让你讲讲做过的项目,遇到的问题和解决之道
@ css选择器包括class选择器吗?
不包括
一:css基本选择器有哪些
1.css属性选择器
2.css标签选择器
3.cssID选择器
4.css的通配符
二:css有哪些高级选择器
1.css标签选择器
css标签选择器其实就是页面上的所有类型的标签,大家对经常描述称为共性,对无法描述的称为个性。大家在页面上看到input,div和ul都有可能是选择器,无论这个标签藏得多深,都可能被选择上,并且选择的是所有标签,并不是单单指一个。
2.cssID选择器
css中大家使用#来对名字进行自定义,#是指对一个特殊的标签来使用,并且只能用一次,在任何html标签中,都可以有id属性,但是前提要按照字母开头,更不能用字母去开头,或者和标签同名。还有一些高手建议在css层面上尽量不要使用id。
3.css类选择器
css中类选择器,大家使用.来表示,大家使用类来表示,其实就是比较灵活。class和id是十分相似的,并且同一个标签可以使用很多个类选择器,也可以多种标签使用。
4.css的通配符,可以替换任何标签,目前有些浏览器是不支持使用。
@ css三种选择器的特点?
css选择器的类型分为3类:标记选择器、类别选择器和ID选择器。
(可能名称有不同的说法,但意思都是一样的) 标记选择器是利用HTML的标记直接定义标记内容的样式,如:h1{ color:red; font-size:25pt;} 类别选择器是通常说的class选择器,定义的时候要在名称前加.如:.one{ color:red; font-size:25pt;} ID选择器定义的时候要在前面加#,如:#box { color:red; font-size:25pt;} 利用DW写CSS的时候,高级就是上面说的ID选择器,ID选择器的名字可以任意命名,可以自己定义,可是标签就只能是HTML语言里制定的那些标记,不能自己定义。
如果觉得《css选择器及优先级权重 读书笔记如何进行web前端性能优化 – CSS – 前端 css regular》对你有帮助,请点赞、收藏,并留下你的观点哦!