一个网页打开很慢的分析过程

一个网页打开很慢的分析过程

页面打开慢的原因有网络问题、渲染问题、代码问题等等
1、查看网络情况
打开chrome浏览器的开发者选项，选择Network菜单，刷新页面，对请求情况进行分析，记录DOMContentLoaded时间、Load时间、页面文件大小
找出无效的请求、失败的请求、耗时长的、文件大的资源，并按分类统计请求数量
无效的请求、失败的请求：查明原因并解决，如地址失效、拼写错误等
耗时长的请求：分析timing菜单，耗时的部分在哪里，等待时间长，寻求后端一起解决、或用多个域进行资源请求
文件大的资源：检查代码是否压缩、传输时是否使用gzip进行压缩，文件是否拆分，如果有第三方类库可以提出来使用CDN引入
如果有很多小的图片资源：可以考虑图片合并，或是bese64的方式
2、渲染问题
把css文件放到head部分
Js放到底部
3、代码问题
精简代码dom层级、数量
避免使用table、iframe标签
使用精确的css类名，去除多余无用的选择器层级