zoukankan      html  css  js  c++  java
  • 浏览器中的页面之CSS是如何影响到渲染流程的

    在解析DOM的过程中,如果遇到了javascript脚本,那么需要先暂停DOM解析去执行javascript,因为JavaScript有可能会修改当前状态下的DOM.

    不过在执行JavaScript脚本之前,如果页面中包含了外部CSS文件的引用,或者通过style标签内置了CSS内容,那么渲染引擎还需要将这些内容转换为CSSOM,因为JavaScript有修改CSSOM的能力,所以在执行JavaScript之前,还需要依赖CSSOM。也就是说CSS在部分情况下也会阻塞DOM的生成。

    渲染流水线:CSS文件下载完成并生成CSSOM => 执行JavaScript脚本 => 继续构建DOM => 构建布局树 => 绘制页面

    从发起URL请求开始,到首次显示页面的内容,在视觉上会经历三个阶段:
    • 第一阶段,等请求发出去之后,到提交数据阶段,这时页面展示出来的还是之前页面的内容
    • 第二阶段,提交数据之后渲染进程会创建一个空白页面,我们通常把这段时间称为解析白屏,并等待CSS文件和JavaScript文件的加载完成,生成CSSOM和DOM,然后合成布局树,最后还要经过一系列的步骤准备首次渲染。
    • 第三阶段,等首次渲染完成之后,就开始进入完整页面的生成阶段,然后页面会一点点被绘制出来。

    针对第二阶段,这个阶段的主要问题是白屏时间,如果白屏时间过久,就会影响到用户体验,为了缩短白屏时间,我们来挨个分析这个阶段的主要任务,包括了解析HTML、下载CSS、下载JavaScript、生成CSSOM、执行JavaScript、生成布局树、绘制页面一系列操作

    通常情况下的瓶颈主要体现在下载CSS文件、下载JavaScript文件和执行JavaScript

    所以想缩短白屏时间,可以有以下策略

    • 通过内联JavaScript、内联CSS来移出这两种类型的文件下载,这样获取到HTML文件之后就可以直接开始渲染流程了。
    • 但并不是所有的场合都适合内联,那么还可以尽量减少文件大小,比如通过webpack等工具移除一些不必要的注释,并压缩JavaScript文件。
    • 还可以将一些不需要在解析HTML阶段使用的JavaScript标记上sync或者defer。
    • 对于大的CSS文件,可以通过媒体查询属性,将其拆分为多个不同用途的CSS文件,这样只有在特定的场景下才会加载特定的CSS文件。
  • 相关阅读:
    运行自动安装apk代码,报错: Original error: Could not find aapt Please set the ANDROID_HOME environment variable with the Android SDK root directory path.
    已安装Appium-Python-Client,但appium无法导入WebDriver
    打开uiautomatorviewer.bat闪退
    常见的python面试题【杭州多测师】【python笔试题】
    支付功能怎么测试?
    自动化运维工具——ansible详解
    服务端编程——异常+校验器+环境变量
    服务端编程——初始koa
    用postman发送请求,在koa中获取的请求body为undefined
    jQuery入口函数测试
  • 原文地址:https://www.cnblogs.com/zppsakura/p/13970736.html
Copyright © 2011-2022 走看看