HTML中script标签

一、script标签中的属性

async：在script标签中添加此属性，浏览器会开启异步下载脚本（执行到当前标签后立即下载），当下载完成后立即执行，但并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。

charset：此属性很少使用，指定src属性中加载的代码属性的字符集（如UTF-8）

defer：在script标签中添加此属性，表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script（但现实上并一定会按照顺序执行，也不一定会在dom加载完成后再执行，因此最好只添加一个defer）；defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

language：目前大多数浏览器已经弃用了这个属性。表示src属性中引入资源的语言类型

src：指定要加载的外部的资源属性

type：指定脚本类型的语言。虽然text/javascript和text/ecmascript都以不在被推荐使用，但仍有部分其他需要，如es6使用babel时text/babel。另外服务器在传送javascript文件时使用content-type类型是application/x-javascript，但type属性将无效。在非IE浏览器中还可以使用content-Type还可以使用application/javascript和application/ecmascript。

注意：外部javascript文件带有.js扩展名。但这个扩展名不是必须的，因为浏览器不会检查包含javascript的文件扩展名。因此，使用JSP、PHP等服务端语言生成javascript语言成为了可能。浏览器端返回文件基于http请求的content-type的类型，因此需要服务器端返回正常的MIME类型。

三、noscript标签

用于不支持javascript的浏览器或者关闭javascript功能的浏览器，展示在noscript标签中的内容。

三、文档模式

IE5.5引入了文档模式的概念，该模式可以通过html的doctype进行切换。最初的文档模式只有：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。这两种模式主要影响css内容的呈现，但在某些情况下也会影响到javascript执行。

随着IE文档模式的引入，其他浏览器厂商也纷纷效仿。之后IE又提出了准标准模式（almost standards mode）。这种文档模式很多行为都符合标准模式，除了图片的间距的时候。

在文档开始处如果没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。开启混杂模式之后，不同的浏览器在这种模式下行为差异非常大，因此不建议开启该模式

标准模式：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

准标准模式：

"http://www.w3.org/TR/html4/loose.dtd">

"http://www.w3.org/TR/html4/frameset.dtd">

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

四、浏览器渲染html的过程

下方内容转载自：https://blog.csdn.net/qq_42269433/article/details/81133772

 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。

 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式.

3. dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。

注意： visibility:hidden隐藏的元素还是会包含到render tree中的，因visibility:hidden 会影响布局(layout)，会占有空间。

4.1、dom树结构,cssom,renderTree

CSSOM  :  样式表解析完毕后，系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括：ID哈希表、类名称哈希表、标记名哈希表等，还有一种通用哈希表，适合不属于上述类别的规则。如果选择器是ID，规则就会添加到ID表中；如果选择器是类，规则就会添加到类表中。

4.2、cssom和dom树怎么匹配结合成renderTree

       （以dom节点匹配cssom）

       从本渲染结点开始，判断此结点是否与选择器链表的当前选择器相匹配。如果匹配，判断此选择器与下一个选择器的关系：如果为NONE，表示本选择器是选择器链的最后一个，返回成功；如果关系为AND (比如：#id.class)，选择下一个选择器与本渲染结点继续比较；如果关系为CHILD，表示本选择器是下一个选择器的子结点，返回下一个选择器与下一个渲染结点的匹配结果；否则，关系为DESCENDANT，选择器和渲染结点各指向下一个结点，然后将渲染结点继续回溯，直到第一个满足回溯后的选择器的结点，此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。
         4.3、回流与重绘

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

4.4、哪些情况会发生重绘，回流

--不同的条件下发生重排的范围及程度会不同 ：

（1）.页面初始渲染

（2）.改变字体，改变元素尺寸（宽、高、内外边距、边框，改变元素位置等

    各种情况：

             设置 style 属性的值 

             激活 CSS 伪类，比如 :hover

             操作 class 属性

            css3的某些属性（https://csstriggers.com/  结合此链接查看哪些属性会触发重排、哪些属性会触发重绘以及哪些属性会触发合成；）

          （注意：如果修改属性不影响布局则不会发生重排）

（3）.改变元素内容（文本或图片等或比如用户在input框中输入文字）

（4）.添加/删除可见DOM元素（注意：如果是删除本身就display:none的元素不会发生重排；visibility:hidden的元素显示或隐藏不影响重排）

（5）.fixed定位的元素,在拖动滚动条的时候会一直回流

（6）. 调整窗口大小（Resizing the window）

（7）.计算 offsetWidth 和 offsetHeight 属性【注释2】

【注释2：flush队列】

浏览器是聪明的，当对以下属性进行操作的时候：

包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

浏览器不会马上操作它们，而是会先缓存在队列中，有一定时间顺序去执行这些操作，但是在这过程中我们需要去获取在该队列中的属性时，浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。

所以，在多次使用这些值时应进行缓存。