前端性能优化原理与实践

166 阅读1分钟

从url输入到显示

1,DNS 解析 2,TCP 连接 3,HTTP 请求抛出 4,服务端处理请求,HTTP 响应返回 5,浏览器拿到响应数据,解析响应内容,把解析的结果展示给用户

http 网络优化

1,减小请求的体积,也就是文件的大小,越小的文件下载的越快 accept-encoding:gzip 压缩图片 不同情况选择不同图片格式 2,较少http请求 1,合并雪碧图,base64, 2,采用缓存 2.1,Cache-Control expires 采用强缓存 cache-control: max-age=3600, s-maxage=31536000 s-maxage 优先级高于 max-age,两者同时出现时,优先考虑 s-maxage。如果 s-maxage 未过期,则向代理服务器请求其缓存内容

2.2 Last-Modified 到 Etag 协商缓存 Etag > Last-Modified 必须设置no-cache的情况下,才使用协商缓存

image.png
2.3MemoryCache 浏览器自己把较小的文件,比如base64 图片放到浏览器缓存中 2.4 Service Worker Cache 2.5Push Cache