CSS/JS对DOM渲染的影响 - Harttle Land

http://harttle.land/2016/11/26/static-dom-render-blocking.html

May 02 '18 18:05 harttle

讲的很清楚，但是有一个地方不太理解，就是最后那个例子中的“脚本执行依赖于DOM解析”，是什么意思呢？

By merrier 2017-07-25T03:54:29Z

May 02 '18 18:05 harttle

因为 World 还未解析完成（被上一个脚本卡住了），后面的脚本就不会执行（虽然当前HTML可能已经下载完成了）。

By Yang Jun 2017-07-25T04:23:47Z

May 02 '18 18:05 harttle

明白了，这个网站是你自己纯手写的吗？还是用wordpress等模板搭的，因为我的个人博客是拿wordpress搭的，所以很好奇

By merrier 2017-07-25T04:33:33Z

May 02 '18 18:05 harttle

是在这个框架上写的：jekyllrb.com

By Yang Jun 2017-07-25T04:59:47Z

May 02 '18 18:05 harttle

css阻塞DOM渲染案例：第一次输出只有一个<h2>，说明DOM解析会延迟脚本的执行。

这里不应该是说js会阻塞dom的解析吗

By huahua 2017-09-25T02:01:34Z

May 02 '18 18:05 harttle

是的，我马上改下

By Yang Jun 2018-02-08T10:17:03Z

May 02 '18 18:05 harttle

JS前的DOM可以正常解析（Parsing）和渲染（Rendering）如果是内嵌脚本一个长时间的循环，他之前的dom应该也不会被渲染吧

Jul 02 '18 06:07 algoinfo

如果按照你的结论，javascript只会阻塞后续的html解析，那为什么我下面的这段代码中的行内js为什么会阻塞页面的解析呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #ababab;
        }
        img {
            width: 100%;
        }
    </style>
</head>

<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> -->
    <!-- <script src="./test2.js"></script> -->
<body>
    <div>希望能够在解析js之前渲染</div>
    <script>
        const num = 100000 * 50000;
        for (let i = 0; i < num ;i++) {
        }
    </script>
</body>
    
</html>

Dec 23 '19 06:12 SaebaRyoo