0、可对照下图进行优化
H5性能优化
移动端浏览器优化策略.png
桌面浏览器优化策略.png
1、css头部，js尾部
- css文件和js文件都是首屏必须用到的，用不到的做按需加载，这些必须用到的css.js文件还可以做成内联的形式，而不是外链的形式。
- css文件不会阻塞dom解析，但会阻塞dom渲染（页面渲染），即在头部的css文件如果体积较大，加载时间较长的话也是会延长页面首次渲染时间的，因此最好用JS的方式动态加载非首屏CSS资源。对于简单页面，不用JS动态加载css的方式也是可以接受的，css加载的时间可以和dom解析的时间抵消。
- 当css和js文件都在头部时，js放在css上面是一种更好的方案，理由是浏览器遇到没有defer/async属性的script标签时会触发渲染操作，渲染操作依赖dom树和cssom树，如果css耗时较长，那么js就要等待css下载完毕
2、加载资源数不超过4个
android下并发数4，ios是6个，首屏的css.js文件总数不要超过4个最好，后续的做按需加载
参考：
移动H5前端性能优化指南
网友评论