搜尋
首頁web前端H5教程静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?

移动端完全没有兼容问题,只要写版本更新判断就行。
PC端支持到IE8,不支持则请求。
目前一个新项目准备这样架构,但隐隐担忧有什么致命缺点,因为现在还没有被广泛应用。

回复内容:

谢邀。经常用,所以过来回答一下。

我的看法是:PC上用的价值不大,移动端单页面应用(也有叫webapp)值得尝试。

这里要首先提出一个关于静态资源管理和SEO(搜索引擎优化)方面的关联问题:如果要做SEO,那么CSS必然不能进行LS(localstorage)的本地缓存优化。这个原因很简单:

要进行SEO,必须直接输出完整HTML,因此必须让样式在头部以link标签加载。如果先输出HTML,后用js从本地缓存读取样式再插入,会出现严重的阻塞和闪烁问题,相信正常人是不会这么干的。

然后再更正一件事,就是取出localstorage的代码不一定要eval,eval很evil,一个eval函数很有可能影响整个js文件的压缩(出现eval之后不能对变量名进行替换),当然,我们可以通过一些hack避免这种压缩问题,不过我喜欢这样搞:
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'script'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">code</span> <span class="o">=</span> <span class="s1">'!function(){'</span> <span class="o">+</span> <span class="nx">getCodeFromLocalStorage</span><span class="p">()</span> <span class="o">+</span> <span class="s1">'\n}();'</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">code</span><span class="p">));</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
先说说主要会面临的问题
1、执行速度,读取后使用eval或创建<script>标签的时间会比浏览器直接加载慢。<br>2、版本控制,需要自己写一套版本控制机制。<br>3、localStorage是公共资源,如果你的产品域名下有很多应用共享这份资源会有风险。<br>4、localStorage以页面的域名划分,而常见的静态资源都以资源本身的域名来缓存,意味着如果你的应用有多个等价域名,它们之间的localStorage不互通,会造成缓存多份浪费。<br>5、兼容性需要处理(不支持、隐私模式、写满、http/https、写的正确性等等)<br><br>=====================================<br><b>下面开始胡扯时间!<br>如果上述2、3、4、5你觉得都不是问题的话,1一定程度上是可以量化来评估的。<br><b>方案1:使用原始的缓存机制<br>做静态资源缓存率的收集得到比例:A%<br>完整请求所需时间:t0<br>304所需时间:t1<br>在使用浏览器内建机制的情况下代码执行所需时间:t2<br><b>那么使用浏览器内建机制所需的时间期望就是:T1 = t0 * (1-A%) + t1 * A% + t2<br>* 如果使用expires方式的HTTP缓存可以让t1为0<br><br><b>方案2:使用自定义的localStorage缓存机制<br>做localStorage缓存命中率测试得到比例:B%<br>在使用localStorage读取并执行的情况下代码执行所需时间:t3<br>使用localStorage的缓存命中情况比较复杂,可以稍微梳理一下:<br>1、B%概率命中localStorage,所需时间为t3<br>2、(1-B%)概率未命中localStorage,A%概率命中HTTP缓存,所需时间为t1 + t2<br>3、(1-B%)未命中localStorage,(1-A%)概率未命中HTTP缓存,所需时间为t0 + t2<br>其中2和3加起来就是(1-B%) * T1对吧<br><b>那么使用localStorage缓存机制所需的时间期望就是:T2 = t3 * B% + T1 * (1-B%)<br><br>* 上面忽略了localStorage缓存机制的加载器自己加载的时间、它的逻辑内部消耗和写入localStorage等时间。<br><br><b>不严谨,不过我觉得还是有参考价值的<br>从上面的两个时间上看,我们预期是T2 < T1<br>delta = T2 - T1 = t3 * B% - T1 * B% = (t3 - T1) * B%<br>因为B%肯定>=0,要让delta<0,只要t3比T1小就行了(B%会决定收益有多大)<br>其实说了这么半天,也就是楼上@小爝 所言<br><div class="highlight"><pre class='brush:php;toolbar:false;'>读localstorage再eval的速度比直接加载304缓存在当成js的执行速度要慢,而且不少……呵呵。。。 </pre> 浏览器都帮你缓存好了,干嘛多此一举缓存到LS里?<br>耗费成本是多少?解决了多少问题?价值几何?维护是否方便?是否简单易用?有足够的开发时间么?<br><br>如果你真的很闲,并且要炫酷吊炸天,搞起吧 <span class="invisible">https://<span class="visible">mtjs.github.io/<span class="invisible"><i class="icon-external"><br><br>在快速迭代版本过程中,我们有时候只修改了某个js中的几行代码,却需要用户下载整个js文件,这在重视流量的移动端显得非常浪费,mt独创的增强更新算法实现了修改多少代码就只下载修改代码的功能,为用户和公司节省大量流量<br><br>localstorage里面存储的上个版本的js内容和版本号,当本次版本号和上次版本号不一致的时候,mt拼接出增量文件url去拉取增量文件,并和上个版本的js内容合并生成新版本内容。整个方案得核心在于增量文件得计算和合并<br><br>吊炸天 两年前看到这篇文章,有些启发:<span class="invisible">http://www.<span class="visible">mobify.com/blog/smartph<span class="invisible">one-localstorage-outperforms-browser-cache<span class="ellipsis"><i class="icon-external"><br><br>不过貌似现在这个网站有点问题,我贴几张文章中比较核心的数据比较图,两年前的文章了,不知道现在是否还适用:<br><br><noscript><img class="origin_image zh-lightbox-thumb lazy" src="/static/imghwm/default1.png" data-src="https://pic4.zhimg.com/d8672f62a69ed08093f2d0511ae5f477_b.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="576" data-original="https://pic4.zhimg.com/d8672f62a69ed08093f2d0511ae5f477_r.jpg" alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" >20% trimmed mean results of native browser cache vs localStorage performance. Mean performance for localStorage is always faster than the browser's native cache and for iOS 5 & 6, dramatically so.<img class="origin_image zh-lightbox-thumb lazy lazy" src="/static/imghwm/default1.png" data-src="//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="576" data-original="https://pic4.zhimg.com/d8672f62a69ed08093f2d0511ae5f477_r.jpg" data-actual alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" >20% trimmed mean results of native browser cache vs localStorage performance. Mean performance for localStorage is always faster than the browser's native cache and for iOS 5 & 6, dramatically so.<br><noscript><img class="origin_image zh-lightbox-thumb lazy" src="/static/imghwm/default1.png" data-src="https://pic1.zhimg.com/6302146d6bdfde10d3f07e2a2d3f7ec0_b.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="576" data-original="https://pic1.zhimg.com/6302146d6bdfde10d3f07e2a2d3f7ec0_r.jpg" alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" ><img class="origin_image zh-lightbox-thumb lazy lazy" src="/static/imghwm/default1.png" data-src="//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="576" data-original="https://pic1.zhimg.com/6302146d6bdfde10d3f07e2a2d3f7ec0_r.jpg" data-actual alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" ><noscript><img class="origin_image zh-lightbox-thumb lazy" src="/static/imghwm/default1.png" data-src="https://pic1.zhimg.com/ec659820b44451269920b9fc43555550_b.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="630" data-original="https://pic1.zhimg.com/ec659820b44451269920b9fc43555550_r.jpg" alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" ><img class="origin_image zh-lightbox-thumb lazy lazy" src="/static/imghwm/default1.png" data-src="//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg" data-raw style="max-width:90%" data-raw style="max-width:90%" width="630" data-original="https://pic1.zhimg.com/ec659820b44451269920b9fc43555550_r.jpg" data-actual alt="静态资源(JS/CSS)存储在localStorage有什么缺点?为什么没有被广泛应用?" ><br><br>stdDev 是标准方差的意思。<br><br><br>另外说到容量问题,之前貌似是5mb,不知道现在啥情况了- - 目前主流的网站的静态文件都使用了缓存,比如在 nginx 中只需要加几行配置就可以实现。只要浏览器不清空,某个固定链接的静态文件只需要加载一次。除非文件链接改变后,或者页面强制刷新,浏览器才会从服务器端重新读取静态文件。<br>从这个方面看,使用 localStorage 和传统缓存实际上是差不多的,并不能带来较明显的好处。另外还要考虑改造成本和兼容性等。<br><br>而一些移动站点(貌似包括腾讯首页)是使用 localStorage 来存储 js/css 静态文件,每次 js/css 升级时,只需要从服务器端获取一份包含静态文件变动信息的文件就好了。这样避免了静态文件升级一次,浏览器就要从服务器完整地加载一份新版本的静态文件。<br>如此采取 localStorage,可以为移动用户节省一些流量。<br><br>但是后面的这种方式有一定成本和门槛。<br><br>以上抛个砖。 是时候做广告了,基于localstorage的js存储更新解决方案,可以做到字符级别的资源增量更新:mtjs/mt · GitHub<i class="icon-external"> 偶凑热闹的,碎碎念几句。<br><br>首先不是移动端完全没有兼容问题,问题还是有的。<br>1、Safari 处于隐私模式时,LS set 数据会抛异常<br>2、不同移动端浏览器,对单次set数据大小是有区别的,印象(懒得换机器查PPT了)中是 3-5M 不等<br>3、不同移动端浏览器对LS总容量大小是有区别的,印象(懒得换机器查PPT了)中是 5-10M 不等(这里指的是单子域限制)<br><br>其次,IE 上可以封装userData作为兼容。<br><br>最后,关键不在于LS,而在LS的控制是个问题。<br>如:<br>1、一个项目,LS 任何人可CURD。其中值被其他功能修改以及删除很有可能,导致难查找的问题。<br>2、多人写LS,可能会写满,LS 总量控制如何监控,不超限<br>3、LS 过期问题,都写LS,过期机制是怎么样的,过期了优先删除哪些腾出空间<br>4、都没过期的情况下,有新数据进来,删除哪些腾出空间<br>5、如有LS控制器封装控制以上问题,但第三方代码(如接入的广告js)不使用控制器直接写LS如何处理 ls叫做本地存储,不叫本地缓存loadcache,还是有他一定道理的。证明他更多的作用在于存储数据,而不是缓存资源!HTML5针对缓存已经有了一套方案。其次,把js,CSS代码存在ls,意义不大。把其中的数值存在ls,意义会更大些。因为ls在用户浏览器中,有些交互体验的个性数值,你可以存在ls中。或者APP形式的页面更有意义了。把东西用得恰到好处,叫充分利用资源。避免弄巧成拙。 localStorage是一个js对象,而浏览器的缓存技术是基于浏览器的。<br>你说是js快还是浏览器快。 </script>
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5:網絡開發的新功能和功能H5:網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力,極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5:HTML5的關鍵改進H5:HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進:1.語義化標籤提升了代碼清晰度和SEO效果;2.多媒體支持簡化了視頻和音頻嵌入;3.表單增強簡化了驗證;4.離線與本地存儲提高了用戶體驗;5.畫布與圖形功能增強了網頁的可視化效果。

HTML5:標準及其對Web開發的影響HTML5:標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等,提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage,支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性,簡化處理和驗證。

H5代碼示例:實際應用和教程H5代碼示例:實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能,極大地增強了前端開發的能力。 1.多媒體支持:通過和元素嵌入媒體,無需插件。 2.畫布(Canvas):使用元素動態渲染2D圖形和動畫。 3.本地存儲:通過localStorage和sessionStorage實現數據持久化存儲,提升用戶體驗。

H5和HTML5之間的連接:相似性和差異H5和HTML5之間的連接:相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一個版本,包含新元素和API;H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼,H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎:密鑰元素及其目的H5代碼的基礎:密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5:了解常見用法HTML5和H5:了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5:現代網絡的基礎(H5)HTML5:現代網絡的基礎(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具