第七周-前端性能优化（一）

如何进行网站性能优化？

收集的前端面试题和答案
Yahoo, Google

加载性能优化

图片

不同格式的特点：png, jpg, gif, webp
webp：ex. ***/220?tp=webp 220为图片尺寸 初始base64格式图片，如果浏览器能够识别，则浏览器支持webp格式，请求时会加上?tp=webp参数，否则返回jpg,png... 生成webp的格式过程中，首先会返回jpg，等生成完则返回webp格式

HTTP Cache

• Expires 1.0：绝对时间
• Cache-Control 1.1：相对时间
• Last-Modified + ETag：协商缓存，会影响状态码 ex.如果Etag没变，则可能返回304重定向

HTTP Status Code

• 200 正常请求响应
• 304 正常请求 重定向到本地(根据 etag 和 last-modify)
• 200 from cache 发送请求

Web Storage

Local Storage：使用 SRI 增强 localStorage 代码安全 Cyclic redundancy check

PWA&SW

• 浏览支持情况
• 灵活的缓存控制
• 移动端、趋势

FCP & DCL

概念

其他

可以减少第一个请求的时间：如将新闻类，博客类不常更新的内容放cdn，但cache-control缓存时间不宜过长，几分钟即可

Reference

Google 出的性能优化系列文章
Cache-Control
性能测试工具：lighthouse, PageSpeed Insights