编码、解码形成DOM树的过程

浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树:

  • 编码: 先将HTML的原始字节数据转换为文件指定编码的字符。
  • 令牌化: 然后浏览器会根据HTML规范来将字符串转换成各种令牌(如<html><body>这样的标签以及标签中的字符串和属性等都会被转化为令牌,每个令牌具有特殊含义和一组规则)。令牌记录了标签的开始与结束,通过这个特性可以轻松判断一个标签是否为子标签(假设有<html><body>两个标签,当<html>标签的令牌还未遇到它的结束令牌</html>就遇见了<body>标签令牌,那么<body>就是<html>的子标签)。
  • 生成对象: 接下来每个令牌都会被转换成定义其属性和规则的对象(这个对象就是节点对象)。
  • 构建完毕: DOM树构建完成,整个对象集合就像是一棵树形结构。可能有人会疑惑为什么DOM是一个树形结构,这是因为标签之间含有复杂的父子关系,树形结构正好可以诠释这个关系(CSSOS同理,层叠样式也含有父子关系。例如: div p {font-size: 18px},会先寻找所有p标签并判断它的父标签是否为div之后才会决定要不要采用这个样式进行渲染)。

整个DOM树的构建过程其实就是: 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型,下面将通过一个示例HTML代码与配图更形象地解释这个过程。

如下面的这段HTML

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

优化工作清单

当出现了页面性能问题时,或者在设计我们的应用之前,就可以参考如下的条目进行快速检查。

  • 页面内容

    • 减少 HTTP 请求数
    • 减少 DNS 查询
    • 避免重定向
    • 缓存 Ajax 请求
    • 延迟加载
    • 预先加载
    • 减少 DOM 元素数量
    • 划分内容到不同域名
    • 尽量减少 iframe 使用
    • 避免 404 错误
  • 服务器
    • 使用 CDN
    • 添加 Expires 或 Cache-Control 响应头
    • 启用 Gzip
    • 配置 Etag
    • 尽早输出缓冲
    • Ajax 请求使用 GET 方法
    • 避免图片 src 为空
  • Cookie
    • 减少 Cookie 大小
    • 静态资源使用无 Cookie 域名
  • CSS
    • 把样式表放在 <head>
    • 不要使用 CSS 表达式
    • 使用 link 替代 @import
    • 不要使用 filter
  • JavaScript
    • 把脚本放在页面底部
    • 使用外部 JavaScript 和 CSS
    • 压缩 JavaScript 和 CSS
    • 移除重复脚本
    • 减少 DOM 操作
    • 使用高效的事件处理
  • 图片
    • 优化图片
    • 优化 CSS Sprite
    • 不要在 HTML 中缩放图片
    • 使用体积小、可缓存的 favicon.ico
  • 移动端
    • 保持单个文件小于 25 KB
    • 打包内容为分段(multipart)文档

优化关键渲染路径

假设有一个HTML页面,它只引入了一个CSS外部文件:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

首先浏览器要先对服务器发送请求获得HTML文件,得到HTML文件后开始构建DOM树,在遇见<link>标签时浏览器需要向服务器再次发出请求来获得CSS文件,然后则是继续构建DOM树和CSSOM树,浏览器合并出渲染树,根据渲染树进行布局计算,执行绘制操作,页面渲染完成。

有以下几个用于描述关键渲染路径性能的词汇:

  • 关键资源:可能阻塞网页首次渲染的资源(上图中为2个,HTML文件与外部CSS文件style.css)。
  • 关键路径长度: 获取关键资源所需的往返次数或总时间(上图为2次或以上,一次获取HTML文件,一次获取CSS文件,这个次数基于TCP协议的最大拥塞窗口,一个文件不一定能在一次连接内传输完毕)。
  • 关键字节:所有关键资源文件大小的总和(上图为9KB)。

接下来,案例代码的需求发生了变化,它新增了一个JavaScript文件。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js"></script>
  </body>
</html>

JavaScript文件阻塞了DOM树的构建,并且在执行JavaScript脚本时还需要先等待构建CSSOM树,上图的关键渲染路径特性如下:

  • 关键资源: 3(HTMLstyle.cssapp.js
  • 关键路径长度: 2或以上(浏览器会在一次连接中一起下载style.cssapp.js
  • 关键字节:11KB

现在,我们要优化关键渲染路径,首先将<script>标签添加异步属性async,这样浏览器的HTML解析器就不会阻塞这个JavaScript文件了。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js" async></script>
  </body>
</html>
  • 关键资源:2(app.js为异步加载,不会成为阻塞渲染的资源)
  • 关键路径长度: 2或以上
  • 关键字节: 9KB(app.js不再是关键资源,所以没有算上它的大小)

接下来对CSS进行优化,比如添加上媒体查询。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet" media="print">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js" async></script>
  </body>
</html>
  • 关键资源:1(app.js为异步加载,style.css只有在打印时才会使用,所以只剩下HTML一个关键资源,也就是说当DOM树构建完毕,浏览器就会开始进行渲染)
  • 关键路径长度:1或以上
  • 关键字节:5KB

优化关键渲染路径就是在对关键资源、关键路径长度和关键字节进行优化。关键资源越少,浏览器在渲染前的准备工作就越少;同样,关键路径长度和关键字节关系到浏览器下载资源的效率,它们越少,浏览器下载资源的速度就越快。

其他JS在线测试网站

原文地址:https://www.cnblogs.com/liea/p/12499187.html

时间: 2024-10-14 01:50:44

编码、解码形成DOM树的过程的相关文章

Webkit初始化以及加载URL过程中各种对象的建立时序以及DOM树的建立详情分析

众所周知,Webkit需要创建DOM树.为此它需要创建WebView, Chrome,Page,Frame, Document, Document Parser, DOM Tree Builder(DOM树的建造引擎),ScriptRunner, Resource Handle等等对象. 同时,还需要创建为上面这些对象服务或者与之通信的支持对象,比如:与本地窗口相关的ChromeClient, 与FrameLoader事件相关的FrameLoaderClient,为Document服务的Docu

[C语言]Base64编码解码

Base64编码解码 一,Base64编码原理 Base64编码的字符数组如下所示 : ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 字符串转Base64编码:取3字节的字符串转换为四字节的字符串,依次往后转换.得到Base64编码字符串.具体原理如下: 1,如果需要编码的原串字节数刚好为3的倍数,那么转换规则如下: 以中文字符'严'为例,'严'字的UTF-8编码为:0xE4B8A5 = 11100100  10

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

服务器端获取表单数据的编码解码问题(servlet)

首先需要明确指出的是,这里的服务器是指tomcat. 在页面没有明确指定编码的情况下,客户端通过input标签和字符串向服务器传递两个值param1和param2.如果直接使用request.getParameter()方法来获取值的话,得到的肯定都是乱码,我们需要对其重新进行编码解码,就像下面的代码所示的那样: new String(req.getParameter("param1").getBytes("iso-8859-1"), "gbk"

dom树的介绍,及原理分析

三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解析 的结果通常是一个树的节点集合,用来表示文档结构,它被称为解析树或者语法树. 例子: 解析表达式“2+3-1”,返回树如下图3.1 1).语法: 解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的.每一种可以解析的格式必须由确定的语法与词汇组成.这被称之为上下文无关语法. 人类语言

java中文乱码解决之道(五)—–java是如何编码解码的

原文出处:http://cmsblogs.com/?p=1491 在上篇博客中LZ阐述了java各个渠道转码的过程,阐述了java在运行过程中那些步骤在进行转码,在这些转码过程中如果一处出现问题就很有可能会产生乱码!下面LZ就讲述java在转码过程中是如何来进行编码和解码操作的. 编码&解码 在上篇博客中LZ阐述了三个渠道的编码转换过程,下面LZ将结束java在那些场合需要进行编码和解码操作,并详序中间的过程,进一步掌握java的编码和解码过程.在java中主要有四个场景需要进行编码解码操作:

CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配

在浏览器内核(排版引擎)CSS规则树和HTML的DOM树合成渲染树的时候,会涉及到渲染树的位置属性的问题,因为其位置属性将通过CSS选择器链的优先级来决定,而渲染树的某个结点可能会同时满足多个选择器链,这时候就要通过选择器的优先级来完成属性的赋值. 在这个地方,我仅仅处理了几个简单的选择器情况:{(.class)     (#id)       (element)      (#id,.class,elememt)      (#id>.class)        (#id element)  

java中文乱码解决之道(六)—–javaWeb中的编码解码

在上篇博客中LZ介绍了前面两种场景(IO.内存)中的java编码解码操作,其实在这两种场景中我们只需要在编码解码过程中设置正确的编码解码方式一般而言是不会出现乱码的.对于我们从事java开发的人而言,其实最容易也是产生乱码最多的地方就是web部分.首先我们来看在javaWeb中有哪些地方存在编码转换操作. 编码&解码 通过下图我们可以了解在javaWeb中有哪些地方有转码: 用户想服务器发送一个HTTP请求,需要编码的地方有url.cookie.parameter,经过编码后服务器接受HTTP请

java中文乱码解决之道(六)-----javaWeb中的编码解码

在上篇博客中LZ介绍了前面两种场景(IO.内存)中的java编码解码操作,其实在这两种场景中我们只需要在编码解码过程中设置正确的编码解码方式一般而言是不会出现乱码的.对于我们从事java开发的人而言,其实最容易也是产生乱码最多的地方就是web部分.首先我们来看在javaWeb中有哪些地方存在编码转换操作. 编码&解码 通过下图我们可以了解在javaWeb中有哪些地方有转码: 用户想服务器发送一个HTTP请求,需要编码的地方有url.cookie.parameter,经过编码后服务器接受HTTP请