1 rel="preload"，preload不会阻塞onload事件（好像是这样，没试过）
2 js放在head中会立即执行，阻塞后续的资源下载与执行。因为js有可能会修改dom，不阻塞的话dom的操作顺序不可控。在DOM结构生成之前就调用DOM，JavaScript会报错
3 html需要等head中所有的js和css加载完成后才会开始绘制
4 js放在body的最后面，可以避免资源阻塞，使静态的html页面迅速显示
5 css需要分块，除了首页的css需要动态加载，可以减少首次进入时的白屏时间
6 defer是让外链的js和Dom并行加载，对不是外部脚本或动态生成的js不起作用
7 有async的，会告诉浏览器，js不会修改dom和样式，与其他资源没有依赖关系，所以下载完了立刻执行，async属性的作用是，使用另一个进程下载脚本。 一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本
8 如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
9 async 和 deffer 都有onload回调
10 图片、css可以并行下载 （HTTP？开几个下载？）
11 js阻塞页面，后续有图片的话，图片会先下载，但是不会先展示
12 JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码
总结：
没必要把标签放底部了，直接放头部早点加载，如果网速不快，这样最能减少网速影响。都加上defer会不阻塞并且还按原来的顺序执行。如果确定js不依赖顺序，且不操作dom，就可以发async标签，谁先下好谁就执行。
HTML页面加载和解析流程
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2. 浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
4. 浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了一个包含一行Javascript代码的
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。
9. 终于等到了的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。
11. 浏览器召集了在座的各位
- 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
