web前端入门到实战：CSS 与 JS 是这样阻塞 DOM 解析和渲染的

最新推荐文章于 2024-06-18 16:02:08 发布

魔方编程

最新推荐文章于 2024-06-18 16:02:08 发布

阅读量145

点赞数

文章标签： css JavaScript web前端前端前端就业

本文链接：https://blog.csdn.net/wewfdf/article/details/99955936

版权

本文探讨了CSS和JS如何影响DOM解析和渲染。CSS不会阻塞DOM解析，但会阻塞页面渲染，而JS则会阻塞DOM解析。浏览器在遇到JS时会暂停DOM解析，等待CSS下载完毕以确保渲染质量。了解这些原理有助于优化前端性能。

摘要由CSDN通过智能技术生成

估计大家都听过，尽量将 CSS 放头部，JS 放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（bu）面（lao），小结一下最近玩出来的成果。

友情提示，本文也是小白向为主，如果直接想看结论可以拉到最下面看的~

node 端唯一需要解释一下的是这个函数：

function sleep(time) {  return new Promise(function(res) {    setTimeout(() => {      res()    }, time);  })}

嗯！其实就延时啦。如果 CSS 或者 JS 文件名有 sleep3000 之类的前缀时，意思就是延迟 3000 毫秒才会返回这文件。

下文使用的 HTML 文件是长这样的：

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            div {                width: 100px;                height: 100px;                background: lightgreen;            }        </style>