浏览器渲染 #67

ynchuan · 2019-08-26T02:33:14Z

Chrome测试结论

dom+cssom，形成renderTree，布局（回流），绘制（重绘）
css的加载不阻塞dom解析，只是阻塞render tree生成，进而影响后续首屏渲染
js执行会阻塞dom解析，如果js前面有外链css，js(因为可能需要获取样式尺寸)由于会依赖css加载，所以此时css加载会阻塞dom解析，其实是js阻塞dom解析
同步解析到内联或外联非异步<script>标签前，网页会触发页面渲染，因为js可能需要一些样式尺寸信息，所以也是js阻塞dom解析，js依赖其之前css加载完成的原因
最佳实践是link放head,占用白屏时间，防止无样式内容闪烁(FOUC); js放页面底部，不占用首屏渲染时间

参考
浏览器工作原理分析与首屏加载
 css加载会造成阻塞吗？
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

ynchuan · 2019-08-26T02:34:14Z

<html>

<head>
    <title>Web page parsing</title>
    <script>
    var t1 = Date.now();

    </script>
</head>

<body>
    <div>
        <h1>Web page parsing</h1>
    </div>
    <script>
    var t2 = Date.now();
    console.log('first page', t2 - t1);

    </script>
    <link rel="stylesheet" href="http://wxx.v.baidu.com:8080/a.css">
    <script src='a.js'></script>
    <script>
    var t3 = Date.now();
    console.log('load/exec css/js', t3 - t2);

    </script>
    <div>
        <p>This is an example Web page.</p>
    </div>
</body>

</html>

ynchuan · 2019-08-26T02:57:24Z

网页性能&体验优化策略

压缩合并资源，减少请求
使用缓存 -强缓存和策略缓存
预加载&懒加载（内容少预加载，内容多懒加载
节流去抖
CDN
DNS预解析

ynchuan · 2019-09-01T15:11:10Z

window.performance.mark(startTag);
window.performance.mark(endTag);
window.performance.measure(durationTag,startTag,endTag)
window.performance.getEntries();
window.performance.getEntriesByName('mark');
window.performance.getEntriesByName('measure');
window.performance.getEntriesByName('resource');

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

浏览器渲染 #67

浏览器渲染 #67

ynchuan commented Aug 26, 2019 •

edited

Loading

ynchuan commented Aug 26, 2019

ynchuan commented Aug 26, 2019

ynchuan commented Sep 1, 2019

浏览器渲染 #67

浏览器渲染 #67

Comments

ynchuan commented Aug 26, 2019 • edited Loading

ynchuan commented Aug 26, 2019

ynchuan commented Aug 26, 2019

ynchuan commented Sep 1, 2019

ynchuan commented Aug 26, 2019 •

edited

Loading