> 咕笛老师:前端面试中,本题目出现的频率很高,各大厂都出现过。着重理解整个过程,并不需要死记硬背
浏览器渲染页面的一般过程:
1.浏览器开始解析html,然后创建一个 DOM树。并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement,所对应的是html标签。
2.浏览器开始解析CSS代码,计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM Tree + CSSOM --> 渲染树(rendering tree)。渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上
## 重绘
在一定的条件下,会触发页面的重绘(repaint),所谓重绘,指的是屏幕的一部分要重新绘制。渲染树节点发生改变,但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变,但是该div标签节点的宽、高、内外边距并不发生变化,此时触发浏览器重绘
## 重排
重排也叫回流(reflow),当渲染树节点发生改变,影响了节点的几何属性(如宽、高、内边距、外边距、或是float、position、display:none;等等),导致节点位置发生变化,此时触发浏览器重排(reflow),需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式:"display:none;"。导致该p标签被隐藏起来,该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树,重新布局,即重排
- js面试题
- 说一下自己常用的es6的功能?
- 页面渲染html的过程?
- 说一下事件代理?
- 说一下继承的几种方式及优缺点?
- 说一下闭包?
- 对JSONP的理解*
- 基本的数据类型有哪些?
- js程序题
- JS找字符串中出现最多的字符
- 数组去重怎么作?
- 变量提升的这道题你会吗
- 用一段代码思考this的指向问题
- 这些类型的typeof返回什么值?
- 怎样添加、移除、移动、复制、创建和查找节点?
- css面试题
- css水平、垂直居中的写法,请至少写出4种
- 1rem、1em、1vh、1px各自代表的含义?
- 说一下盒模型?
- 清除浮动的几种方式,及原理?
- b与strong的区别?
- img中的alt与title属性?
- 浏览器兼容性
- IE6的BUG你都遇过哪些?怎么解决的?
- html面试题
- 对HTML结构语义化的理解?
- 前端工程化面试题
- webpack
- export和export default的区别?
- VueJs面试题
- 基础
- 生命周期
- vue路由(vue-router)
- 状态管理(vuex)
- axios
- vue-cli框架
- 前端架构面试题
- HTTP
- get、post的区别
- 你所知道的http的响应码及含义?