通过不断的实验研究，在现有技术背景下，通过优化以下两点，可以突破性的解决响应式网站普遍的性能延迟问题。

1、针对响应式的移动端和PC端运用懒加载技术，研究发现，正确使用css中的overflow:hidden属性可以使得在同一URL上，使用移动设备访问时，将不会加载使用了懒加载的PC资源，反之，在电脑端访问该URL时也不会加载使用了懒加载的移动端资源。这样可以很好的节省服务器带宽和浏览器渲染时的负担。从用户体验角度来讲，提升了网页的打开速度同时节省了上网流量。这将使响应式页面的性能问题得到根本解决。
如果使用属性display:none来替代overflow:hidden则不能达到上述效果。

2、JS代码升级，使用脚本异步加载或延迟执行，延迟执行可使JS在页面加载完成后再进行执行，异步加载可以使浏览器启动另一个进程加载和执行js，解决js阻塞渲染的问题，提升浏览器渲染网页的速度。
关于异步加载的方法可参阅我的博文《JS异步加载的几种方式总结》。

转载本文请联系原作者获取授权，同时请注明本文来自王军礼科学网博客。

链接地址：https://wap.sciencenet.cn/blog-1273577-1142933.html?mobile=1

收藏

分享