HTML的解析顺序及过程详解
1、解析规则:
1、html字符串被浏览器接收后一句一句读取并解析
2、如果解析到link标签,便发送请求获取css;
3、解析到script标签,发送请求获取js后并执行相应的代码
4、解析到img后会请求图片资源
5、在解析html过程中构建dom树,解析css等过程中构建渲染树,递归布局后进行页面绘制
2、开始解析html
//解析器通常会把工作分配给两个组件:分词程序负责把输入的html切分成合法的序列;解析程序按照句法规则去分析然后构建句法树。
<html><body><p>hello taya</p><div><p>hiiiiii</p></div></body>
</html>
该html解析成DOM树后为:
- HTMLHtmlElement
- HTMLBodyElement
- HTMLParagraphElement
- Text
- HTMLDivElement
- HTMLParagraphElement
- Text
- HTMLParagraphElement
- HTMLParagraphElement
- HTMLBodyElement
3、css选择器的读取顺序是从右向左、选择器性能解释
#taya div.ty span{ color:red }
它的读取顺序是:span => div class:ty => id:taya
先找到全局的span,然后从第一个开始向上寻找class为ty的div,然后再寻找id为taya的元素,如果没有匹配项则放弃本条路径,从下一个span开始寻找。
如果是自左向右,便变成了深度遍历并伴随着大量的回溯节点,非常消耗性能
这也是为什么在性能方面:id选择器 > 类选择器 > 元素选择器
4、js解析
1、js是单线程,只能按照先后顺序执行
2、浏览器解析是异步的,当需要请求外部资源时是不会影响html加载的,但是如果遇到js文件,则会将解析挂起,因为js中可能会有针对DOM的操作(js优化我们需要尽可能地去避免)
3、js解析器会先进行预解析,即找到所有的变量、函数等进行初始化赋值为undefined,把函数取出来成为一个函数块,存放到仓库中,然后再解析js代码,和仓库进行匹配
根据以上的机制,能解释很多词法作用域的问题:
1:
console.log(a)
let a = 1
console.log(a)
//结果: undefined 12: //如果使用let,这个例子就没有用了,会报错。
console.log(taya) //function taya(){console.log("4")}
var taya = "sdsd"
console.log(taya) //sdsd
function taya(){console.log("11")}
console.log(taya) //sdsd
var taya = "3"
console.log(taya) //3
function taya(){console.log("4")}
console.log(taya) //3
解析:在js预解析时,如果变量和函数重名,只会保留函数块,所以第一个taya输出为函数
在解析时,只有+ - * / % =等字符时才能更改仓库中的值,所以后续的taya输出不为函数了3:
var a = 1;
function fc(){console.log(a)a = 2
}
fc()
console.log(a)
输出:1 2
解析:执行fc()函数时,发现内部并没有定义任何变量,第一行输出a,仓库内是空的,便向外部寻找,找到了全局变量a。4:
var a = 1;
function fc(a){console.log(a)a = 2
}
fc(1)
console.log(a)
//输出:1 1
HTML的解析顺序及过程详解相关推荐
- U-Boot 之三 U-Boot 源码文件解析及移植过程详解
在之前的博文 Linux 之八 完整嵌入式 Linux 环境介绍及搭建说明 中我们说了要一步步搭建整个嵌入式 Linux 运行环境.我所使用的硬件平台及整个要搭建的嵌入式 Linux 环境见博文 ...
- java 解析器_高性能Java解析器实现过程详解
如果你没有指定数据或语言标准的或开源的Java解析器, 可能经常要用Java实现你自己的数据或语言解析器.或者,可能有很多解析器可选,但是要么太慢,要么太耗内存,或者没有你需要的特定功能.或者开源解析 ...
- 高性能Java解析器实现过程详解
如果你没有指定数据或语言标准的或开源的Java解析器, 可能经常要用Java实现你自己的数据或语言解析器.或者,可能有很多解析器可选,但是要么太慢,要么太耗内存,或者没有你需要的特定功能.或者开源解析 ...
- Spring 是解析配置类过程详解
Spring执行流程图如下: Spring执行流程图 这个流程图会随着我们的学习不断的变得越来越详细,也会越来越复杂,希望在这个过程中我们都能朝着精通Spring的目标不断前进! 在上篇文章我们学 ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- django-rest-framework解析请求参数过程详解
https://www.jb51.net/article/165699.htm 转载于:https://www.cnblogs.com/gcgc/p/11544187.html
- U-Boot 之一 零基础编译 U-Boot 过程详解 及 编译后的使用说明
在之前的博文 Linux 之八 完整嵌入式 Linux 环境介绍及搭建过程详解 中我们说了要一步步搭建整个嵌入式 Linux 运行环境,今天就开始编译 U-Boot.我所使用的硬件平台及整个要搭建 ...
- Android init.rc文件解析过程详解(一)
Android init.rc文件解析过程详解(一) 一.init.rc文件结构介绍 init.rc文件基本组成单位是section, section分为三种类型,分别由三个关键字(所谓关键字 ...
- 类加载顺序及加载过程详解
转自: 类加载顺序及加载过程详解 下文笔者讲述类的加载顺序及加载过程的详解说明,如下所示 java创建对象的方式分为以下四种 new 反射克隆反序列化 class对象获取的方式分享 //没有完成初始化 ...
最新文章
- pycharm如何执行高级撤销操作回到历史
- 文本过滤--awk 3
- windows下备份Mysql数据的脚本
- 英伟达驱动更新记录_N卡驱动更新软件(NVIDIA GeForce Experience) v3.16.0.122 官方版
- CSP认证201604-4	游戏[C++题解]:bfs、拆点、迷宫问题加强版、三维数组
- 新版Edge浏览器弹出“ 禁用开发人员模式扩展 ”的解决方案
- Python 已经饱和?我猜你一定不懂这个技能!
- 用python将指定目录下的所有json文件合并成一个csv文件
- 延迟开学?这些教育读书公众号可以帮助孩子学习! 你都关注了吗?
- cuDNN编写卷积实例
- Django 知识点回顾
- ubuntu下环境变量详解 bashrc, profile, environment
- VALSE学习(九):物体检测进展
- Java开发、网络爬虫、自然语言处理、数据挖掘简介
- 如何提高Android系统Aututu benchmark跑分
- 《量子信息与量子计算简明教程》第一章·基本概念(下)
- linux tomcat 部署 JCO,JCO连接SAP时tomcat报错
- 2022年下半年软考报名时间汇总,最新版!
- 通话用哪款蓝牙耳机好?通话效果比较好的蓝牙耳机推荐
- TAS5760M-Q1 放大器内部时钟误差被锁存问题