zoukankan      html  css  js  c++  java
  • 浏览器渲染页面的过程、重绘、重排以及页面优化

    各常用浏览器所用的内核和前缀

    1.IE浏览器内核:Trident内核,也是俗称的IE内核; 前缀:-ms-

    2.Chrome浏览器内核:Blink内核; 前缀:-webkit-

    3.Firefox浏览器内核:Gecko内核,俗称Firefox内核;前缀:-moz-

    4.Safari浏览器内核:Webkit内核; 前缀:-webkit-

    5.Opera浏览器内核:Blink内核; 前缀:-o-

    6.360浏览器、猎豹浏览器内核、2345浏览器:IE+Chrome双内核;

    7.搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);

    9.百度浏览器、世界之窗内核:IE内核; 

     

    浏览器渲染页面的过程

    1.代码解析:浏览器向服务器请求到了 HTML 文档后便开始解析,产物是 DOM ,根据 CSS 生成 CSSOM(CSS对象模型)

    2.对象合成:将 DOM 和 CSSOM 合并产生渲染树(render tree)

    3.布局(layout):有了渲染树,知道了所有节点的样式,便根据这些节点以及样式计算它们在浏览器中确切的大小和位置

    4.绘制(paint):把节点绘制到浏览器上

    以上四步并非严格按顺序执行,往往第一步还没完成,第二步和第三步就已经开始了。所以,会看到这种情况:网页的HTML代码还没下载完,但浏览器已经显示出内容了。

    渲染的过程中值得注意的地方:

    • html 一边解析一边显示,css 的加载和解析不会阻塞 html 文档的解析

    • css 必须完全解析完毕才能进入生成渲染树环节,css的解析会阻塞js的执行,必须等到CSSOM生成后才能执行 js

    • js 的执行会阻塞 html 文档的解析(加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是JavaScript可以修改DOM,所以必须把控制权让给它)

    重绘(repaint)

    元素的视觉表现属性被改变即触发重绘,如visibility、opacity ,不会影响到 dom 结构。

     

    重排(reflow)/回流

    就是渲染树的一部分必须要更新,并且节点的尺寸发生了变化。重排也会触发重绘。常见情况:

    • DOM 操作

    • 修改 width、display 等 CSS 属性

    • 浏览器窗口变化(滚动或缩放)

    其他概念:

    首屏时间:当浏览器显示第一屏页面所消耗的时间

    白屏时间:浏览器开始显示内容的时间

     

    页面优化

    要进行页面优化,首要目标就是减少重绘和重排

    1.CSS 标签应该放到头部(<head></head>之间):如果 CSS 放在后面页面可能会出现闪跳、白屏或者布局混乱直到 CSS 加载完成。

    2.script 标签都放在页面底部(</body>前):这样即使遇到脚本失去响应,网页主体的渲染也已经完成了。还有一个好处,在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。或者在标签中使用 async或defer特性 。

    3.合理高效利用 CSS 选择器:CSS 是逆向解析的所以应当避免多层嵌套,避免使用通配器。尽量少的去对标签进行选择,而是用 class。不要去用标签限定ID或者类选择符,尽量少的去使用后代选择器,降低选择器的权重值。考虑继承。

    4.减少HTTP请求,压缩数据内容。进行资源打包,将需要多次请求的资源进行打包减少资源请求次数,如webpack等。 使用雪碧图,可以避免因不同图片引起的多次资源下载。(雪碧图:将多张零散的背景图片整合到一张背景图上,然后通过background-position来调整背景的位置。利用CSS Sprites能够减少浏览器向服务器的请求次数,减少http请求,从而提高页面的性能。还能减少图片的字节,在应用精灵图片的时候,你需要考虑当前盒子会不会漏出其他的背景图)。

    5.减少对DOM的操作,将DOM节点保存在一个变量中,避免重复获取。

  • 相关阅读:
    build tools
    文档系统总结
    各进制及其转换详解
    JQuery 函数执行顺序
    计算页面宽高的函数
    Linq中的多表左联,详细语句
    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
    基于JQUERY写的 LISTBOX 选择器
    js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
    JQuery select控件的相关操作
  • 原文地址:https://www.cnblogs.com/3yleaves/p/9630334.html
Copyright © 2011-2022 走看看