1 | 减少http请求数量 减少请求资源的大小 |
google首页案例学习
1 | html压缩 css压缩 js的压缩 文件合并 开启 gzip |
一、html 压缩
图一是新浪的首页显示是没有压缩的，图二的谷歌的首页是经过压缩的。
HTML代码压缩就是压缩这些在文本文件中的意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如
HTML 注释也可被压缩。
如何进行 html 压缩
1 | 使用在线网站进行压缩 nodejs提供了 html-minifier 工具 后端模板引擎渲染压缩 |
二、html 压缩
1 | 无效代码删除 css 语义合并 |
如何进行 html 压缩
1 | 使用在线网站进行压缩 使用 html-minifier 对 html 中的css进行压缩 使用 clean-css 对css进行压缩 |
三、Js 压缩与混乱
1 | 无效字符的删除 剔除注释 代码语义的缩减和优化 代码保护 |
如何进行 js 压缩和混乱
1 | 使用在线网站进行压缩 使用 html-minifier 对 html 中的 js 进行压缩 使用uglifyjs2 对 js进行压缩 |
三、文件合并
文件合并与不合并对比
1 | 文件与文件之间有插入的上行请求，增加了 N-1 个网络延迟 受丢包问题影响更严重 经过代理服务器可能会被断开 |
文件合并存在的问题:
1 | 首屏渲染问题 缓存失效问题 |
解决文件合并存在的问题:
1 | 公共库合并 不同页面的合并 见机行事，随机应变 |
如何进行 js 压缩和混乱
1 | 使用在线网站进行压缩 使用 nodejs 实现合并 |
图片相关的优化
png8/png24/png32之间的区别
1 | png8 —— 256色 + 支持透明 png24 —— 2^24色 + 不支持透明 png32 —— 2^24色 + 支持透明 |
每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要
不同格式图片常用的业务场景
1 | jpg —— 大部分不需要透明图片的业务场景 png 支持透明，浏览器兼容好 webp压缩程度更好，在 ios webview 有兼容性疸 svg 矢量图，代码内嵌，相对较少，图片样式相对简单的场景 |
不同格式图片常用的业务场景
1 | jpg —— 大部分不需要透明图片的业务场景 png —— 大部分需要透明图片的业务场景 webp —— 安卓全部 svg矢量图 —— 图片样式相对简单的业务场景 |
进行图片压缩
针对真实图片情况，舍弃一些相对无关紧要的色彩信息
CSS雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中
优点
减少你的网站的HTTP请求数量
缺点
整合图片比较大时，一次加载 比较慢
Image inline
将图片的内容内嵌到html当中，减少你的网站的HTTP请求数量
在安卓下使用webp
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
本知识来源于互联网索引，如有侵权请联系我们！
嗨，这是一条评论。 要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。 评论者头像来自Gravatar。