Web 性能优化（一）——使用 localStorage

localStorage 的意义

为了针对我的网站提供更好的浏览体验（或者说更接近原生 App 的用户体验），在之前我就已经开启了 Service Worker 技术，针对离线或者网速慢的情况下改善用户体验。但只有少数几个浏览器支持 （Chrome、Firefox、Opera），对目前手机端用户数最多的 QQ 浏览器、UC 浏览器却没有支持，也就是说该方法针对 QQ 浏览器和 UC 浏览器并没有什么实际优化。

而且对于 Service Worker，它并不能减少你的 HTTP 连接数量，只是拦截你的请求，减少 Stalled、Request sent 和 TTFB 的时间，见下图：

针对以上两个问题，本博客采用另一种 HTML5 新技术 —— localStorage。

localStorage 简介

localStorage 是在 HTML5 中新引进的一项存储技术，（如果不被清除）存储没有时间限制，但是有大小限制，一般（不同浏览器的限制有所差别）对于每个域名是 5 MB，对于存储一些纯字符串脚本，足够了。且目前大部分主流浏览器均支持此项技术。

但是需要注意，Service Worker 是可以将所有的 HTTP 请求全部拦截，无论服务器的 Response Headers 中的 Content-Type 是什么类型都可以拦截从本地加载。而 localStorage 仅能存储静态资源（JavaScript/CSS）。

而存储在 localStorage 的中的静态资源所带来的优点就在于再次加载时不需要发起 HTTP 请求（Queueing、Stalled、Request sent、TTFB、Content Download 这些都不需要），这可以大大改善不支持 SW 技术的浏览器在访问我网站时的浏览体验。

本博客的实践

本博客采用的是 basket.js方案，将 JavaScript 在 localStorage 中，利用 localStorage 的特性，减少 HTTP 连接的次数，以达到改善页面加载体验的目的。

目前（2018/09）得益于新主题的 SPA 特性，我已经移除 localStorage 的功能了：一方面是因为用户每次点击并不用重新请求 JavaScript 和 CSS 和 HTML，存储 JavaScript 有些没必要；另一方面是 localStorage 还存在安全隐患，故暂时去除 localStorage。

为了避免每次刷新页面 main.css 加载先后页面出现抖动的问题，默认不将 main.css 放入 localStorage 中存储。

另一个问题是 NexT 在设计之初就很依赖于 js（会加载大量的 js 文件），而这些 js 文件的加载顺序是有要求的，jquery 必须优先被加载，否则就会出现奇怪的 bug，好在 basket.js 提供了控制加载先后顺序的方案。

危险性

在这篇知乎回答中，很详细的列出了 localStorage 的优点和缺点。

其中最危险的是网站出现 XSS 漏洞，就会被人利用将恶意代码注入到 localStorage 中，导致即便修复了 XSS 漏洞存储的代码依然是被篡改的。

好在 basket.js 可以提供将 localStorage 中的代码重新从网络加载的问题。具体见官方文档。