美文网首页
浏览器渲染页面

浏览器渲染页面

作者: qingqing轶事 | 来源:发表于2017-06-25 15:10 被阅读0次

    1.用户输入网址,发送http请求,
    DNS域名解析IP,

    • 解析html文件,创建dom树
    • 解析css
    • 将css与dom合并,创建渲染树

    **影响页面渲染速度主要有:reflow(回流)和repaint(重绘) **

    reflow(回流):

    说到页面为什么会慢?那是因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染, 该过程称为reflow(回流)。

    reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

    repaint(重绘):

    只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。

    repaint 的速度明显快于 reflow(在IE下需要换一下说法,reflow 要比 repaint 更缓慢)。

    相关文章

      网友评论

          本文标题:浏览器渲染页面

          本文链接:https://www.haomeiwen.com/subject/obqrcxtx.html