位置: IT常识 - 正文
浏览器的渲染过程(中药资源与开发跨专业考研)
编辑：rootadmin推荐整理分享浏览器的渲染过程(中药资源与开发跨专业考研)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:浏览器渲染过程包括,中药资源与开发跨专业考研,浏览器渲染过程中,浏览器渲染过程包括,浏览器渲染过程包括,浏览器的渲染过程面试,浏览器的渲染过程,浏览器的渲染过程,内容如对您有帮助，希望把文章链接给更多的朋友！
一、从用户请求到浏览器渲染的过程大致如下
1.用户输入域名，然后DNS解析成IP地址
2.浏览器根据IP地址请求服务器
3.服务器响应http请求，并返回给浏览器
4.浏览开始渲染：
。根据html，生成DOM TREE
。根据css，生成CSS TREE
。将DOM TREE和CSS TREE结合生成Render Tree
。根据Render Tree渲染页面
。遇到<script>则暂停渲染，优先执行js，然后再继续渲染（因为js执行和渲染引擎公用一个进程，原因是js可能做了一些dom操作，一般会把js放到页面的底部）
。直至把Render Tree渲染页面
二、reflow和repaint
reflow回流：
当某个部分发生了变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们无法预估浏览器到底会 reflow 哪一部分的代码，它们彼此相互影响。
repaint重绘：
如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow（在IE下需要换一下说法，reflow 要比 repaint 更缓慢）。
reflow一定引起repaint，而repaint不一定要reflow。reflow的成本比repaint高很多，DOM tree里每个结点的reflow很可能触发其子结点、祖先结点、兄弟结点的reflow。reflow(回流)是导致DOM脚本执行低效的关键因素之一。
现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。
在哪些情况下会导致reflow发生：
l 改变窗囗大小
l 改变文字大小
l 添加/删除样式表
l 内容的改变，如用户在输入框中敲字
l 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
l 操作class属性
l 脚本操作DOM
l 计算offsetWidth和offsetHeight
l 设置style属性
上一篇：电脑学习网免费分享2022年6月14日国外苹果iphone应用商店AppStore账号和密码(哪个网站可以免费学电脑)
下一篇：vue实现前端展示后端实时日志带颜色示例详解(vue前端页面设计)
