页面加载渲染的优化（一）

1.HTML本身是通过网址请求回来的，由字节流转换成字符流，浏览器进行词法分析，分析成词法的token，从上到下，不同 >的标签类型会解析成不同的对象，然后加载到DOM树上。
2.HTML中会通过link引入其他资源，这时会并发的请求静态资源，请求回来之后会和CSS资源进行结合，生成渲染树。
3.只有DOM树和CSS树都生成之后才会进行渲染，布局，绘制。
特点
1.顺序执行，并发加载（设3-4个CDN域名去最大化并发加载）
2.是否阻塞
3.依赖关系
4.引入方式

场景：
1.页面出来了，样式没有出来，闪退等，是因为没有遵循好依赖关系，如果CSS放在header中去引入，那么页面就会等待CSS加载完毕生成CSS树之后再渲染，就不会出现闪动。
2.JS的执行顺序，通过JS 的async标签进行异步加载，梳理好依赖关系。
3.方式：JS通过script会有阻塞问题，可以通过defer,async标签更好。
3.是否动态引入？判断是不是在需要的时候再去加载。SPA单页应用应该在路由到某个页面的时候再去加载那个路由的内容，要异步动态的去引入内容。

顺序执行，并发加载

1.词法分析时，token的获取是从下到下顺序执行的
2.并发请求外部资源
3.并发上限：某个域名的限制

CSS阻塞

1.CSS在head中会阻塞页面的渲染，页面需要link标签里面的样式内容才能去渲染，但为了避免闪动，还是要这样引入。
2.CSS阻塞JS的执行，JS去操作DOM，这时可能会有样式的修改，JS要依赖CSS之前加载完的样式效果。
3.CSS不阻塞外部脚本的加载，原因是webkit有HTML-preloader-scanner这样一个类，会预先扫描词法，通过预先加载器来请求后期加载所需要的资源。

JS阻塞

1.没有通过defer和async的，直接通过script标签的JS 会阻塞页面的渲染。
2.JS不会阻塞资源的加载。因为webkit有预先扫描器，有引用其他资源时，会并发去请求所需的资源，进行预先加载。
3.JS顺序执行，阻塞后续JS逻辑的执行。JS有可能会调用document.write的方式，去修改DOM结构，那么由于动态修改了文档，JS会阻塞后面节点的创建。文档结构的分析和渲染会等到JS代码执行完成之后再去调用html.parse进行词法分析。
4.JS是顺序执行的，不管返回的情况如何，JS都会保存引入的依赖关系进行单线程加载。