2023年6月20日发(作者：)

HTML中script标签⼀、script标签中的属性：在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标签中的内容。123

请开启浏览器⽀持javascript

三、⽂档模式IE5.5引⼊了⽂档模式的概念，该模式可以通过html的doctype进⾏切换。最初的⽂档模式只有：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让IE的⾏为与（包含⾮标准特性的）IE5相同，⽽标准模式则让IE的⾏为更接近标准⾏为。这两种模式主要影响css内容的呈现，但在某些情况下也会影响到javascript执⾏。随着IE⽂档模式的引⼊，其他浏览器⼚商也纷纷效仿。之后IE⼜提出了准标准模式（almost standards mode）。这种⽂档模式很多⾏为都符合标准模式，除了图⽚的间距的时候。在⽂档开始处如果没有发现⽂档类型声明，则所有浏览器都会默认开启混杂模式。开启混杂模式之后，不同的浏览器在这种模式下⾏为差异⾮常⼤，因此不建议开启该模式标准模式：准标准模式：四、浏览器渲染html的过程 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,renderTreeCSSOM : 样式表解析完毕后，系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括：ID哈希表、类名称哈希表、标记名哈希表等，还有⼀种通⽤哈希表，适合不属于上述类别的规则。如果选择器是ID，规则就会添加到ID表中；如果选择器是类，规则就会添加到类表中。4.2、cssom和dom树怎么匹配结合成renderTree （以dom节点匹配cssom） 从本渲染结点开始，判断此结点是否与选择器链表的当前选择器相匹配。如果匹配，判断此选择器与下⼀个选择器的关系：如果为NONE，表⽰本选择器是选择器链的最后⼀个，返回成功；如果关系为AND (⽐如：#)，选择下⼀个选择器与本渲染结点继续⽐较；如果关系为CHILD，表⽰本选择器是下⼀个选择器的⼦结点，返回下⼀个选择器与下⼀个渲染结点的匹配结果；否则，关系为DESCENDANT，选择器和渲染结点各指向下⼀个结点，然后将渲染结点继续回溯，直到第⼀个满⾜回溯后的选择器的结点，此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。 4.3、回流与重绘当render tree中的⼀部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建。这就称为回流。每个页⾯⾄少需要⼀次回流，就是在页⾯第⼀次加载的时候当render tree中的⼀些元素需要更新属性，⽽这些属性只是影响元素的外观，风格，⽽不会影响布局的，⽐如background-color。则就叫称为重绘。4.4、哪些情况会发⽣重绘，回流--不同的条件下发⽣重排的范围及程度会不同 ：（1）.页⾯初始渲染（2）.改变字体，改变元素尺⼨（宽、⾼、内外边距、边框，改变元素位置等 各种情况： 设置 style 属性的值

激活 CSS 伪类，⽐如 :hover 操作 class 属性 （注意：如果修改属性不影响布局则不会发⽣重排）（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)。浏览器不会马上操作它们，⽽是会先缓存在队列中，有⼀定时间顺序去执⾏这些操作，但是在这过程中我们需要去获取在该队列中的属性时，浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。所以，在多次使⽤这些值时应进⾏缓存。

2023年6月20日发(作者：)

HTML中script标签⼀、script标签中的属性：在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标签中的内容。123

请开启浏览器⽀持javascript

三、⽂档模式IE5.5引⼊了⽂档模式的概念，该模式可以通过html的doctype进⾏切换。最初的⽂档模式只有：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让IE的⾏为与（包含⾮标准特性的）IE5相同，⽽标准模式则让IE的⾏为更接近标准⾏为。这两种模式主要影响css内容的呈现，但在某些情况下也会影响到javascript执⾏。随着IE⽂档模式的引⼊，其他浏览器⼚商也纷纷效仿。之后IE⼜提出了准标准模式（almost standards mode）。这种⽂档模式很多⾏为都符合标准模式，除了图⽚的间距的时候。在⽂档开始处如果没有发现⽂档类型声明，则所有浏览器都会默认开启混杂模式。开启混杂模式之后，不同的浏览器在这种模式下⾏为差异⾮常⼤，因此不建议开启该模式标准模式：准标准模式：四、浏览器渲染html的过程 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,renderTreeCSSOM : 样式表解析完毕后，系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括：ID哈希表、类名称哈希表、标记名哈希表等，还有⼀种通⽤哈希表，适合不属于上述类别的规则。如果选择器是ID，规则就会添加到ID表中；如果选择器是类，规则就会添加到类表中。4.2、cssom和dom树怎么匹配结合成renderTree （以dom节点匹配cssom） 从本渲染结点开始，判断此结点是否与选择器链表的当前选择器相匹配。如果匹配，判断此选择器与下⼀个选择器的关系：如果为NONE，表⽰本选择器是选择器链的最后⼀个，返回成功；如果关系为AND (⽐如：#)，选择下⼀个选择器与本渲染结点继续⽐较；如果关系为CHILD，表⽰本选择器是下⼀个选择器的⼦结点，返回下⼀个选择器与下⼀个渲染结点的匹配结果；否则，关系为DESCENDANT，选择器和渲染结点各指向下⼀个结点，然后将渲染结点继续回溯，直到第⼀个满⾜回溯后的选择器的结点，此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。 4.3、回流与重绘当render tree中的⼀部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建。这就称为回流。每个页⾯⾄少需要⼀次回流，就是在页⾯第⼀次加载的时候当render tree中的⼀些元素需要更新属性，⽽这些属性只是影响元素的外观，风格，⽽不会影响布局的，⽐如background-color。则就叫称为重绘。4.4、哪些情况会发⽣重绘，回流--不同的条件下发⽣重排的范围及程度会不同 ：（1）.页⾯初始渲染（2）.改变字体，改变元素尺⼨（宽、⾼、内外边距、边框，改变元素位置等 各种情况： 设置 style 属性的值

激活 CSS 伪类，⽐如 :hover 操作 class 属性 （注意：如果修改属性不影响布局则不会发⽣重排）（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)。浏览器不会马上操作它们，⽽是会先缓存在队列中，有⼀定时间顺序去执⾏这些操作，但是在这过程中我们需要去获取在该队列中的属性时，浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。所以，在多次使⽤这些值时应进⾏缓存。