一:资源的合并与压缩
(1)减少http请求数量和减少请求资源大小两个优化要点
(2)掌握压缩与合并的原理
(3)在线网站和gulp两种实现压缩与合并的方法
1:浏览器的一个请求从发送到返回都经历了什么?
//前端是B/S架构的,理解请求对性能优化有重要的意义
2:请求过程中一些潜在的性能优化点
(1)dns是否可以通过缓存减少dns查询时间?
(2)网络请求的过程走最近的网络环境?
(3)相同的静态资源是否可以缓存?
(4)能否减少请求http请求大小?
(5)减少http请求
(6)服务端渲染
深入理解http请求的过程是前端性能优化的核心
3:资源的合并和压缩重要是:减少http请求数量,减少请求资源的大小
1:压缩
(1)html压缩
HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。
压缩方式:
- 使用在线网站进行压缩
- nodejs提供了html-minifier工具
- 后端模板引擎渲染压缩
(2)css压缩
1:无效代码删除(换行,注释),css语义合并
压缩方式:
- 使用在线网站进行压缩
- 使用html-minifier对html中的css进行压缩
- 使用clean-css对css进行压缩
(3)js压缩
无效字符的删除,剔除注释,代码语义的缩减和优化,代码保护
压缩办法:
- 使用在线网站进行压缩
- 使用html-minifier对html中的js进行压缩
- 使用uglifyjs2对js进行压缩
2:合并(文件合并)
文件合并存在的问题:(1)首屏渲染问题 (2)缓存失效问题(更改js代码就会造成缓存失效)
公共库合并(公共库,业务代码分别打包),不同页面的合并(单页应用,不同页面的js单独打包)
二:图片压缩
原因:尽量以最小的代价显示图片,每种图片格式都有自己的特点,针对不同的业务场景选择不同的图片格式很重要。
不同格式图片常用的业务场景:
(1)jpg有损压缩,压缩率高,不支持透明,色彩丰富
(2)png支持透明,浏览器兼容好
(3)webp压缩程度更好,在ios webview有兼容性问题
(4)svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景.
png8/png24/png32之间的区别
png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明
jpg —— 大部分不需要透明图片的业务场景
png —— 大部分需要透明图片的业务场景
webp —— 安卓全部
svg矢量图 —— 图片样式相对简单的业务场景
图片压缩: 针对真实图片情况,舍弃一些相对无关紧要的色彩信息.
CSS雪碧图: 把你的网站上用到的一些图片整合到一张单独的图片中, 减少你的网站的HTTP请求数量.
Image inline: 将图片的内容内嵌到html当中, 减少你的网站的HTTP请求数量.
使用矢量图: 使用SVG进行矢量图的绘制 使用iconfont解决icon问题.
在安卓下使用webp: WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。