总篇10篇00年第7篇
前言
谈到Wb性能优化，这本身是一个很"大"的话题。依稀记得几年前初入前端时，业界曾盛行流传的“雅虎5条军规”，还有通过雪碧图来减少浏览器的请求数量，再有通过语义化的方式对前端代码的编写来提升SEO的优化等等，这些都是针对前端性能的优化策略。再到近些年Nod.js的横空出世，ES规范的普及，前端工程化、模块化的大行其道，很多基础的性能优化策略逐渐被工具所替代，我们似乎从刀耕火种的年代中解放了出来。
然而，我们依然面临着新的性能优化的方向，比如：如何规避页面的回流与重构如何合理的模块化代码并打包如何配置构建工具提升打包效率如何解决页面首次加载白屏问题如何利用缓存提升优化Wb性能等等...
由此看来，我们可以从渲染层、构建层、网络层等多个维度出发，提出诸多优化的方向。在这里，我们无法通过一篇文章涵盖到所有的技术点。本次，我们将会以HTTP层为切入点，谈一谈我们似懂非懂的---HTTP缓存。缓存是在前端性能优化中简单而又高效的优化策略之一，希望通过这篇文章能够涵盖HTTP缓存相关知识的方方面面。本文内容大致如下：
概念
引用维基百科中的定义：
Wb缓存（或HTTP缓存）是用于临时存储（缓存）Wb文档（如HTML页面和图像），以减少服务器延迟的一种信息技术。Wb缓存系统会保存下通过这套系统的文档的副本；如果满足某些条件，则可以由缓存满足后续请求。Wb缓存系统既可以指设备，也可以指计算机程序。提到缓存在Wb开发中的应用，通常有：数据库缓存DNS缓存代理服务器缓存浏览器缓存
甚至，在应用层面，我们还可以通过JS的闭包方式缓存到本地一个变量，比如：在单例设计模式中只会缓存并保留一个实例。
优点
引用Chrom在性能优化方面给出的建议：
通过网络提取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。
由此，我们可以加以总结出以下几点：
加快了页面的渲染和呈现，提升了用户体验和Wb性能。减少了冗余的数据传输，节省了服务器带宽和流量。尤其在高并发、大流量的场景下，降低了对原始服务器的负担。按照位置分类SrvicWorkrSrvicWorkrs本质上充当Wb应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。同时，出于安全的考量，它只能由线上HTTPS或本地localhost承载。与缓存相关的特性独立于浏览器主线程之外，可以控制页面所有的请求。被install后就永远存在，除非被手动卸载。可以通过ftchapi，来拦截网络和处理网络请求，配合cachStorag来实现Wb页面的缓存管理。注册srvicworkr
//检测浏览器是否支持srvicWorkrAPIif(srvicWorkrinnavigator){navigator.srvicWorkr.gistr(/sw.js).thn(function(gistration){//注册成功consol.log(SrvicWorkrgistrationsuccssfulwithscop:,gistration.scop);}).catch(function(rr){//注册失败consol.log(SrvicWorkrgistrationfaild:,rr);});}
安装
//缓存文件的版本constVERSION=v1;//需要缓存的页面文件constCACHE_FILES=[js/app.js,css/styl.css];//slf是在SrvicWorkr下的全局APIslf.addEvntListnr(install,function(vnt){//监听workr的install事件vnt.waitUntil( //延迟install事件直到缓存初始化完成 nwPromis(function(){ //Cach和CachStorag都是SrvicWorkrAPI下的接口 //我们可以直接使用全局的cachs属性访问CachStorag cachs.opn(VERSION) .thn(function(cach){ consol.log(Opndcach); turncach.addAll(CACHE_FILES); }) //更新sw时,跳过waiting slf.skipWaiting(); }));});
如果所有的文件都缓存成功，Srvicworkr就安装成功了。如果任何一个文件下载失败，那么安装步骤就会失败。这个方式依赖于你自己指定的资源，但这意味着，你需要非常仔细地确定哪些文件需要被缓存。指定了太多文件的话，会增加失败率。缓存更新
slf.addEvntListnr(activat,function(vnt){vnt.waitUntil(cachs.kys().thn(function(cachNams){turnPromis.all(cachNams.map(function(cachNam){//如果当前版本和缓存版本不一致if(cachNam!==VERSION){turncachs.dlt(cachNam);}}));}));});
拦截请求
//在ftch事件里能拦截网络请求，进行一些处理slf.addEvntListnr(ftch,function(vnt){vnt.spondWith(cachs.match(vnt.qust).thn(function(spons){//如果匹配到缓存里的资源，则直接返回if(spons){turnspons;}turnftch(qust).thn(function(
转载请注明：http://www.qianzhongdushijian.com/jdff/6614.html
当前位置： 铅中毒事件 > 急性铅中毒复发 > 从前端优化角度谈一谈缓存
