web页面加载缓慢

2019独角兽企业重金招聘Python工程师标准>>>

    web页面优化一直是一个比较大的话题，尤其是对于那些访问量大的，面向的使用者广的页面，而最近就遇到一个关于页面加载缓慢的问题。先说下问题现象：一个页面要加载的东西挺少的，除了html，js，css这些标配之外，还有一个或者两个jsonp的请求，数据量在0.8KB左右，还有一些图片。

    当时遇到这个问题的时候我也一头雾水，因为之前只是在网上拜读过相关的文章，但是没有动手解决过，然后就直接去看万能的F12键 + 网络，只是看到几点：

    1.jsonp的请求基本上就是等待响应，占了90%以上的时间。

    2.加载图片主要在两个阶段 阻挡 + 等待响应，两个加起来也占到90%以上。

然而看来看去并不懂阻挡和等待响应是什么鬼，然后就百度啊.......（此处省略若干字）

    后来总结到几点原因：

        1.总体要加载的图片数量大，单个图片大小太大，未压缩（210*210px，30kb-50kb），而每个页面加载的图片都在30张左右。

2.每个页面中所有图片一次性加载，对服务器负担太大。

解决建议：

    因为作为一个前端人员，浪费在服务器端的时间暂不能做出优化，故提出两点前端的优化建议，并且可行性较高。

1.图片压缩，将图片保存为web格式png，大小可缩小2/3(30kb到10kb)；

2.图片的异步加载（暂未）

补充第二点：

因为图片较多，所以web一次性请求数据，并把数据渲染到页面会给浏览器造成很大的压力，所以才去的方案是，初始加载部分数据（几页），然后再向后翻页的时候渲染剩余的数据到页面。

3.减小代码量--引入的压缩版的第三方库，删除代码中没必要的换行，空格，注释等。

 

转载于:https://my.oschina.net/niejianbo/blog/659989