网页加载过慢的问题诊断思路

计划10月份开始写一些新手入门的文章，希望单位的新人能迅速融入开发团队。

今天早上遇到一个网页加载过慢的问题，一群人思路都仅局限在网络请求上。但实际上影响网页加载速度的因素有很多：

1.网络请求，这个大家都懂怎么看，不多说。

2.网页本身渲染速度。

操作dom和渲染页面本身也是一个非常大的开销。如果排除了第一点，并且js代码没有报错，就应该关注这方面。

chrome浏览器f12有个performance工具，按照下面的说明使用，就可以看到网页加载的时间和各部分的开销情况。在下面有个饼图可以

直观了解那个部分耗时较多，但是要忽略掉空白的部分（idle）。并且那个文件耗时比较多也能看出来，早上的问题使用该工具一下子就

可以找到有问题的那个文件——一张图片，去掉后网页明显加快很多。

3.js代码问题。

如果js代码出错或者写了死循环死递归也可能造成网页卡死。上面那个工具同样可以分析js。

对于一些执行时间本来就长的js可以优化一下，比如多使用异步加载模式，使用ajax预加载数据，减少不必要请求等。

而对于页面上一些简单并且相对独立的js可以使用尝试web workers进行优化，该方法有点像多线程。

关于ajax多次重复请求的问题，有两种简单思路解决：一个是jquery的ajax返回的对象有个abort方法可以取消该请求，

使用一个变量获取该对象，每次请求前调用abort方法；另一个是使用setTimeout方法，发起请求前先clean前一次的id。

4.优化dom树，尽量精简文档结构。