2020-10-27 1.前端性能优化 - 静态资源优化

静态资源优化

  1. JPEG: 对彩色照片而广泛使用的有损压缩图形格式

    • 不适合: 线条图形或者文字, 图标图形, 因为压缩算法不太适合这种类型, 并且不支持透明度
    • 适合: 颜色丰富的图片, 彩色图大焦点图, 通栏banner图, 结构不规则的图形
  2. PNG: 无损压缩的位图图形格式, 支持索引, 灰度, RGB三种颜色以及Alpha通道特性

    • 不适合: 无损压缩所以彩色图像体积图像太大, 不太适合
    • 适合: 纯色, 透明, 线条绘图, 图标, 边缘清晰, 有大块相同颜色的区域, 颜色数少, 但需要透明
  3. Gif: 以8位色重现真彩色的图像, 仅仅支持完全透明和完全不透明, 如果需要比较通用的动画, gif是唯一选择

    • 不适合: 每个像素只有8个比特位, 不适合存储彩色图片
    • 适合: 动画, 图标
  4. webp现代图像格式, 可为图像提供无损压缩和有损压缩, 非常灵活

    • 同时保证一定程序上图像质量和比较小的体积, 可以插入多帧, 实现动画效果; 可以设置透明度; 采用8位压缩算法; 无损的webp比PNG小26%; 有损的webp比JPEG小25-34%; 比gif更好的动画
    • 不适用: 最多处理256色, 不适合于彩色图片
    • 适合: 图形和半透明图形
  5. 用工具进行图片压缩

    • 压缩png
      • npm install -g node-pngquant-native jdf-png-native
      • 跨平台, 压缩比高, 压缩png24非常好
    • 压缩jpg
      • npm install -g jpegtran
      • 跨平台
    • 压缩gif
      • Gifsicle: 通过改变每帧的比例, 减小gif文件大小, 同时可以使用透明来达到更小的文件大小
      • 使用方式
        • 优化级别设置为不小于2, 1的话基本不压缩 gifsicle --optimize=3 out.gif in.gif
        • 将透明部分截去掉: gifsicle --optimize=3 --crop-transparency out.gif in.gif
  6. 图片尺寸随着网络环境的变化

    • 不同的网络环境, 加载不同尺寸和像素的图片, 通过在图片url后缀加上不同的参数改变
  7. 响应式图片

    • JavaScript绑定事件检测窗口大小
    • css媒体查询
    • img标签属性 (srcset)
  8. 逐步加载图像

    • 统一占位符
    • 使用LQIP
      • 低质量图像占位符
      • npm install lqip
    • 使用SQIP
      • 基于SVG的图像占位符
      • npm install sqip
  9. 更好的解决方案

    • WebFont代替图片(图标, 切图等)
    • 使用Data URI代替图片(Base64)
    • 采用Image Spriting
  10. 图片服务器自动优化解密

    • 图片服务器自动优化是可以在图片url链接上增加爱不同特殊的参数, 服务器自动生成

    • 不同格式, 大小, 质量的图片

    • 处理方式:

      • 图片裁剪: 按照长边, 短边, 天聪, 拉伸等缩放
      • 图片格式转换: 支持png,gif,jpg,webp等不同图片的压缩率
      • 图片吹: 添加图片水印, 高斯模糊, 重心处理, 裁剪变宽等
      • AI能力: 鉴别黄以及智能抠图, 智能排版,智能配色, 智能合成等AI
  11. html优化

    • 精简代码, 减少嵌套

    • 减少dom节点数

    • 减少无语义代码

    • 删除http或http (URL与当前协议头一致的时候, 或者此url在多个协议头都可以用的时候)

    • 删除多余空格, 换行, 缩进

    • 删除冗余标签属性

    • 使用相对路径url

    • css文件尽量放在页面头部

      • css加载不会阻塞dom解析,但是会阻塞dom tree渲染, 也会阻塞后面js的执行
      • 任何body元素之前, 可以确保在部分中解析所有css样式, 从而减少了浏览器重排文档的次数
      • 如果放置在页面底部 那要等待嘴壶一个css文件下载完成, 此时出现白屏
    • JS引用放在HTML底部

      • 放置js的加载, 解析, 执行对阻塞页面的元素正常渲染
    • 增加用户体验

      • 设置favicon.ico
      • 增加首屏必要的css和js (骨骼屏)
  12. css优化

    • 提升CSS渲染性能
      • 谨慎使用expensive属性, 如:nth-child伪类, position:fixed;定位
      • 尽量减少样式层级数, 如 div ul li span i {color: blue;}
      • 尽量避免使用占用更多CPU和内存的属性, text-indent: -9999px;
      • 尽量避免使用耗电量大的属性, 比如CSS3 3D transforms css transitions, Opacity
    • 合理使用css选择器
      • 尽量避免使用CSS表达式: background-color: expression(Math.random() > 0.5 ? 'red' : 'blue')
      • 尽量避免使用通配符选择器
      • 尽量避免类正则的属性选择器
    • 提升CSS加载文件的性能
      • 使用外链的css
      • 避免使用@import (阻塞css文件的加载和js文件)
    • 精简css代码
      • 缩写语句
      • 删除不必要的0
      • 删除不必要的单位
      • 删除过多的分好, kongge,述职
      • 减少样式表的大小(压缩)
    • 合理使用webFonts
      • 将字体部署到CDN上
      • 将字体以BASE64的形式保存在css中, 通过localStorage进行缓存
      • Google字体因为某些不可抗拒原因, 应该使用国内托管服务
    • CSS动画优化
      • 尽量避免使用动画
      • 延迟动画初始化
      • 结合SVG
  13. 提升JS文件加载性能

    • 加载元素的顺序 Js文件放在body
    • js变量和函数优化
      • 尽量使用id选择器
      • 避免使用eval
      • js函数保持简介
      • 使用事件节流函数和事件委托
    • JS动画优化
      • 避免使用大量JS动画
      • 尽量使用CSS3动画
      • 尽量使用Canvas动画
      • 合理使用requestAnimationFrame动画代替setTimeout, setInterval
    • 合理使用缓存
      • 合理缓存DOM对象
      • 缓存列表长度
      • 使用可缓存的Ajax
  14. 对Javascript进行缓存

    • 对Cookie设置有效时间
    • sessionStorage 页面与页面之间的传值
    • indexDB 索引数据 (没有网络的情况下可以使用, 石墨文档等)
    • localStorage 浏览器存储值
      • 缓存静态文件内容(JS/css)
      • 缓存补偿变更的API接口数据
      • 存储地理位置信息
      • 浏览在页面的具体位置
  15. JS模块化加载方案和选型

    • commonjs
    • amd
    • cmd
    • es6
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341