浏览器如何解析 HTML？

浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成 8KB 大小的分块传输。

HTML 解析器的主要工作是对 HTML 文档进行解析，生成解析树。

解析树是以 DOM 元素以及属性为节点的树。DOM 是 文档对象模型（Document Object Model） 的缩写，它是 HTML 文档的对象表示，同时也是 HTML 元素面向外部（如 JavaScript）的接口。树的根部是 Document 对象。整个 DOM 和 HTML 文档几乎是一对一的关系。

解析算法

HTML 不能使用常见的自顶向下或自底向上方法来进行分析。主要原因有以下几点:

由于不能使用常用的解析技术，浏览器创造了专门用于解析 HTML 的解析器。解析算法在 HTML5 标准规范中有详细介绍，算法主要包含了两个阶段： 标记化（tokenization）和树的构建 。

解析结束之后

浏览器开始加载网页的外部资源（CSS，图像，JavaScript 文件等）。

此时浏览器把文档标记为 可交互的（interactive） ，浏览器开始解析处于 推迟（deferred） 模式的脚本，也就是那些需要在文档解析完毕之后再执行的脚本。之后文档的状态会变为 完成（complete） ，浏览器会触发 加载（load） 事件。

注意解析 HTML 网页时永远不会出现 无效语法（Invalid Syntax） 错误，浏览器会修复所有错误内容，然后继续解析。

URL： https://account.cnblogs.com/signin编写思路(入门级别)1、打开谷歌浏览器2、打开博客园登录网页地址3、在用户名输入框内输入用户名4、在密码输入框内输入密码5、点击登录6、检测是否跳转到了登录成功的页面脚本如下图:4feb5d799ae52eea8c1b063cc8c60f85.png现在我们来分解下输入用户名这个动作1、首先找到用户名输入框2、在输入框中输入用户名【找到用户名输入框】实现此步骤的前提就是需要掌握控件的定位。具体在脚本中实现也就是图中的第11行：('//*[@autocomplete="username"]')WEB控件定位所做的事情，就是通过特定的方式找到我们需要 *** 作的页面控件那么如何才能学会这个控件定位呢？第一步就是简单了解下前端的语言。和我一起往下看即可轻松学会。二、WEB网页文本—HTML5要想掌握WEB自动化测试的控件定位，我们首选要了解控件是什么。控件就是浏览器展示的前端语言生成对象。web前端的基础语言就是HTML5依旧是老套路，拿博客园举例：5faa8b60ca05f50f4c0d6430574214fd.png用户打开浏览器，看到的用户名输入框、密码输入框、登陆按钮、立即注册等等所有，都是浏览器展示的HTML5语言的对象。我们按下F12键即可打开浏览器的调试模式，来查看网页的HTML5源代码。如下图：按下F12后右边页面中Elements选项对应的就是网页的html5代码第一次接触肯定觉得非常晦涩难懂、云里雾里。但是相信我，万事开头难！你在看我自动化测试思维的文章以前不也是觉得自动化测试非常高大上吗?不了解什么是自动化测试思维？戳下方5分钟即可学会☟☟☟【自动化测试入门】自动化测试思维00a821b679ab09e913981cf6a655f861.pngHTML5一个控件的写法一般是2个尖括号成对出现。一、第一个尖括号的第一个单次为控件类型，之后是控件属性。二、第二个尖括号表示此控件的尾部。三、2个尖括号中间为控件在前端显示的文字部分。举例说明的话。控件类型是狗的类型(中华田园犬、哈巴狗、牧羊犬等)，控件属性就是这条狗的名字、性别、体重、毛发颜色等。2个尖括号中间的文字，就是你想在此页面上展示的这个狗的'名字'。还是拿博客园的登陆界面举例来说：点击'小箭头'定位控件，或者在控件处右键选中'检查元素'，即可定位到指定的控件7b1de1397c71dcde07d8d9da72e61ab5.png 控件的源码为：<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">input就是控件类型input以外的就都是控件属性 这个输入框的控件属性有：_ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username"id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"三、基于控件的唯一控件属性定位了解了什么是控件，现在我们在上手控件的定位。selenium有八种定位控件的方式，有6种都是基于HTML5原生控件的单一控件属性来定位的。id定位：find_element_by_id()name定位：find_element_by_name()class定位：find_element_by_class_name()tag定位：find_element_by_tag_name()link定位：find_element_by_link_text()partial_link定位：find_element_by_partial_link_text()以下两种为特定的2种控件定位方法，下一篇文章再做详解。 xpath定位：find_element_by_xpath() CSS定位：find_element_by_css_selector()下面我将举例来讲解这6种基于单一控件属性的定位方法。还是拿博客园的登陆界面举例来说：833005656b1e6d0fa4a7e2cc58d875a5.png登陆用户名的输入框的HTML5源码为：<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">这个输入框的控件属性有：_ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username"id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false"对应的定位方法：id属性来定位此控件写法为：find_element_by_id(mat-input-0)name属性来定位此控件此控件前端开发没有定义name属性，则无法使用此定位方法tag属性来定位此控件(控件的类型)写法为：find_element_by_tag_name('input')class属性来定位此控件写法为：find_element_by_class_name(mat-input-0)另外两种定位是针对link属性的控件，也就是链接控件。如下图：依旧是老老路。使用博客园登陆页举例：【立即注册】就是页面中的一个link控件，其作用就是跳转到注册页面。fe0c7b4e9f770591aeaa13a7a9e5ec43.png_ngcontent-arq-c141="" href="/signup?returnUrl=https:%2F%2Fwww.cnblogs.com%2F">立即注册他的控件属性有link定位(通过link控件的文本值)find_element_by_link_text('立即注册')但是部分页面会存在，link的文本值非常长，所以就发明了partial_link定位。如下图中的百度文库的某一页面：5ddb0ca6201cd203245824c06c9e7932.png link的文本值为：全国2018年10月04741计算机网络原理真题以及答案解析定位的脚本就可以写成：(只取文本的某一段值即可)find_element_by_link_text('04741计算机网络')但是这样的定位方式存在一个致命且常见的问题：随着前端的技术不断的发展，页面的复杂度越来越高。一个页面的控件越来越多(tag不唯一)，id、name、class_name可能有很多重名或者完全是动态的一串字母(id、name、class_name、link_name可能都不唯一)，我们基于唯一控件属性定位的在特别复杂的项目上可能完全无法完成UI自动化测试的定位工作。

DOM文档通常加载的步骤：

1.解析HTML结构。

2.加载外部脚本和样式表文件

3.解析并执行脚本代码。

4.DOM树构建完成。

//DOMContentLoaded

5.加载图片等外部资源。

6.页面加载完毕。

//load顺序是这样，但很多时候几个步骤是同时发生的。

  在这里梳理一下完整流程下的各种细节：

  由于浏览器采用至上而下的方式解析，所以会先解析html，直到遇到外部样式和外部脚本。这时会阻塞浏览器的

解析，外部样式和外部脚本（在没有async、defer属性下）会并行加载，但是外部样式会阻塞外部脚本的执行。

  即：html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析

  情况一：如果是动态脚本（即内联脚本）则不受样式影响，在解析到它时会执行。

  情况二：外部样式后续外部脚本含有async属性（IE下为defer），外部样式不会阻塞该脚本的加载与执行

（defer 会按照顺序在 DOMContentLoaded 前按照页面出现顺序依次执行，async 则是下载完立即执行）

  在外部样式执行完毕后，css附着于DOM，创建了一个渲染树（渲染树是一些被渲染对象的集）。每个渲染对象都

包含了与之对应的计算过样式的DOM对象，对于每个渲染元素来说，位置都经过计算，所以这里被叫做“布局”。然

后将“布局”显示在浏览器窗口，称之为“绘制”。

  接着脚本的执行完毕后，DOM树构建完成。这时，可以触发DOMContentLoaded事件。

  DOMContentLoaded事件的触发条件是：在所有的DOM全部加载完毕并且JS加载执行后触发。

 情况一：如果脚本是动态加载，则不会影响DOMContentLoaded时间的触发

 浏览器会等css加载完成后再加载图片，因为不确定图片的样式会如何。 

  要点一：CSS样式表会阻塞图片的加载，如果想让图片尽快加载，就不要给图片使用样式，比如宽高采用标签属性即可。

  要点二：脚本不会阻塞图片的加载

  最后页面加载完成，页面load

---