浏览器缓存

http://zimg.buaa.us/ GitHub Start超过2.5K。 zimg 是一套国人针对图片处理服务器而设计开发的开源程序，目的是解决图片服务中如下三个问题： 大流量：对于一些中小型网站来说，流量问题就是成本问题，图片相对于文本来说流量增加了一个数量级，省下的每一个字节都是白花花的银子。所以凡是涉及到图片的互联网应用，都应该统筹规划，降低流量节约开支。 高并发：高并发的问题在用户量较低时几乎不会出现，但是一旦用户攀升，或者遇到热点事件，比如网站被人上传了一张爆炸性的新闻图片，短时间内将会涌入大量的浏览请求，如果架构设计得不好，又没有紧急应对方案，很可能导致大量的等待、更多的页面刷新和更多请求的死循环。总的来说，就是要把图片服务的性能做得足够好。 海量存储：在介绍Facebook图片存储的文章里提到，当时Facebook用户上传图片15亿张，总容量超过了1.5PB，这样的数量级是一般企业无法承受的。虽然很难做出一个可以跟Facebook比肩的应用，但是从架构设计的角度来说，良好的拓展方案还是要有的。需要提前设计出最合适的海量图片数据存储方案和操作方便的拓容方案，以应对将来不断增长的业务需求。 以上三个问题，其实也是相互制约和钳制的，比如要想降低流量，就需要大量的计算，导致请求处理时间延长，系统单位时间内的处理能力下降；再比如为了存储更多的图片，必然要在查找上消耗资源

jquery.cookie.js插件 轻量级cookie管理 1°下载地址：http://plugins.jquery.com/cookie/ 2°引入方式：(基于jquery) <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> 3°调用方式： 1）//新增cookie： $.cookie('cookieName', 'cookieValue'); 注：如果没有设置cookie的有效期，则cookie默认在浏览器关闭前都有效，故被称为"会话cookie"。 2）//创建一个cookie并设置有效时间为7天: $.cookie('cookieName', 'cookieValue', { expires: 7 }); 3）// 创建一个cookie并设置cookie的有效路径： $.cookie('cookieName', 'cookieValue', { expires: 7, path: '/' }); 注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径

部署环境： 主机 ip地址 操作系统 nginx 172.16.1.100 CentOS 7.3 php+memcache 172.16.1.110 CentOS 7.3 Mysql 172.16.1.120 CentOS 7.3 memcached 172.16.1.130 CentOS 7.3 一， 环境准备： 搭建LNMP环境（动态解析） 1，安装nginx 1）安装依赖工具包： [root@nginx-server ~]# yum -y install gcc* pcre-devel openssl-devel zlib-devel make vim 2）创建nginx用户组和用户： [root@nginx-server ~]# groupadd -r nginx && useradd -r -g nginx -s /bin/false -M nginx 3）解压源码包，配置&&编译安装： [root@nginx-server ~]# tar zxf nginx-1.8.0.tar.gz [root@nginx-server ~]# cd nginx-1.8.0 [root@nginx-server nginx-1.8.0]# ./configure --help ##可以查看自己需要的模块 --with，或取消的模块–without #根据自己的需求添加不同的模块

在vue中有个很好用的组件<keep-alive>，但是在react中官方却没有提供，可以使用react-keeper插件来实现 项目实践 使用React-Keeper还是要慎重，react-keeper加上会出现两个问题：1.状态缓存了，如果很多页面都是列表，这代表每个页面都有缓存数据，下次进入页面的时候会展示离开时的状态，那么缓存的数据量也不少，会占用浏览器内存，性能肯定会有影响，什么时候清除是个问题。插件提供了cache='parent'为父组件缓存，在父组件不解绑的情况下会维持缓存状态。那么要解决的话就要有个父组件，如果父组件是最外层组件，不会解除，那么就要改变路由了，但插件并没有提供手动消除缓存的方式，使用起来很不灵活，而且会与router3 link有些不同，总之挺麻烦的。2.样式问题，页面回来时，有些样式会缺失，利用生命周期可以解决，但componentDidMount不会执行，componentWillUpdate、render和 componentDidUpdate，如果你在这些周期里面改变数据状态，那么组件周期将一直循环下去，浏览器性能大受影响！ 下面就是转载的内容了 了解React的同学一定了解React-Router，这个几乎是React单页面应用必备的路由框架。如果有足够多的开发经验，你一定会发现React-Router的很多问题，比如：没有页面缓存

绪言A：前端性能的重要性 性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余80%~90%时间花在了下载页面中的所有组件上。 规则1：减少HTTP请求 图片地图 图片地图允许在一个图片上关联多个URL，目标URL的选择取决于用户点击了图片上的哪个位置。 图片地图有两种类型 服务器端图片地图：将用户点击提交到服务端，并向其传递用户点击的x、y坐标。Web应用程序将x、y映射为适当的操作。 客户端图片地图：通过HTML的MAP标签实现。 CSS Sprites 任何支持背景图片的HTML元素都能CSS Sprites，通过background-image和background-position来实现。 内联图片 通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。 data:[<mediatype>][;base64],<data> 由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存 合并脚本和样式表 规则2：使用内容发布网络（CDN） 如果应用程序Web服务器离用户更近，则一个HTTP请求响应时间将缩短。另一方面，如果组件Web服务器离用户更近，则多个HTTP请求的响应时间将缩短。 内容发布网络 内容发布网络是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。 优点： 缩短响应时间

在PC浏览器的地址栏输入一串URL，然后按Enter键这个页面渲染出来，这个过程中都发生了什么事? 1、首先，在浏览器地址栏中输入url，先解析url，检测url地址是否合法 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求； 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)； 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存； ISP缓存：若上述均失败，继续向ISP搜索。 3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。 5、握手成功后，浏览器向服务器发送http请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器 7、浏览器收到HTTP响应 8、浏览器解码响应，如果响应可以缓存，则存入缓存。 9、 浏览器发送请求获取嵌入在HTML中的资源（html，css，javascript，图片，音乐······），对于未知类型，会弹出对话框。 10、 浏览器发送异步请求。 11、页面全部渲染结束。 来源： https://www.cnblogs

在上传应用的时总是卡住提示 “Authenticating with the App Store” ，尝试了多次还是不行，使用其他方式 Transporter 提交，同样卡住不动，提示 “正在验证 APP - 正在通过App Store进行认证…”。 原因 1、在上传 ipa 文件时需要使用 java 程序的 iTMSTransporter 处理。 2、在第一次上传应用时，iTMSTransporter 需要从 Internet 下载一组 jar 文件并将其缓存在本地文件夹中。我们遇到的问题就是卡在了这一步，下载不下来！ 传包卡在authenticating with the app store 情况下，可以尝试： 1、更换网络，比如手机热点 2、不同的上传方式，xcode、Transporter.app、fastlane 3、参考以下步骤删除缓存 解决方法 XCode11 及以上解决方法： iTMSTransporter 文件位置： XCode 中位置： /Applications/Xcode.app/Contents/SharedFrameworks/ContentDeliveryServices.framework/itms/bin/iTMSTransporter 或者在 Transporter 中位置： /Applications/Transporter.app

使用localstorage最大的好处很多,一个很基本的就是,存储的数据量比较大 另外它存储的值,只能是字符串,所以如果你想存入什么对象,或者数组,就不行了..不过可以把对象转为json字符串存储 所以一般用法就是先调用window.storage,把数据对象->字符串,字符串存值,使用setItem方法 var storage=window.localStorage; var bookcase={"0":data};//定义好对象 //对象转为json字符串 bookcase_str=JSON.stringify(bookcase); //localstorage存储键值 storage.setItem('bookcase',bookcase_str); 取值的话呢,也很方便啦,也就是getItem方法,然后把字符串换位对象,就完事儿了... var storage=window.localStorage; if(storage.getItem("bookcase")){ //获取值,转化为对象 var bookcase_str=storage.getItem("bookcase"); var bookcase_obj=JSON.parse(bookcase_str); } 就是勒么的方便,下面就是自己代码中的一些实际操作. function LastRead(){ var

Cache-control 1.public： 所有内容都将被缓存（客户端和代理服务器都可缓存） 。具体来说响应可被任何中间节点缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。 private：所有内容**只有客户端可以缓存，Cache-Control的默认取值。**具体来说，表示中间节点不允许缓存，对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。 no-cache：客户端缓存内容**，是否使用缓存则需要经过协商缓存来验证决定。表**示不使用 Cache-Control的缓存控制方式做前置验证， 而是使用 Etag 或者Last-Modified字段来控制缓存 。需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后， 并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。 no-store：所有内容都不会被缓存，即不使用强制缓存

这里的静态文件指的是图片、js、css 等文件，用户访问一个站点，其实大多数元素都 是图片、js、css 等，这些静态文件其实是会被客户端的浏览器缓存到本地电脑上的，目的 就是为了下次再请求时不再去服务器上下载，这样就加快了速度，提高了用户体验。但这些 静态文件总不能一直缓存，它总有一些时效性，我们改就是这个过期时间，配置如下： <IfModule mod_expires.c> ExpiresActive on ExpiresByType image/gif "access plus 1 days" ExpiresByType image/jpeg "access plus 24 hours" ExpiresByType image/png "access plus 24 hours" ExpiresByType text/css "now plus 2 hour" ExpiresByType application/x-javascript "now plus 2 hours" ExpiresByType application/javascript "now plus 2 hours" ExpiresByType application/x-shockwave-flash "now plus 2 hours" ExpiresDefault "now plus 0 min" <