目录
前言
- 为什么 要分析微信文章 ？
微信文章 每天有大量的阅读量，而且 访问速度很快，想知道 他们做了那些优化
JS 资源加载
- 资源请求方面
- 资源加载：一次 请求 加载了多个资源
| 好处 | 可能的问题 |
|---|---|
| 资源合并 减少了请求 ，加快了页面渲染时间 | 需要服务器支持 |
- 服务端设置 缓存
| 好处 | 缺点 |
|---|---|
| 资源缓存，减少服务器资源请求，优化渲染速度 | 对于 经常更新的页面不能使用 ，要不客户端老是旧的 |
- 打开代码 查看 发现是类似 seajs 的结构 ，搜索 一下 全局 打印一下
果然是 走了seajs ，还类似 做了的变量隔离，
- 再看 cache
– 断点走进去看看一下
发现是对资源加载后进行遍历 加入 localstoarage
- localStorage 缓存资源
| 好处 | 缺点 |
|---|---|
| 资源缓存到 localStorage 减少了资源请求，对于一个项目 中公共资源 可以进行一次缓存（版本可控制缓存更新 ,相对于 用header 控制 来说 更加可靠） | PC 上面不同浏览器支持程度不一样、 大小有限制 |
dns-prefetch (DNS 预解析)
| 好处 | 缺点 |
|---|---|
| 空闲时间加载 一个是减少DNS的请求次数 减少用户等待时间 |
多页面重复DNS预解析会增加重复DNS查询次数 |
SEO
- 多方位 SEO 配置 增加曝光量
信息上报 （图片模式）
| 好处 | 缺点 |
|---|---|
| 异步执行，不阻碍js线程继续执行 |
|
| 服务器会接收到数据并保存下来, 它无需向客户端发送任何回馈消息, 因此没有图片会实际显示出来. 这是给服务器回传信息最有效的方式. 它的性能消耗很小, 并且服务端的错误完全不会影响到客户端 | 因为图片url 请求 ，会有长度限制 |
图片资源懒加载
| 好处 | 缺点 |
|---|---|
| 减少非必须资源请求（省钱 cdn 是花钱的） | 无 |
- 图片转base64
优势：小图片转base64 减少接口请求，没有跨域问题，不用考虑浏览器缓存这些，缺点：如果放在css 里面 会增加cssOM 时间