前端资源合并与压缩

前端资源合并与压缩

技术杂谈小彩虹2021-08-15 8:53:23200A+A-

这是我参与更文挑战的第1天,活动详情查看:查看挑战

资源合并与压缩

资源合并

在前端编码的时候将css、js等静态资源文件合并压缩之外,我们还可以在页面中将多个css、js的请求合并为一个请求。文件的合并带来的是http请求数的减少,尤其是在移动端,每一个http请求带来的是慢启动,三次握手,连接建立,所以资源的合并是由为重要的,合并和不合并对比:

image.png

意思就是合并多个请求, 像雪碧图一样!

html的压缩

HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。

CSS和JavaScript文件的压缩

JavaScript压缩,主要是去除多余的换行和空格等等,对于语法来说,JavaScript可以选择混淆压缩和非混淆压缩,无论哪种压缩都是为了减少JavaScript的文件大小,当然出于前端代码保护来看,混淆压缩会大大破坏原有的阅读逻辑,增加压缩比,从而给代码添加一层保护。 CSS压缩,同理是去除多余的换行和空格等等,由于CSS文件的特殊性暂时无法实现混淆压缩,压缩主要是将大量的换行去除,可以减少不少的文件大小。

图片的压缩

对于常见的前端项目,关于图片的使用,主要有以下两种: • 固定图标,背景,按钮icon等等,这些图片有一个特点就是固定和用户无关,一般是放在源码包里面,由前端代码直接引入。 • 人物头像,文章配图,内容图片等等,这些非固定图片一般由用户上传,有很强的用户性,这些图片一般放在CDN上,前端通过链接请求。

  1. 对于固定图片,推荐tinypng.com

  2. 采用CSS雪碧图:把你的网站用到的一些图片整合到一张单独的图片中:

    优点:减少HTTP请求的数量(通过backgroundPosition定位所需图片)。

    缺点:整合图片比较大时,加载比较慢(如果这张图片没有加载成功,整个页面会失去图片信息)。

  3. 对于非固定图片,常见的优化压缩主要有以下几种原则:

    优先使用压缩率高的jpeg类型图片,缺点是不支持透明。

    有条件的话使用webP(一种Google开发的新类型)类型图片是最佳选择,相比于jpeg,有更小的文件尺寸和更高的图像质量。

懒加载与预加载

懒加载对于移动web端,尤其是最常见的滚动加载场景是一项非常重要的优化措施。而预加载则常常应用于多tab场景的页面,让用户更快的看到打开的下一个页面。

懒加载

• 图片进入可视区域之后请求图片资源。
• 对于电商等图片很多,页面很长的业务场景适用。
• 减少无效资源的加载。
• 并发加载的资源过多会会阻塞js的加载,影响网站的正常使用。

img src被设置之后,webkit解析到之后才去请求这个资源。所以我们希望图片到达可视区域之后,img src才会被设置进来,没有到达可视区域前并不现实真正的src,而是类似一个1px的占位符。

预加载

• 图片等静态资源在使用之前的提前请求。
• 资源使用到时能从缓存中加载,提升用户体验。
• 点击操作前预先加载下一屏数据。


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们