web性能优化（六）之总结基础（通过页面加载渲染优化）

首先理解页面加载理解

页面加载

通过题目理解

1.这个理解可以参考我的另一篇详细解说第一个问题：https://mp.csdn.net/postedit/88428626

2.onload是将所有的资源文件加载完成后，才开始渲染页面，而DOMContentload不加载img，视频等资源就开始渲染页面，然后通过异步的方式加载这些资源，这样的好处是，图片加载慢，那么就使用DOMContentLoaded(jquery很多使用这种)

思考：1.script标签为什么得写在body后面？

           2.css文件为什么要放在head里面

解答：1.因为顺序加载页面的情况下，如果将js放在前面，就会加载script的情况下，页面还没有被渲染，并且因为js是单线程的，scirpt执行会阻塞页面渲染，执行js需要时间，第二是为什么必须得阻塞的，举个例子js放在两个标签之间，假如js同步和渲染一起，css有样式设置，js针对节点有样式改动，那么就不知道听谁的。

解答：2.如果css在后面的情况下，举个例子div这种内容标签有默认的格式，然后先执行HTML节点内容渲染，然后在执行css改变样式，必须重绘，多次造成性能降低

从页面加载渲染过程来优化：css放在head，js放在body后面，然后实现资源懒加载（加载更多这种），缓存DOM查询（如下）