问题

客户反馈系统慢，部分页面第一次打开时老是出现空白，等好几秒甚至好十几秒才出现内容。

涉及到加载缓慢啊这类问题，对于我这种非专业前端来说就很头疼，做做页面，写写JS还能应付应付。

分析原因

在Chrome中打开F12，在网络栏中查看出问题页面的请求响应时间。发现几个ajax请求后台响应都在正常范围内，和起来后台交互响应时间也只有1s左右。

但是首次打开时确实出现了加载缓慢的现象，之后再次访问就是正常了！

客户那边一般是在工厂环境中，地理位置都较为偏僻，工业环境中网络信号可能较差，稍微影响加载速度，但是也不能差这么多！

最后想了下可能是页面渲染慢了，于是去看了下浏览器加载页面的过程，就看到了这么一条：

浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？

• 根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

也就是说html代码段中要是镶嵌了js，那么页面会暂停html的渲染，我擦！！赶紧去看了下前端代码。

果然还是有问题的，之前开发的时候为了方便，就把js各种嵌套在html中，所有按钮的点击事件，ajax请求，下拉选择事件等。即html元素和其对应的js脚本写在一起…

优化

优化思路也很明显了，把js移动到页面代码最下面！

由于人员配置不够，被迫全栈，前端真的伤！！！！！！