详解Web前端性能优化详解之资源合并与压缩

2023-12-08 0 915

资源合并压缩两个目的

  • 减少http请求数量
  • 减少请求资源的大小
  • google首页案例学习

  • html压缩
  • css压缩
  • js的压缩
  • 文件合并
  • 开启 gzip
  • 一、html 压缩

    详解Web前端性能优化详解之资源合并与压缩

    详解Web前端性能优化详解之资源合并与压缩

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

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

    如何进行 html 压缩

  • 使用在线网站进行压缩
  • nodejs提供了 html-minifier 工具
  • 后端模板引擎渲染压缩
  • 二、html 压缩

  • 无效代码删除
  • css 语义合并
  • 如何进行 html 压缩

  • 使用在线网站进行压缩
  • 使用 html-minifier 对 html 中的css进行压缩
  • 使用 clean-css 对css进行压缩
  • 三、Js 压缩与混乱

  • 无效字符的删除
  • 剔除注释
  • 代码语义的缩减和优化
  • 代码保护
  • 如何进行 js 压缩和混乱

  • 使用在线网站进行压缩
  • 使用 html-minifier 对 html 中的 js 进行压缩
  • 使用uglifyjs2 对 js进行压缩
  • 三、文件合并

    文件合并与不合并对比

    详解Web前端性能优化详解之资源合并与压缩

  • 文件与文件之间有插入的上行请求,增加了 N-1 个网络延迟
  • 受丢包问题影响更严重
  • 经过代理服务器可能会被断开
  • 文件合并存在的问题:

  • 首屏渲染问题
  • 缓存失效问题
  • 解决文件合并存在的问题:

  • 公共库合并
  • 不同页面的合并
  • 见机行事,随机应变
  • 如何进行 js 压缩和混乱

  • 使用在线网站进行压缩
  • 使用 nodejs 实现合并
  • 图片相关的优化
    png8/png24/png32之间的区别

  • png8 —— 256色 + 支持透明
  • png24 —— 2^24色 + 不支持透明
  • png32 —— 2^24色 + 支持透明
  • 每种图片格式都有自己的特点,针对不同的业务场景选择不同的图片格式很重要

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

  • jpg —— 大部分不需要透明图片的业务场景
  • png 支持透明,浏览器兼容好
  • webp压缩程度更好,在 ios webview 有兼容性疸
  • svg 矢量图,代码内嵌,相对较少,图片样式相对简单的场景
  • 不同格式图片常用的业务场景

  • jpg —— 大部分不需要透明图片的业务场景
  • png —— 大部分需要透明图片的业务场景
  • webp —— 安卓全部
  • svg矢量图 —— 图片样式相对简单的业务场景
  • 进行图片压缩

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

    CSS雪碧图

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

    优点

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

    缺点

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

    Image inline

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

    在安卓下使用webp

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持悠久资源网。

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 网站设计心得 详解Web前端性能优化详解之资源合并与压缩 https://www.u-9.cn/sheji/xinde/130474.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务