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

HTML⽂档解析⼀个⽹页三⼤组成部分：html：⽹页的内容css：增加⽹页样式js：增加业务逻辑问题：在我们刚进⾏学习前端⽹页的时候：⽼师说：我们需要将css放在head的底部，⽽js需要放在html的底部？可是这个原理是什么勒？原因是什么勒？要想知道css和js引⼊⽅式和位置对页⾯的影响，⾸先要知道浏览器是如何根据HTML、CSS和JS来渲染页⾯的⼀、对于html的处理我们先来模拟⼀遍请求页⾯的过程：⾸先当我们输⼊⼀个页⾯地址，浏览器会发送请求给服务器，服务器以字节形式返回⼀个HTML⽂档。浏览器⾸先会解析字节得到字符，之后根据W3C标准对这些字符进⾏识别，得到Tokens，有了Token就可以进⾏词法分析得到节点了；这些节点带有属性，和规则信息；最后将这些节点之间的关系进⾏连接，就会得到⼀个树形结构，这个树形结构就是我们平时所说的DOM全称：Documenet ObjectModel，DOM表⽰了页⾯的结构，如下图所⽰；⼆、对于CSS的处理为了渲染页⾯的样式：浏览器还需要知道页⾯内元素的样式信息；因此需要解析css样式：它会对css进⾏解析形成结构化数据，过程与解析html很类似当浏览器接收到字节码形式的css样式时，将他转化为字符，之后根据css规则转换为tokens，nodes，最终构建成⼀个树形结构------>cssom；cssom的树形结构与DOM是对应的，由于样式有继承关系，因此他会循环计算每个节点的样式:由于下图：此外处理开发者,CSS中指定的样式信息，cssom还会包含浏览器默认的样式；三、HTML和CSS进⾏整合————>Render Tree现在我们有了DOM和CSSOM，他们在当前阶段是两个独⽴的数据结构，⼀个表⽰页⾯内容，⼀个表⽰样式。现在进⾏合并————>Render Tree只会包含需要的节点不需要的节点进⾏省略。Render Tree表⽰了每个节点的样式信息。四、Layout绘制因为页⾯元素节点在屏幕中的具体⼤⼩和位置，还跟屏幕的⼤⼩有关；浏览器接下来会进⾏Layout步骤，根据Render Tree计算得到每个元素节点在屏幕中的尺⼨，计算完成后就可以将像素绘制在屏幕上了以上四步称为：关键渲染路径知道了步骤，进⾏分析：问题⼀、在构建DOM过程中如果遇到了CSS，浏览器会在该CSS解析⽣成CSSOM后，在进⾏渲染，确保遇到的css都解析完成后，浏览器才会进⾏渲染，如果不等css解析完就进⾏渲染，会发⽣什么情况勒？如果不等css解析完，那么页⾯的⾸屏就会渲染出⼀个，只有浏览器默认样式的结果，之后css解析完毕，页⾯再次渲染出⼀个带有样式的完整结果。虽然有可能发⽣的很快，但不过页⾯会进⾏闪烁，会影响体验。因此css是⼀个会阻塞页⾯渲染的资源，会加载完css之后⽣成cssom，然后和DOM合成Render Tree进⾏⼀次渲染，内容有了样式也有了。现在就看js逻辑了；JS：JS可以直接操作DOM，也可以直接添加属性和样式，因此它对于页⾯渲染过程有着⾮常重要的限制和影响；⾸先浏览器在解析HTML时，如果遇到JS，因为JS中可能会对DOM进⾏操作，因此这段JS需要在⽂档的当前位置⽴刻开始执⾏，在JS执⾏完毕后再加载剩下的HTML内容；也就是JS会阻塞DOM的构建使页⾯初次渲染变慢；其次JS在执⾏过程中，除了操作DOM还操作样式内容，⽽样式内容依赖于CSSOM，如果在需要执⾏JS的时候，CSSOM还没有⽣成怎么办，此时浏览器会暂时JS的执⾏，在CSSOM⽣成以后在继续执⾏JS逻辑；总结⼀下：css会阻塞页⾯渲染，当浏览器遇到css之后会保证css加载完成cssom后，才进⾏页⾯的渲染，当浏览器遇到JS内容时，会停⽌继续构建DOM，直到JS执⾏完毕，JS会查询和修改DOM，CSSOM；因此浏览器会停⽌执⾏JS，直到CSSOM⽣成完毕。css和js都会阻塞html，⽽css⼜会阻塞js执⾏；有了上⾯的知识储备：开始解决开始的问题为什么css在head的最下⾯？⾸先我们不希望⽤户看到没有样式的页⾯，如果css放在⼀些页⾯元素的后⾯，这些元素会先显⽰出来，样式加载后再重新进⾏渲染带有样式的结果，造成页⾯的闪烁，此外如果css是外链的，我们需要尽早让浏览器开始请求这些css资源。那么为什么JS要放在body底部呢？这是因为JS会阻塞页⾯的渲染，⽽我希望⽤户尽快看到有内容的页⾯，如果JS放在boyd顶部，那么就需要等待 js执⾏完毕之后⾸屏才会出现，增加了⾸屏时间，另⼀个原因我们在js中，会对DOM和cssom进⾏操作，放在body底部可以确保DOM和cssom，都已经⽣成完毕了，否则会出现我们获取⼀个DOM，去发现获取不到的情况，影响js逻辑执⾏；总得来说css放在header以及js放在body底部⽬的：获得更好的⽤户体验的同时，尽量提⾼页⾯的加载性能。除此之外，为了获得更好的性能我们还可以将css内联，⽽将js外链，因为css⾸屏渲染是必须的，希望节省掉请求css资源的时间。⽽js外链则可以减⼩整个HTML⽂档体积。减⼩HTML⽂档下载时长，更快开始解析HTML CSS构建DOM和CSSOM，⽽浏览器进⾏上述操作的时候，也可以并⾏请求JS资源，这样即使请求慢了，页⾯也是有内容的，只是缺少了逻辑交互。当我们在HTML⽂档中引⼊JS资源时，可以添加⼀个async属性，async属性标记了这段js是可以异步进⾏加载的，默认情况下，我们知道js会阻塞页⾯渲染，浏览器会等待js⽂件的请求执⾏，因为JS中可能会对DOM和CSSOM进⾏操作，如果我们确定⼀段js不会对DOM进⾏操作，就可以添加此属性

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

HTML⽂档解析⼀个⽹页三⼤组成部分：html：⽹页的内容css：增加⽹页样式js：增加业务逻辑问题：在我们刚进⾏学习前端⽹页的时候：⽼师说：我们需要将css放在head的底部，⽽js需要放在html的底部？可是这个原理是什么勒？原因是什么勒？要想知道css和js引⼊⽅式和位置对页⾯的影响，⾸先要知道浏览器是如何根据HTML、CSS和JS来渲染页⾯的⼀、对于html的处理我们先来模拟⼀遍请求页⾯的过程：⾸先当我们输⼊⼀个页⾯地址，浏览器会发送请求给服务器，服务器以字节形式返回⼀个HTML⽂档。浏览器⾸先会解析字节得到字符，之后根据W3C标准对这些字符进⾏识别，得到Tokens，有了Token就可以进⾏词法分析得到节点了；这些节点带有属性，和规则信息；最后将这些节点之间的关系进⾏连接，就会得到⼀个树形结构，这个树形结构就是我们平时所说的DOM全称：Documenet ObjectModel，DOM表⽰了页⾯的结构，如下图所⽰；⼆、对于CSS的处理为了渲染页⾯的样式：浏览器还需要知道页⾯内元素的样式信息；因此需要解析css样式：它会对css进⾏解析形成结构化数据，过程与解析html很类似当浏览器接收到字节码形式的css样式时，将他转化为字符，之后根据css规则转换为tokens，nodes，最终构建成⼀个树形结构------>cssom；cssom的树形结构与DOM是对应的，由于样式有继承关系，因此他会循环计算每个节点的样式:由于下图：此外处理开发者,CSS中指定的样式信息，cssom还会包含浏览器默认的样式；三、HTML和CSS进⾏整合————>Render Tree现在我们有了DOM和CSSOM，他们在当前阶段是两个独⽴的数据结构，⼀个表⽰页⾯内容，⼀个表⽰样式。现在进⾏合并————>Render Tree只会包含需要的节点不需要的节点进⾏省略。Render Tree表⽰了每个节点的样式信息。四、Layout绘制因为页⾯元素节点在屏幕中的具体⼤⼩和位置，还跟屏幕的⼤⼩有关；浏览器接下来会进⾏Layout步骤，根据Render Tree计算得到每个元素节点在屏幕中的尺⼨，计算完成后就可以将像素绘制在屏幕上了以上四步称为：关键渲染路径知道了步骤，进⾏分析：问题⼀、在构建DOM过程中如果遇到了CSS，浏览器会在该CSS解析⽣成CSSOM后，在进⾏渲染，确保遇到的css都解析完成后，浏览器才会进⾏渲染，如果不等css解析完就进⾏渲染，会发⽣什么情况勒？如果不等css解析完，那么页⾯的⾸屏就会渲染出⼀个，只有浏览器默认样式的结果，之后css解析完毕，页⾯再次渲染出⼀个带有样式的完整结果。虽然有可能发⽣的很快，但不过页⾯会进⾏闪烁，会影响体验。因此css是⼀个会阻塞页⾯渲染的资源，会加载完css之后⽣成cssom，然后和DOM合成Render Tree进⾏⼀次渲染，内容有了样式也有了。现在就看js逻辑了；JS：JS可以直接操作DOM，也可以直接添加属性和样式，因此它对于页⾯渲染过程有着⾮常重要的限制和影响；⾸先浏览器在解析HTML时，如果遇到JS，因为JS中可能会对DOM进⾏操作，因此这段JS需要在⽂档的当前位置⽴刻开始执⾏，在JS执⾏完毕后再加载剩下的HTML内容；也就是JS会阻塞DOM的构建使页⾯初次渲染变慢；其次JS在执⾏过程中，除了操作DOM还操作样式内容，⽽样式内容依赖于CSSOM，如果在需要执⾏JS的时候，CSSOM还没有⽣成怎么办，此时浏览器会暂时JS的执⾏，在CSSOM⽣成以后在继续执⾏JS逻辑；总结⼀下：css会阻塞页⾯渲染，当浏览器遇到css之后会保证css加载完成cssom后，才进⾏页⾯的渲染，当浏览器遇到JS内容时，会停⽌继续构建DOM，直到JS执⾏完毕，JS会查询和修改DOM，CSSOM；因此浏览器会停⽌执⾏JS，直到CSSOM⽣成完毕。css和js都会阻塞html，⽽css⼜会阻塞js执⾏；有了上⾯的知识储备：开始解决开始的问题为什么css在head的最下⾯？⾸先我们不希望⽤户看到没有样式的页⾯，如果css放在⼀些页⾯元素的后⾯，这些元素会先显⽰出来，样式加载后再重新进⾏渲染带有样式的结果，造成页⾯的闪烁，此外如果css是外链的，我们需要尽早让浏览器开始请求这些css资源。那么为什么JS要放在body底部呢？这是因为JS会阻塞页⾯的渲染，⽽我希望⽤户尽快看到有内容的页⾯，如果JS放在boyd顶部，那么就需要等待 js执⾏完毕之后⾸屏才会出现，增加了⾸屏时间，另⼀个原因我们在js中，会对DOM和cssom进⾏操作，放在body底部可以确保DOM和cssom，都已经⽣成完毕了，否则会出现我们获取⼀个DOM，去发现获取不到的情况，影响js逻辑执⾏；总得来说css放在header以及js放在body底部⽬的：获得更好的⽤户体验的同时，尽量提⾼页⾯的加载性能。除此之外，为了获得更好的性能我们还可以将css内联，⽽将js外链，因为css⾸屏渲染是必须的，希望节省掉请求css资源的时间。⽽js外链则可以减⼩整个HTML⽂档体积。减⼩HTML⽂档下载时长，更快开始解析HTML CSS构建DOM和CSSOM，⽽浏览器进⾏上述操作的时候，也可以并⾏请求JS资源，这样即使请求慢了，页⾯也是有内容的，只是缺少了逻辑交互。当我们在HTML⽂档中引⼊JS资源时，可以添加⼀个async属性，async属性标记了这段js是可以异步进⾏加载的，默认情况下，我们知道js会阻塞页⾯渲染，浏览器会等待js⽂件的请求执⾏，因为JS中可能会对DOM和CSSOM进⾏操作，如果我们确定⼀段js不会对DOM进⾏操作，就可以添加此属性