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

浏览器渲染页面

作者: 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 更缓慢)。

相关文章

  • 浏览器渲染那些事

    WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验,简单地说,页面渲染就是浏览器...

  • 浏览器渲染页面过程

    浏览器渲染页面过程 1. 构建DOM和CSSOM树 浏览器渲染页面前需要构建DOM和CSSOM树 浏览器解析过程大...

  • 【浏览器】浏览器的渲染原理

    Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将h...

  • 略知一二之浏览器渲染原理

    浏览器渲染原理 推荐相关阅读文章 浏览器页面渲染机制,你真的弄懂了吗? 关键渲染路径 深入浅出浏览器渲染原理 [译...

  • css知识总结

    一、浏览器渲染原理 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接...

  • 浏览器渲染原理与过程

    浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接...

  • 浏览器渲染原理与过程【转】

    浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接...

  • 前端之路——浏览器是如何「画」出页面的

    浏览器是如何渲染页面的 关于浏览器渲染页面,不得不提的就是“回流”和“重绘”。浏览器读取一个html文件后,会自上...

  • web前端入门到实战:CSS Houdini实现动态波浪纹

    我们知道,浏览器在渲染页面时,首先会解析页面的 HTML 和 CSS,生成渲染树(rendering tree),...

  • 前端工程师必备:从浏览器的渲染到性能优化

    浏览器渲染 1.浏览器渲染图解 [来自google开发者文档] 浏览器渲染页面主要经历了下面的步骤: 1.处理 H...

网友评论

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

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