浏览器的HTMl解析器

html解析器

1 .将html标记解析成解析树
2 .html,xml的区别是,对于解析来说,对html的处理更加宽容,他允许你省略某些隐式添加的标记,有时还能省略一些起始或者结束标记等。
3 .包容错误,简化开发。但是他很难编写正式的语法
4 .总结:html无法很容易的通过常规解析器解析,因为他的语法是与上下文有关的语法,无法通过xml解析器来解析
5 .html解析过程的输入是一串代码,这些代码通过标记化阶段,然后是树构建阶段,输出一个document对象
6 .通常情况下,标记化处理的数据来自网络,但是也可以来自用户代理中运行的脚本,比如document.writeAPI
7 .对于标记化和树构造阶段,只有一组状态,但是树构建阶段是可重入的,这意味着当树构建阶段处理一个标记的时候,标记生成器可能被恢复,从而导致进一步的标记被发出并且在第一个令牌的处理完成之前处理。
8 .为了处理这些情况,解析器局域脚本嵌套级别和解析器暂停标志。

HTML DTD

1 .html的定义采用了dtd格式,此格式可用于定义sgml族的语言,包括所有允许使用的元素及属性和层次结构的定义
2 .dtd存在一些变体,严格模式完全遵守html规范,而其他模式可支持以前的浏览器所使用的标记,这样做的目的是确保向下兼容一些早期的版本内容
3 .doctype:文档类型声明。位于根元素html起始标签之前,因为浏览器必须在解析html之前就知道当前文档的类型,已决定使用的渲染模式,不同的渲染模式会影响到浏览器对于css代码甚至js脚本的解析,尤其是ie浏览器中。
4 .如果html文档没有doctype时,浏览器返回backCompat:标准兼容模式未开启
5 .主要是微软的ie6为了对之前的兼容,区分那些css1.0的属性。差不多是对一些css属性的区分不同
6 .document.compatMode返回当前浏览器选择的渲染模式

浏览器的工作模式

1 .目前来看,各大浏览器主要包括了三种模式,在html5草案中,更加明确:no-quirks mode,limite-quirks mode,quirks mode.
2 .不同浏览器的不同的工作模式不仅对渲染有影响,对代码的解析以及脚本的行为也有同样的影响。
3 .不使用doctype一定会使html文档处于混杂模式,然而使用doctype也可能会导致这个原因:使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的doctype,2:在doc之前出现了其他的内容,比如注释,甚至是html标签
4 .!DOCTYPE html>这个是最标准的写法
5 .doctype之前绝对不能出现内容

doctype细节

1 .建议在以后都直接用“”,用的话就会开启浏览器的标准兼容模式,在标准兼容模式下,不能保证与其它版本(IE6之前的,直接忽略吧),的 Internet Explorer 保持兼容,文档的渲染行为也许与将来的 Internet Explorer 不同,但也请大家放心地使用吧

浏览器的dom(文本对象模型)结构

1 .解析器的输出“解析树”是由dom元素和属性节点构成的树结构。现代浏览器大都基于xml中的dom来建立,而且dom规范提供了对ECMAScript的绑定,可以方便的实现js。dom是文档对象模型的缩写。他是HTML文档的对象表示,也是外部内容与HTML元素之间的接口
2 .解析树的根节点是“document”对象
3 .dom与标记之间几乎是一一对应的关系
4 .树包含DOM节点,指的是树是由某个实现了DOM
5 .通过dom api你可以遍历,修改文档
6 .dom在逻辑上是一种树状结构,可以通过任何一种数据结构予以实现

解析开始

1 .html无法用常规的自上而下或者是自下而上的解析器去解析

1 .语言的宽容本质,浏览器对一些常见的无效的html用法采取包容态度
2 .解析过程需要不断的反复。一般的内容在解析过程中通常不会改变,但是在html中间,脚本标记如果包含document.write,就会添加额外的标记,这样解析的过程实际上就更改了输入内容
3 .https://html.spec.whatwg.org/multipage/parsing.html官方文档

标记化

1 .词法分析过程,将输入内容解析成多个标记
2 .包括起始标记,结束标记,属性名称,属性值
3 .标记生成器识别标记,传递给树构造器,然后接受下一个字符以识别下一个标记,如此反复直到输入的结束。标记化算法的输出结果是html标记


  
    Hello world
  

1 .初始状态时数据状态。遇到字符<时,状态更改为“标记打开状态”.接收一个a-z的字符会创建“起始标记”,状态发生变化->“标记名称状态”,这个状态一直保持到接收到">"字符。此期间接收到的每个字符都会添加到新的标记名称上。这里我们首先创建的是html标记
2 .遇到>之后,会发送当前的标记,状态返回“数据状态”.类似的body标记也会进行同样的处理。目前html,body标记均已发出,现在重新返回“数据状态”,接收到hello world中的H字符时,将创建并发送字符标记,直到接收到另一个标记<,中的<.我们将hello world中的每个字符否发送一个字符标记。
3 .现在我们回到“标记打开状态”。接收下一个输入字符/的时候,会创建end tag token并改为“标记名称状态”,我们会再次保持这个状态,直到接收到>,然后发送新的标记,回到数据状态,也会进行同样的处理。

HTML解析里的容错机制

1 .不同的浏览器的错误处理机制相当的一致,很多网站都普遍存在一些已知的无效的html结构,每一种浏览器都会尝试通过和其他浏览器一样的方式来修复这些无效结构
2 .比如以下错误

1 .inline元素中添加block元素,可以关闭所有inline元素,直到出现下一个比较高级的block元素
2 .使用
标签 3 .离散表格的情况 4 .嵌套的表单元素:一个表单里面有另一个表单,那么第二个直接被忽略 5 .过于复杂的标记层级结构,比如一个网站嵌套了1000多个标记,全部都来自一堆标记,我们只允许最多20多层同类型的嵌套,其余全部忽略 6 .放错位置的html或者body结束标记:代码注释明确说出,支持格式非常糟糕的html代码,我们从不关闭body标记,因为一些网页会在实际文档结束之前就关闭,所以我们通过调用end()来执行关闭操作 7 .官方定义的错误https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model

HTML字符编码解析是如何影响浏览器性能的

1 .html文档是做为滴啊有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以随文档发送的http响应头信息中指定,也可以在文档的html标签中指定,浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符
2 .大多数浏览器在执行任何js代码或者绘制页面之前都要缓冲一定的数量的字节流,缓冲的同时他们也要查找相关的字符编码设定
3 .各个浏览器默认的编码也不同,如果在已经缓冲了足够的字节流,开始渲染页面之后才发现指定的编码设定与其默认值不同,都会导致重新解析文档并且重绘页面。如果编码的变化影响到外部资源,浏览器甚至会重新对资源进行请求。
4 .为了避免这些延迟,对任何超过1k的html文档,我们都要尽早指定字符编码
5 .通过http头信息或者meta标签
6 .如果可能的话,为你的web服务器做指定字符编码的http头信息配置,这样可以有最短的延迟时间
7 .把meta标签放在head区域的最前面
8 .始终指定文档类型:如果没有字符编码的话,浏览器就会通过很复杂的算法去嗅探文档的类型,这个过程会有额外的延迟,甚至还会带来安全漏洞
9 .具体的文档https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model。就是每一个该怎么办,相当于产品的开发文档
10 .其实这个还仅仅是了解。官方文档简直无聊啊,除非开发浏览器用到

你可能感兴趣的:(浏览器的HTMl解析器)