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节点保存在一个变量中,避免重复获取。

  • 相关阅读:
    Ext JS学习第三天 我们所熟悉的javascript(二)
    Ext JS学习第二天 我们所熟悉的javascript(一)
    Ext JS学习第十七天 事件机制event(二)
    Ext JS学习第十六天 事件机制event(一)
    Ext JS学习第十五天 Ext基础之 Ext.DomQuery
    Ext JS学习第十四天 Ext基础之 Ext.DomHelper
    Ext JS学习第十三天 Ext基础之 Ext.Element
    Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
    针对错误 “服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF” 的原因分析
    C# 使用HttpWebRequest通过PHP接口 上传文件
  • 原文地址:https://www.cnblogs.com/3yleaves/p/9630334.html
Copyright © 2011-2022 走看看