4.DNS解析

接下来是关于DNS的解析。有时候我们登入页面，对用户可能点的地方相对而言是比较难探测到，当然有时候我们会做一些埋点来探知用户下一步行为大部 分是往里走。但有些情况下，我们不知道用户下一步具体会走到哪一个页面的时候，但是我们知道他要走到哪一个域。这个时候，我就可以预解析DNS。因为实际 上，整个页面的请求过程中间有一个很长的DNS的解析过程，如果说这个我们提前做了，就可以更进一步让用户看到这一页面。

以下是Q+壁纸的案例。Q+壁纸是Q+某一个系统系统，首先Q+整个的架构是基于WEB + 客户端。我们现在看到的就是一个WEB的页面，虽然它外面是一个客户端的壳，但是它的心是WEB的。整个过程在我们第一次在完成的时候，因为图片比较多， 所有的静态资源是分配到十几个静态服务器上。也就是说，如果我要去拉的时候，我就要解析10个DNS，这个时间是相当耗时的，最慢的时候可能会延迟几秒 钟，这是我们肉眼能感觉到的。如果进行DNS预解析，因为本身资源我不知道具体是哪一个，所有图片都是随机的，所以我们只能说在DNS预解析上下功夫，来 提升它的速度。这样的话，从原来可能需要2秒钟，我就变成1秒钟。

接下来讲Q+中的应用。我们会像QQ里面一样，QQ里面跟Q+都有很多文字链，就是窗口的左下角有一个文字APP信息的推送。这边是通过WEB时时 去拉取后端，后端拉取过来然后在前台显示。但是在某一个时期，其实所有的APP它一共推送的运营信息是固定的。如果说按某个具体APP去分析每个文字链对 应数组的话，这个时候是非常大数据。因为这里一个就大概有达到三四百个字节，从优化的角度说，我们把这些每次拉区过来的存在本地。再存上本地的 localStorage，我们是同一域，所有的APP之间的信息都是可以相互访问的。然后就是把所有拉过的ID，就不会再重新拉一遍。

在这里也有一个需要注意的点，localStorage目前很多厂商的实现是同步的。如果你大量地调用localStorage这个接口，实际上他 会阻塞你的渲染进程。这个时候，当用户往下拖动页面的时候，然后你这个时候又正好在做存储数据，这个数据又比较大，这个时候用户就会感觉你这个页面非常 卡。之前他们都有讨论这个问题，本身这个接口的设计IE是设计成异步的，他们设计是成同步。这个会导致在调这个借口的时候，假设你程序比较多，因为有一个 序列化的过程，序列到磁盘。这样的话，整个过程就会显得比较慢。再加上本身localStorage可以做不同的窗口之间共享这个数据，它会在这个数据上 加锁。如果大量地数据在调用这个本地接口，它就会显得比较卡。所以目前没有什么特别好的解决方案，但是这是需要记住的。即使说目前最大的五点多兆，如果你 用了五点多兆，会让用户很悲催。因为你如果一去调用这个借口，用户在拖用鼠标，就觉得非常卡。

5.离线存储

接下来讲离线存储在性能方面给用户带来的好处。首先是进离线存储的定义文件，在Q+中所有的系统模块，都是有定义离线支持。就是说所有的应用，如果 网断了，还是可以用。在文档中加入MANIFEST的文件，MANIFEST是一个定义文件，声明当前页面哪些是需要存储在本地的？哪些是不需要存储的？ 哪些如果说请求失败，应该用哪些新的图片或者什么来代替？这样分三块：

第一，CACHE，哪些需要存储到本地。

第二，NETWORK，是不会存储在本地的，它每次都回去请求一遍但是这里需要指出的是，本地存储跟浏览器存储实际上是两回事情，他们存的是两块不 同的地方。即使NETWORK这边需要告诉APP说，我需要每次都拉一次，因为像Chrome，他这个存储缓存是非常可恶的，比较难清除的，必须通过手动 去清除，才能完全生效。所以说你即使设置了不要让它存储在本地，但是浏览器可能本身把它存储起来了，因为他存的是两块不同地方。

第三，FALLBACK。如果说一个图片假如说请求失败，它是404。那要用什么图片代替？我觉得这个比较好玩。

MAEIFEST怎么设置？ MANIFEST这里需要注意的是三点：

MANIFEST同源限制；

MIME类型必须为text/cache-manifest，这是标准的，如果是其他格式，都不会生效；

CHROME，如果要看这个东西有没有生效，可能通过CHROME这个伪协议的方式在浏览器输入，chrome://appcache-internals。

关于如何去更新应用的缓存。为什么要离线存储？离线存储在本地，当浏览器知道你有离线存储你，它会首先去离线存储的目录下，去找这个资源是否已经被 Cache。当它已被Cache的时候，他就直接从这边拿到这个资源，不会再去发送一个请求。因为浏览器的请求是这样的，当有离线存储的话，就连请求都不 会发，所以说会更快。 如果说有的时候我们需要更新，更新的时候怎么办？

用户可以手动去清除浏览器的Cache，这个时候自动把本地存储给清除了。

修改MANIFEST的任何内容，这是比较推荐的方式，也是我们线上用的方式。就是说我们可以修改里面的的具体项目，但是这里应该最好是修改注释， 因为我每次发布的时候，我们自动发布机制，发布的时候在上面注释修改一下就可以了。这样的话，每次发布的内容，都会实时同步到客户端的本地；

通过程序去执行，程序的就是window.applicationCache.update()。就是我要去操作离线存储，其实我有时候叫应用存储，因为它的语意就是应用存储。我们去手动的更新应用存储。