web页面加载速度太慢优化思路

公司有个微信商城，但商城的详情页打开有时快有时慢，慢的时候几秒都打不开，想到解决这个问题。

一、查看网页的运行情况

微信网页代码的调试难住了俺，因为这个项目是其他人开发的，意思是本地环境都没有了现在，于是想到这是个网页，可以查看网页实际的运行情况，这里遇到一个小问题如何查看微信网页的的打开情况。

电脑上需要安装微信开发者工具，使用微信开发者工具打开该网页，但不能显示网页报错，回调地址不能正常打开，又想了下自己电脑是不能正常打开该微信商城网页的，因为电脑连接的wifi和微信商城的域名解析IP对应的内网IP在同一局域网，且路由器是老路由器，没有设置回流造成了同一局域网内的电脑无法通过域名访问局域网内服务器的网页。

解决这个问题也很简单，在Host里面将域名对应地ip修改为内网IP即可 如

www.a.xom  192.168.1.201

网页可以正常打开了，微信开发者工具和chrome有点类似，点击Network菜单，点击网页找到要查看的页面，刷新查看网页上加载的资源和每一项加载所需要的时间，通过反复测试发现，发现影响耗时的是Index.php这个文件，这个文件代码的执行有时候甚至要5-6S，非常的慢。

image.png

点击进去查看Timing发现TTFB居然要6S，Content Download只需要123.39毫秒，说明这个文件后端代码的执行有问题。

二、优化

到实际的代码中查看和定位耗时多的代码，找到后根据逻辑优化即可。

优化后TTFB变为了448.779毫秒，打开速度显著提升，几乎没有什么卡顿。

image.png

三、总结

最后总结下，页面打开慢的时候，要查看页面加载情况，找到耗时的文件，查看是前端加载耗时长，还是请求后端后端代码执行的时间长，找到问题所在的具体位置优化。