• 浏览器渲染页面的流程


      渲染页面的5个过程:

      1.解析HTML

      2.解析CSS

      3.构建Render Tree

      4.布局(layout)

      5.渲染(Paiting)

      在解析HTML 构建DOM树和解析CSS构建CSSOM(CSS Object Model)的过程中如果碰到script标签就会停止对DOM书和CSSOM的构建,会立即进行script脚本的运行,因为

    script脚本能操作DOM以及CSS,script在操作DOM以及CSS的时候可能会对DOM树以及CSSOM进行一些修改或者添加就会使一些节点发生变化,也就是让树的解构发生了变化,所以

    会先进行script标签中的内容解析,所以我们的script标签最好写在最后一个body的上边。

      CSS解析时一些注意的事项:

        1.CSS解析可以与DOM解析同时进行

        2.CSS解析与JS解析是互斥的

        3.在Webkit内核中进行了script执行优化,只有在JS访问CSS时才会发生互斥

      构建渲染树时需要注意:

        1.Render Tree和DOM Tree不完全对应

        2.display:none的元素不在Render Tree树中

        3.visibility:hidden的元素在Render Tree树中

      渲染树布局时需要注意的:

        1.float元素 absolute元素 fixed元素都会发生位置偏移

        2.我们常说的脱离文档流就是脱离Render Tree

      script标签的位置很重要我们在开发中应该尽量坚持这两个规则:

        1.在引入顺序上,CSS资源先于javascript资源

        2.JavaScript应该尽量少去影响DOM的构建

      HTML默认是流失布局的,CSS和JavaScript都会打破这种布局,都会改变DOM的外观样式及大小

        1.reflow(回流):当浏览器发生某个部分发生了变化从而影响了布局,这个时候就需要倒回去重新渲染,这个过程为回流

        2.repaint(重绘):repaint则是当我们改变某个元素的背景色,文字颜色,边框颜色等等不影响他周围或内部布局的属性时,屏幕的一部分重绘,但是元素的几何尺寸和位置都没有发生改变

        需要注意的是:display:none会触发reflow,而visibility:hidden则不会触发reflow触发的是repaint会重新渲染

        我们不能避免reflow,但还是能通过一些操作来减少回流:

          1.用transform来做形变和位移

          2.通过绝对位移来脱离当前层叠上下文,形成新的Render Layer

        

    有以下几点可以优化渲染效率

    1.合法地去书写 HTML 和 CSS ,且不要忘了文档编码类型。

    2.样式文件应当在 head 标签中,而脚本文件在 body 结束前,这样可以防止阻塞的方式。

    3.简化并优化CSS选择器,尽量将嵌套层减少到最小。

    4.尽量减少在 JavaScript 中进行DOM操作。

    5.修改元素样式时,更改其class属性是性能最高的方法。

    6.尽量用 transform 来做形变和位移

        

  • 相关阅读:
    POJ 2251 Dungeon Master
    POJ1321棋盘问题
    CODE[VS] 1003 电话连线
    CCF-201412-1-门禁系统
    CCF-201412-2-Z字形扫描
    为什么要用补码
    CCF-201409-1-相邻数对
    CCF-201409-2-画图
    CCF-201403-1-相反数
    CCF-201403-2-窗口
  • 原文地址:https://www.cnblogs.com/7fls/p/11379304.html
Copyright © 2020-2023  润新知