页面打开速度优化 | 七日打卡

151 阅读2分钟

对于做前端工作的我来说,经常听到客户反馈的就是页面打开缓慢的问题,我想这也是大部分同行面对的问题,那么我就个人工作中遇到的情况总结下。(隔离期间没有电脑手机打字)

1.静态页面

这是最传统的网页了,加载慢出去网络、服务器等前端不可控的因素外,我们能优化的可以从图片大小,请求次数,缓存等方面入手。关于图片的压缩,可以自行在线压缩(tinypng),也可以找美工处理,如果有多个小图片可以让美工整合成一张精灵图减少请求次数;关于请求接口方面,可以做下缓存处理,数据有新的了再更新页面数据;如果整个页面图片很多就可以使用懒加载了,常见的就是瀑布流那种样式的网站。

2.单页面

随着技术的发展,前端也可以实现工程化了。大大的提高了开发的效率,同时也提高了可维护性节约了时间成本。在上面的基础上,新的项目优化可以从gzip压缩,预加载,按需引入等方面入手。现在的浏览器基本都可以识别gzip压缩的,只要服务器开启即可;预加载这块,通过webpack的插件PreloadWebpackPlugin即可实现对关键内容的优先加载并可用,且不易阻塞页面的初次渲染;按需引入这方面,随着项目的拓展开发,可能会引入很多的ui库,像iview,element,vant等,如果不是全局使用的话完全可以按需引入或者简单的功能自己写,都可以大大提高页面的加载效率。

额外地,一些工具库我们可以使用更小的来替代,比如moment用day来替换,同样的功能更小的体积。这些都不失为好的解决方法。由于身边没有电脑,代码不方便,先这样记录下来,有同学有需要了我后期再进行编辑。第二天,over!