网页提高加载速度的方法

原创 fantasy525 随笔 性能优化 1022阅读 2017-05-03 11:25:25 举报

提高加载速度最本质就是减少页面请求数量,减少请求大小。实现方式主要有
1.图片懒加载,这个推荐使用成熟的库lazysizes,固定宽高值的图片实现比较简单,
固定宽高比的话有几种实现方案:
第一种方案使用padding-top或者padding-bottom来实现固定宽高比。优点是纯CSS方案,缺点是HTML冗余,并且对输出到第三方不友好。
第二种方案在页面初始化阶段利用ratio设置实际宽高值,优点是html干净,对输出到第三方友好,缺点是依赖js,理论上会至少抖动一次。
此方案需要定义一个设置图片高度的函数:javascript 代码

以上两种方案具体可以参考简书作者齐修_qixiuss 的分享
3.js/css按需打包
这里需要webpack的配合来实现
4.用base64减少不必要的网络请求
可以使用gulp自动化工具来实现
5.js/css按需加载
简单说就是动态插入script节点,用webpack实现就是require.ensure();
以上思路参考与简书作者的分享,请看原文具体学习
完整攻略!让你的网页加载时间降低到 1s 内!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复