让我们再聊聊浏览器资源加载优化

　　几乎每一个前端程序员都知道应该把script标签放在页面底部。关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中，他之所以建议这么做是因为：

Put all '); var self = this; /* 并且3s后再请求一次，但这次请求的目的是为了获取jquery源码，写入localstorage中(见下方的_loadjs函数) 这次“一定”走缓存，不会发出多余的请求 为什么会延迟3s执行？为了确保通过document.write请求jQuery已经加载完成。但很明显3s也并非一个保险的数值 同时使用document.write也是出于需要故意阻塞的原因，而无法为其添加回调，所以延时3s */ setTimeout(function () { self._loadJs(file, callback) }, 3e3) } else { // 如果可以使用localstorage，则执行注入 this._reject(localStorage.getItem(storagePrefix + "jq"), callback) } }, _loadJs: function (file, callback) { if (!file) { return false } var self = this; var xhr = new XMLHttpRequest; xhr.open("GET", file); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { localStorage.setItem(storagePrefix + "jq", xhr.responseText) } else {} } }; xhr.send() }, _reject: function (data, callback) { var el = document.createElement("script"); el.type = "text/javascript"; /* 关于如何执行LS中的源码，我们有三种方式 1. eval 2. new Function 3. 在一段script标签中插入源码，再将该script标签插入页码中 关于这三种方式的执行效率，我们内部初步测试的结果是不同的浏览器下效率各不相同 参考一些jsperf上的测试，执行效率甚至和具体代码有关。 */ el.appendChild(document.createTextNode(data)); document.getElementsByTagName("head")[0].appendChild(el); callback && callback() }, isSupport: function () { return window.localStorage } } }(window, document); ! function () { var url = _GET_HASHMAP ? _GET_HASHMAP("/player/static/js/naga/common/jquery-1.7.2.js") : "/player/static/js/naga/common/jquery-1.7.2.js"; url = url.replace(/^\/\/mu[0-9]*\.bdstatic\.com/g, ""); LocalJs.require(url, function () {}) }();

　　因为桌面端的浏览器兼容性问题比移动端会严峻的多，所以大多数对LS利用属于“做加法”，或者“轻量级”的应用。最后一瞥不同站点在PC平台的对LS的使用情况：

• 比如百度和github用LS记录用户的搜素行为，为了提供更好的搜索建议

  

• Twitter利用LS最主要的记录了与用户关联的信息(截图自我的Twitter账号，因为关注者和被关注者的不同数据会有差异)：
• userAdjacencyList表占40,158 bytes，用于记录每个字关联的用户信息
• userHash表占36,883 bytes，用于记录用户被关注的人信息

  

• Google利用LS记录了样式：

• 天猫用LS记录了导航栏的HTML碎片代码：

　　总结

　　No silver bullet.没有任何一项技术或者方案是万能的，虽然开源社区和浏览器厂商在提供给我们越来越丰富的资源，但并不意味着今后遇见的问题就会越来越少。相反，或许正因为多样性，和发展中技术的不完善，事情会变得更复杂，我们在选择时要权衡更多。我无意去推崇某一项解决方案，我想尽可能多的把这些方案与这些方案的厉害呈现给大家，毕竟不同人考虑问题的方面不同，业务需求不同。

　　还有一个问题是，本文描述的大部分技术都是针对现代浏览器而言，那么如何应对低端浏览器呢？

　　从百度统计这张17个月的浏览器市场份额图中可以看出(当然可能因为不同站点的用户特征不同会导致使用的浏览器分布与上图有出入)，我们最关心的IE6的市场份额一直是呈现的是下滑的趋势，目前已经降至几乎与IE9持平；而IE9在今年的市场份额也一直稳步上升；IE7已经被遥遥甩在身后。领头的IE8与Chrome明显让我们感受到有足够的信心去尝试新的技术。还等什么，行动起来吧！

　　其他参考文献

• Chrome’s preloader delivers a ~20% speed improvement!
• High Performance Networking in Google Chrome
• The real conflict behind and @srcset
• How the Browser Pre-loader Makes Pages Load Faster
• Script downloading in Chrome
• Who’s Afraid of the Big Bad Preloader?
• localStorage Read Performance
• The performance of localStorage revisited
• Storager case study: Bing, Google
• Measuring localStorage Performance
• Application Cache is a Douchebag