浏览器步骤:
- 解析html文本,构建dom tree
- 歇息css样式表,构建cssom tree
- 根据dom tree和 cssom tree 构建render tree
- 根据render tree来进行布局处理(layout)
- 将页面元素进行绘制(painting)
谈谈阻塞:
css: css被视为阻塞渲染的资源,也很好理解,要不然怎么构建render tree, 怎么进行布局处理呀~~ 因此浏览器会等待cssom tree构建完毕。
js: script标签会阻塞html解析,因为js可能会改变dom和css,因此浏览器会先解析script,避免浪费。 要想避免阻塞的话,可使用defer 和 async。
谈谈repaint和reflow
repaint: 发生在屏幕的一部分要重新画,比如背景颜色,布局没有改变!,浏览器只需要走第五步。
reflow: 布局发生了改变!浏览器需要重新从layout这一步开始,因为render tree已经变了。多走一步,显然更加耗费性能啦~~
所以呢重点关注会引起reflow的操作:
- 当你增加、删除、修改dom结点时,会导致reflow或repaint
- 当你移动dom的位置,或是搞个动画的时候。
- 当你修改css样式的时候。
- 当你resize窗口的时候(移动端没有这个问题),或是滚动的时候。
- 注:display:none会触发reflow,而visibility:hidden只会触发repaint,因为没有发现位置变化。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
CSS知识点总结
css知识点总结一、什么是CSS?二、CSS的主要作用是什么2.1 CSS布局2.1.1 盒子模型欢迎使用Ma...
[阅读全文]
-
css的基础知识
初识css1、什么是css。css是英文Cascading Style Sheet的缩写,意思是层叠样式表。作用...
[阅读全文]
-
-
CSS总结
CSS总结css基础知识CSS:层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的...
[阅读全文]
-
6-css样式
背景颜色background-color背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb背景图片bac...
[阅读全文]
-
-
前端工程化的意义
工程化不是某个具体的工具,工程化的核心是对项目整体的规划和架构解决的问题&带来的价值1.每次开启新项目,...
[阅读全文]
-
-
-
-
css2zj
标签分类男标签(块标签):独占一行,eg:div hn p ul ol li dt…可以设置宽高,如果不设,则默...
[阅读全文]
网友评论