zoukankan      html  css  js  c++  java
  • 浏览器的渲染机制详细解读

    页面渲染:

    1.从服务器获取需要渲染的内容。

    2.浏览器基于自己的渲染引擎开始自上而下加载渲染代码。

    浏览器获取的是文件流

    1.浏览器首先会把16进制的字节信息编译为代码字符串

    2.按照w3c规则进行字符解析,生成对应的Tokens,最后转换为浏览器内核可以识别渲染的DOM节点

    3.按照节点最后解析为DOM Tree / CSSOM Tree

    link和@import都是外部导入样式

    1.遇到link 浏览器会派发一个新的线程去加载资源文件,与此同时GUI渲染线程会继续向下渲染代码

    无论css是否请求回来,代码继续渲染

    2.遇到@import GUI线程会暂时停止渲染,去服务器加载资源文件,资源文件没有返回之前,是不会

    继续渲染的, @import会阻碍浏览器的渲染,项目中尽量少用

    3.style GUI直接渲染

    页面渲染第一步:在css资源还没有请求回来之前,先生成DOM树。

    页面渲染第二部:当所有的css资源都请求回来之后,浏览器按照css导入顺序,依次进行渲染,最后生成CSSOM树

    页面渲染地三步:把DOM树和CSSOM树结合在一起,生成有结构 有样式的RENDER TREE渲染书

    最后一步:浏览器按照渲染书,在页面中进行渲染和解析,

    性能优化:

    1.减少DOM树渲染的时间(html层级不要太深,标签语义化)

    2.减少CSSOM树渲染的时间(选择器是从右向左解析,所以尽可能减少选择器的层级)

    3.减少HTTP的请求次数和请求大小。

    4.一般会把css放在页面的开始位置(提前请求资源,用link别用@import,对于移动端,如果css比较少,采用内嵌样式即可)

    5.为了避免白屏,可以进来第一件事快速生成一套loading的渲染书( 前端骨架屏 ),服务器的ssr骨架屏所提高的玄滩

    是避免了客户端再次单独请求数据,而不是样式和结构上的,(首屏处理)

    6.把js放在页面底部以及尽可能使用defer和async

    7.减少DOM的回流和重绘。

  • 相关阅读:
    咏南微服务架构中间件
    几个开源的clickstream 分析工具
    partiql 学习一 试用
    partiql 亚马逊开源的基于sql 的查询语言
    cube.js 最新版本的一些特性
    astronomer 企业级的airflow 框架
    neodash 构建neo4j dashboard 的工具
    开发自定义的dremio 函数
    dremio sql 操作
    dremio 生产部署推荐硬件配置
  • 原文地址:https://www.cnblogs.com/loveliang/p/14028572.html
Copyright © 2011-2022 走看看