简单看一下-微信文章 做了哪些优化

目录

前言

• 为什么 要分析微信文章 ？

微信文章 每天有大量的阅读量，而且 访问速度很快，想知道 他们做了那些优化

JS 资源加载

• 资源请求方面
  
• 资源加载：一次 请求 加载了多个资源

好处	可能的问题
资源合并 减少了请求 ，加快了页面渲染时间	需要服务器支持

• 服务端设置 缓存
  

好处	缺点
资源缓存，减少服务器资源请求，优化渲染速度	对于 经常更新的页面不能使用 ，要不客户端老是旧的

• 打开代码 查看 发现是类似 seajs 的结构 ，搜索 一下 全局 打印一下
  
  

果然是 走了seajs ，还类似 做了的变量隔离，

• 再看 cache

– 断点走进去看看一下

发现是对资源加载后进行遍历 加入 localstoarage

• localStorage 缓存资源

好处	缺点
资源缓存到 localStorage 减少了资源请求，对于一个项目 中公共资源 可以进行一次缓存（版本可控制缓存更新 ,相对于 用header 控制 来说 更加可靠）	PC 上面不同浏览器支持程度不一样、 大小有限制

dns-prefetch (DNS 预解析)

好处	缺点
空闲时间加载 一个是减少DNS的请求次数 减少用户等待时间	多页面重复DNS预解析会增加重复DNS查询次数

SEO

• 多方位 SEO 配置 增加曝光量

信息上报 （图片模式）

好处参考：https://juejin.im/post/6844903633964761096

好处	缺点
异步执行，不阻碍js线程继续执行
服务器会接收到数据并保存下来, 它无需向客户端发送任何回馈消息, 因此没有图片会实际显示出来. 这是给服务器回传信息最有效的方式. 它的性能消耗很小, 并且服务端的错误完全不会影响到客户端	因为图片url 请求 ，会有长度限制

图片资源懒加载

好处	缺点
减少非必须资源请求（省钱 cdn 是花钱的）	无

• 图片转base64
  

优势：小图片转base64 减少接口请求，没有跨域问题，不用考虑浏览器缓存这些，缺点：如果放在css 里面 会增加cssOM 时间

其他 CDN,接口请求，就不吹了哈