2019-09-26第1条：下载JavaScript文件并执行同步代码，会阻塞页面渲染
第2条：defer异步下载JavaScript文件，会在HTML解析完成之后执行，不会阻塞页面渲染
第3条：sync异步下载JavaScript文件，下载完成之后会立即执行，有可能会阻塞页面渲染
第4条：下载CSS文件，可能阻塞页面渲染
第5条：media属性用于区分设备，screen表示用于有屏幕的设备，无法用于打印机、3D眼镜、盲文阅读机等，在题设手机条件下，会加载，与第4条一致，可能阻塞页面渲染
第6条：print用于打印预览模式或打印页面，这里不会加载，不会阻塞页面渲染
第7条：orientation:landscape表示横屏，与题设条件一致，会加载，与第4条一致，可能阻塞页面渲染
第8天：orientation:portrait表示竖屏，这里不会加载，不会阻塞页面渲染
会阻塞页面的有1、3、4、5、7。我这里的问题在于是否加载CSS文件和JavaScript文件时，CSS文件一定会阻塞JavaScript代码的执行，还是说在JavaScript脚本需要使用到CSSOM能力的时候才会有这个前置依赖。展开 2 24
2019-09-27老师，浏览器是不是有一个尽量快速渲染页面的机制呢？比如说，有时候打开一个网页很慢，后面慢慢地显示了样式错乱的页面，这明显是css没有加载构建完成，但是还是看到有页面出来了，只是样式有点乱。老师，能解释一下浏览器在这个过程中的一些优化措施吗？ 6- 2019-10-13script异步的属性是async，不是sync 2
2019-12-03老师我想问下 如果script放在</body> 还有优化的意义么 这样就不会阻塞渲染了么作者回复: 依然会阻塞啊，只不过DOM会提前生成，但是渲染之前还需要等待该JS的执行完成！
2 1
2019-09-26有个疑问，DOM tree 和 render tree 构建是同时进行的还是DOM tree和 cssom都构建完成后才构建render tree呢？看how browser works 有些没看清楚 1
2019-12-10另外styleSheets和cssom是一回事儿吗 感觉有点懵 1- 2019-12-10老师我重读文章发现一个问题 生成styleSheets是在dom解析完成之后进行的吗？还是在解析dom过程中有另外一个线程来生成styleSheets。
2019-12-09“还可以将一些不需要在解析 HTML 阶段使用的 JavaScript 标记上 sync 或者 defer。”，这里应该是async ，我记得async和defer的作用是资源空闲时下载和自动放入body后下载，倒是不知道这两属性运用在不解析html的js上，难道是不操作dom 的js吗？- 2019-12-09“中我们提到过，当渲染进程接收 HTML 文件字节流时，会先开启一个预解析线程，如果遇到 JavaScript 文件或者 CSS 文件，那么预解析线程会提前下载这些数据。”这个预解析不是async 或defer才触发吗？
2019-12-02老师求解答：
<html>
<head>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<div>geekbang com</div>
<script>
while (1) {}
</script>
<div>geekbang com</div>
</body>
</html>
按照文章中所说，dom解析应该一直被while循环阻塞，更生成不了布局树和绘制位图。但是我们还是能看到页面能显示出script标签前的内容呀。展开作者回复: 你确定能显示？
1
2019-11-27老师这里有个疑问，是所有阻塞都是会影响白屏？假如我的页面大部分是用js动态生成的，那么我先解析js操作已用的dom, 不是会比先解析html生成dom后再修改dom省力？
2019-10-16在不考虑与解析线程的存在，CSS 资源的加载会阻塞DOM的构建吗？ 构建CSSOM树会阻塞DOM树的构建吗？- 2019-10-16在渲染流水线中 构建 DOM 树和 构建 CSSOM 树是同时进行的吗？ 还是CSSOM 的构建会阻塞DOM的构建，交替执行的？ （这里前提是 css 的资源下载非常快，在DOM树构建完成之前就下载完成了）
2019-09-27因为cssom构造优先，所以先考虑css加载：没有media配置和配置了screen、landscape，3个css文件会命中，也就是4、5、7。js文件分加载和执行两部分，其中defer和async两种属性配置之后都会与dom树构造无关，也就是与渲染无关，其他的情况都会阻塞渲染，也就是1、3。总结：1、3、4、5、7会阻塞渲染。我查阅了h5规范，没有sync属性显式配置的定义，所以sync是无效属性，和1效果一致。网上有文章称，sync和defer同为异步加载和执行，区别在于，多个defer是顺序执行，多个sync是先加载完成先执行，但这个无从考证。- 2019-09-261 4吧 一样的资源应该只加载一次吧
- 2019-09-26首先说下几个属性的含义：defer：异步下载js文件，等待domcontendloaded事件后解析执行，sync猜应该是async，异步下载js文件，下载完成后立即解析执行，media='screen' 电脑屏幕场景，media='print' 打印场景，orientation:landscope输出设备可见区域高度小于宽度；portrait 剩余场景。
阻塞页面渲染的有1 4 5 8。 2