前端--性能优化【中篇】--html+css优化与图片优化

三、css+html优化

1、避免css阻塞

2、降低css选择器的复杂度

浏览器读取选择器,遵循的原则是从选择器的右边到左边读取。

  • 减少嵌套:最多不要超过三层,并且后代选择器的开销较高,慎重使用
  • 避免使用通配符,对用到的元素进行匹配即可
  • 利用继承,避免重复匹配和定义
  • 正确使用类选择器和id选择器

也就是说,假如css选择器很复杂的话,渲染在浏览器里的CSSOM树,会呈现很高的层级,不是扁平化的,导致在查找具体选择器的时候难度增加,树的深度很高,难以快速精准定位

3、避免使用css表达式

css表达式会被频繁的进行计算

4、使用外链式的css

每次请求html文件的时候都会下载css,可以让浏览器缓存起来,减少html文件大小,减少了http请求数量

5、首屏加载优化

具体又分为九大项:

  • 路由懒加载
  • 组件懒加载
  • 骨架屏和优化白屏时长
  • 长列表虚拟滚动
  • 合理使用tree-shaking
  • 使用web-worker优化长任务
  • 使用RequestAnimationFrame制作动画
  • 优化js加载方式
  • 优化图片

6、减少重绘和回流

重绘:当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制

回流(重排):当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程

  • 增加多个节点使用documentFragment:不是真实dom的部分,不会引起重绘和回流

  • 用 translate 代替 top ,因为 top 会触发回流,但是translate不会。所以translate会比top节省了一个layout的时间

  • 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局);opacity 代替 visiabilityvisiability会触发重绘(paint),但opacity不会。

  • 如果需要多次修改,可以先把display设置为none,之后反复进行修改,等改好了后再进行显示,这样减少触发重排(回流)

  • 尽量在低层级的DOM节点进行操作

四、JS优化

1、事件委托

在事件冒泡的上一次函数中使用

2、多线程

使用webworker进行计算,避免页面假死

3、防抖节流

防抖:以五分钟为例,从第一次点击开始响应,直到五分钟结束后才会去响应下一次的点击,中间反复点击不计入,不进行响应

节流:以五分钟为例,每次点击,都会请客之前的计时,重新计时,直到最后一次点击为止,开始计时,五分钟后结束

4、尽量不使用js动画

开销大,可以采用canvas动画和css3动画·

5、计算结果缓存

减少运算次数

相关推荐
passer9813 分钟前
列表项切换时同步到可视区域
前端
FogLetter5 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元6 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api6 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐8 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码9 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
子林super15 分钟前
y1新建cluster集群redis
前端
liangdabiao17 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端
BUG创建者21 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
Pedantic35 分钟前
swift 日期与时间的三个结构体
前端