优化网页加载速度

逻辑

最近因为用到一个浏览器方案，但发现加载速度没有IE内核速度快，导致可以感觉明显网页加载过程，所以找了一些资料然后进行无数次实验得出一些心得。

结论

1. html是从上到下渲染，一边加载一遍渲染
2. 遇到JS 加载会阻塞加载JS
3. 遇到CSS会阻塞加载加载
4. 网络传输速度

这里我们要用户感觉不到加载情况本质就是要用户快速看到浏览器的渲染的界面，所以我们缩短js与css加载时间，这个就是为什么大多数网站都是把js放在后面，因为js一般情况处理事件，对界面没有太大的印象，但CSS 无法放在最后面，因为明显可以感觉到样式改变导致界面出现变化，所以可以为了速度可以考虑css先加载核心会影响主界面，然后再动态加载css这样子的方式（自己没有用动态加载css，html5 语法貌似可以直接支持）。

js

js可以加载核心放在后面，如果用到多个JS，也可以动态加载，可以绑定domready 加载其他业务的js

怎么验证速度？

我们可以通过浏览器的开发者功能，截图。我们可以根据2时间线来和截图来确定渲染情况，这样子我们可以通过肉眼就可以看出来了。

验证js是否加载阻塞，可以在引入js标签后加一个可以见标签，然后在开发者网络设置慢3g，那么可以明显测试界面渲染。

总结

我其实还有其他心得，只是写这篇文章时候已经过了好久只能记住核心几点，只要通过浏览器开发者功能截图和网络设置其实可以慢慢分析网站为什么慢，包括网络加载速度，我们通过调试发现https比http 消耗握手还是蛮大的，如果你对速度特别敏感可以考虑换成http,同时我开始用oss的链接，发现还是直接服务器速度快，因为html放服务器上，网络复用反而比链接其他服务器要快，所以只要知道怎么确定慢，就可以不断的优化。