首页内容的显示时间非常重要.关系到用户是否有耐心等到首页显示出来..

页面加载数据流程:

HTML5 把js脚本提前下载了.js执行还是得等css下载完成.

A: 需要后台数据库的.

加载完静态资源后通过ajax请求去 获取后台数据. 数据回来后渲染内容. 1. html 开头 2. → CSS 文件加载 3. → → HTML 内容加载 4. → → → JS 文件加载 5. → → → → ajax请求 6. → → → → → 渲染内容 1-6 就是首屏时间.

B: 不需数据库的 (博客什么的)

1. html 开头
2. → CSS 文件加载
3. → → HTML 内容加载
4. → → → JS 文件加载 1-4 就是首屏时间

为什么要分的这么细. 因为你需要知道到底是哪一块是性能瓶颈,哪一段还有优化空间.

注意点: js 执行代码是需要时间的!!! CSS 文件的加载执行也是会干扰到js的.

比如说 一个css 加载时间要2秒. 这时候 js 时间要 200毫秒 但是一个css 加载时间只要 100ms 这时候 js 时间只要 50ms.

加载是并行的. 执行是串行的 加载是并行的. 执行是串行的 加载是并行的. 执行是串行的

浏览器 会让 css js 一起加载. 如果一个文件没加载完成 这个文件后面的代码是不会执行的.

这个例子 css 加载明显拖慢了节奏. js 早就加载好了. 如果css 不加载好 js是不会执行的!!!!!! 因为js 执行的基础就是css. js有可能还需要获取css里面的某些值. 必须等到css加载完成才能执行js的啊.

CSS 文件阻塞会影响js代码. 自然也会影响html代码的执行.

网页是先加载CSS的.然后才是HTML  网页是先加载CSS的.然后才是HTML  网页是先加载CSS的.然后才是HTML 

只要你css没加载完成 页面肯定是空白的!!!! 只要你css没加载完成 页面肯定是空白的!!!! 只要你css没加载完成 页面肯定是空白的!!!!

所以CSS 尽量内联.可以用构建工具帮你!!!! 所以CSS 尽量内联.可以用构建工具帮你!!!! 所以CSS 尽量内联.可以用构建工具帮你!!!!

js 文件排列顺序

外联js文件.前一个文件的加载.会阻塞下一个文件的执行. 因为浏览器执行是串行的.一次只能执行一个js 文件, 而且执行顺序是按照排列来的. 所以只能等上一个js加载完成 并 执行完成.才可以执行下一个.

 和首屏渲染有关的js 排最前面.其他js 一律排后面  和首屏渲染有关的js 排最前面.其他js 一律排后面  和首屏渲染有关的js 排最前面.其他js 一律排后面

 最保险: 动态加载的js 放最后面

DOMContentLoaded 时间.

domContentLoaded里面的dom不止包含我们常说的普通dom节点,还包括script节点。

写在html里面的script节点的加载和解析会影响 domContentLoaded 事件的触发时间