一、从用户请求到浏览器渲染的过程大致如下
创新互联公司网站建设公司,提供网站设计、网站制作,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!
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属性
网页题目:浏览器的渲染过程
本文地址:https://www.cdcxhl.com/article30/dsojeso.html
成都网站建设公司_创新互联,为您提供定制网站、外贸网站建设、响应式网站、自适应网站、关键词优化、微信公众号
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联