【打卡】web性能实战

[swustzzh]

章节：第一章 理解web性能
总结：

• 20年的书，有点后悔没有早点看到，害
• 更多的是讲解web性能的意义&实际的例子表示优化的比例
• gzip压缩jpeg图标并不是正向的，而是负优化
  
• TinyPNG压缩图片效果较好（tinypng,tinyjpg, yyds）
• 本章的核心是压缩资源

[swlws]

TinyPNG 压缩 JPEG、PBG，甚至字体的 woff 文件，都不错。
在 webp 的处理上不佳，图片可以试着都转为 webp。

工具：https://developers.google.com/speed/webp/docs/cwebp?hl=zh-cn

[swustzzh]

字体的那么多格式是因为啥？

[swustzzh]

章节：第二章 使用评估工具
总结：

• 使用Google PageSpeed Insights进行评估，一次只能分析一个url
• 基于浏览器的评估工具 能进行大量的评估
• 检查网络请求
• 渲染性能检查工具
• chrome中对js进行基准测试
• 模拟和监控设备
• 自定义网络节流配置
  思考：
• 平常记不住，面试答不上来

章节：第三章 优化CSS
总结：

• CSS属性简写
• CSS浅选择器
• csscss冗余检查器，移除多余的属性
• 基于用户行为对css进行分割
• 移动优先的响应式web，极简主义开始设计
• 避免@import，会导致样式串行加载，应在网站的渲染速度和加载速度
• 使用高效的CSS选择器及flex布局
• CSS过度实现高性能简单线性动画
• will-change属性通知浏览器元素的状态改变

[swustzzh]

4,5章看了和没看一样，我...

[swustzzh]

章节：第9章 使用Service Worker提升性能

• Service Worker是一种JS Worker，它在一个独立的线程上运行，与发生在主处理线程上的其他脚本活动分离
• Service Worker仅仅是一种增强，不是网站工作的需求
• 要求使用HTTPS
• CacheStorage与Service Worker的feich事件配合使用，拦截和缓存网络请求是，就拥有了巨大的能力和灵活性。
• 需要根据网站资源的变更情况，及时更新缓存

[swustzzh]

章节：第十章 微调资源传输

• 压缩资源
  • 遵循压缩指导规则。不是“压缩一切”
  • 配置压缩等级。在有效荷载大小和压缩时间去的平衡，通常压缩等级设为6比较合适
  • 压缩适当的文件类型。
• 缓存资源
  • 使CSS和JavaScript资源失效。解决某些情况下顽固的缓存资源（面试被问到过，可以在css或者js链接的后面加上?v=xx的字符串，由于url以及变了，会重新请求资源）
  • 图像或其他媒体文件失效。可以指向全新的文件。
• 使用CDN资源
• 使用资源提示
  • preconnect资源提示
  • prefetch,preload

[swlws]

域名解析优化，用于多域名场景

[swustzzh]

章节 第十一章

• HTTP/2服务器如何处理不支持HTTP/2的浏览器
  • 底层会有一个HTTP/1的服务器在等待一个不支持HTTP/2的客户端出现（服务器要想被是为完全符合规范，需要能够为就浏览器降级协议）
• 划分用户
  • Can I Use/Google Analytics
• 根据浏览器功能提供资源
  • HTTP/1和HTTP/2在优化技术上的唯一真正区别是，前者在资源合并时性能更好，后者在资源粒度更细时性能最好。

[swustzzh]

章节：第十二章 使用gulp自动化优化任务

• gulp是什么？流式构建系统
• 文件夹结构有助于组织项目，从而提高工作效率
• gulp没有明确依赖于插件来完成常见任务。