JSP加载缓慢显示空白页

问题

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

涉及到加载缓慢啊这类问题,对于我这种非专业前端来说就很头疼,做做页面,写写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移动到页面代码最下面!

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值