文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Web前端性能优化之资源合并与压缩的示例分析

2023-06-08 01:47

关注

这篇文章将为大家详细讲解有关Web前端性能优化之资源合并与压缩的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

资源合并与压缩两个目的

  1. 减少http请求数量

  2. 减少请求资源的大小

google首页案例学习

  1. html压缩

  2. css压缩

  3. js的压缩

  4. 文件合并

  5. 开启 gzip

一、html 压缩

Web前端性能优化之资源合并与压缩的示例分析

Web前端性能优化之资源合并与压缩的示例分析

图一是新浪的首页显示是没有压缩的,图二的谷歌的首页是经过压缩的。

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

如何进行 html 压缩

  1. 使用在线网站进行压缩

  2. nodejs提供了 html-minifier 工具

  3. 后端模板引擎渲染压缩

二、html 压缩

  1. 无效代码删除

  2. css 语义合并

如何进行 html 压缩

  1. 使用在线网站进行压缩

  2. 使用 html-minifier 对 html 中的css进行压缩

  3. 使用 clean-css 对css进行压缩

三、Js 压缩与混乱

  1. 无效字符的删除

  2. 剔除注释

  3. 代码语义的缩减和优化

  4. 代码保护

如何进行 js 压缩和混乱

  1. 使用在线网站进行压缩

  2. 使用 html-minifier 对 html 中的 js 进行压缩

  3. 使用uglifyjs2 对 js进行压缩

三、文件合并

文件合并与不合并对比

Web前端性能优化之资源合并与压缩的示例分析

  1. 文件与文件之间有插入的上行请求,增加了 N-1 个网络延迟

  2. 受丢包问题影响更严重

  3. 经过代理服务器可能会被断开

文件合并存在的问题:

  1. 首屏渲染问题

  2. 缓存失效问题

解决文件合并存在的问题:

  1. 公共库合并

  2. 不同页面的合并

  3. 见机行事,随机应变

如何进行 js 压缩和混乱

  1. 使用在线网站进行压缩

  2. 使用 nodejs 实现合并

图片相关的优化
png8/png24/png32之间的区别

  1. png8 —— 256色 + 支持透明

  2. png24 —— 2^24色 + 不支持透明

  3. png32 —— 2^24色 + 支持透明

每种图片格式都有自己的特点,针对不同的业务场景选择不同的图片格式很重要

不同格式图片常用的业务场景

  1. jpg —— 大部分不需要透明图片的业务场景

  2. png 支持透明,浏览器兼容好

  3. webp压缩程度更好,在 ios webview 有兼容性疸

  4. svg 矢量图,代码内嵌,相对较少,图片样式相对简单的场景

不同格式图片常用的业务场景

  1. jpg —— 大部分不需要透明图片的业务场景

  2. png —— 大部分需要透明图片的业务场景

  3. webp —— 安卓全部

  4. svg矢量图 —— 图片样式相对简单的业务场景

进行图片压缩

针对真实图片情况,舍弃一些相对无关紧要的色彩信息

CSS雪碧图

把你的网站上用到的一些图片整合到一张单独的图片中

优点

减少你的网站的HTTP请求数量

缺点

整合图片比较大时,一次加载 比较慢

Image inline

将图片的内容内嵌到html当中,减少你的网站的HTTP请求数量

在安卓下使用webp

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

关于“Web前端性能优化之资源合并与压缩的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯