浏览器缓存

Cache 虽然是在 SW 中定义的，但是我们也可以直接在 window 域下面直接使用它。它通过 Request/Response 流（就是 fetch）来进行内容的缓存。 概览 每个域名可以有多个 Cache Object，具体我们可以在控制台中查看： 并且 Cache Object 是懒更新，实际上，就可以把它比喻为一个文件夹。如果你不自己亲自更新，系统是不会帮你做任何事情的。对于删除也是一样的道理，如果你不显示删除，它会一直存在的。不过，浏览器对于每个域名的 Cache Object 数量是有限制的，并且，会周期性的删掉一些缓存信息。最好的办法，是我们自己管理资源，官方给出的建议是: 使用版本号进行资源管理。 service worker中删除特定版本的缓存资源： 12345678910111213 self.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (cacheWhitelist.indexOf(key) === -1) { return caches

Cache 虽然是在 SW 中定义的，但是我们也可以直接在 window 域下面直接使用它。它通过 Request/Response 流（就是 fetch）来进行内容的缓存。 概览 每个域名可以有多个 Cache Object，具体我们可以在控制台中查看： 并且 Cache Object 是懒更新，实际上，就可以把它比喻为一个文件夹。如果你不自己亲自更新，系统是不会帮你做任何事情的。对于删除也是一样的道理，如果你不显示删除，它会一直存在的。不过，浏览器对于每个域名的 Cache Object 数量是有限制的，并且，会周期性的删掉一些缓存信息。最好的办法，是我们自己管理资源，官方给出的建议是: 使用版本号进行资源管理。 service worker中删除特定版本的缓存资源： 12345678910111213 self.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (cacheWhitelist.indexOf(key) === -1) { return caches

代理服务可简单的分为正向代理和反向代理: 正向代理: 用于代理内部网络对 Internet 的连接请求(如 VPN/NAT),客户端指定代理服务器,并 将本来要直接发送给目标 Web 服务器的 HTTP 请求先发送到代理服务器上, 然后由代理服务 器去访问 Web 服务器, 并将 Web 服务器的 Response 回传给客户端: 反向代理: 与正向代理相反,如果局域网向 Internet 提供资源,并让 Internet 上的其他用户可以 访问局域网内资源, 也可以设置一个代理服务器, 它提供的服务就是反向代理. 反向代理服 务器接受来自 Internet 的连接,然后将请求转发给内部网络上的服务器,并将 Response 回传给 Internet 上请求连接的客户端: 二、 什么是 nginx 1、 nginx 简介 Nginx 是一款轻量级的网页服务器、反向代理器以及电子邮件代理服务器。因它的稳定性、 丰富的功能集、示例配置文件和低系统资源的消耗而闻名。 Nginx（发音同 engine x），它是 由俄罗斯程序员 Igor Sysoev 所开发的。起初是供俄国大型的门户网站及搜索引擎 Rambler （俄语：Рамблер）使用。此软件 BSD-like 协议下发行，可以在 UNIX、 GNU/Linux、 BSD、 Mac OS X、 Solaris，以及

　 　web缓存大致可以分为：数据库缓存、服务器缓存（代理服务器缓存、CDN缓存）、浏览器缓存。其中浏览器缓存包含：HTTP缓存、indexDB、cookie、localstorage等。 　　在具体了解HTTP缓存之前先来明确几个术语： 　　　　缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态下是越高越好。 　　　　过期内容：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或验证缓存的内容是否仍然准备。 　　　　验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。 　　　　失效：失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。 　　浏览器缓存主要是HTTP协议定义的缓存机制。 　　　　HTML meta标签，例如<META HTTP-EQUIV="Pragma" CONTENT="no-store">，含义是让浏览器不缓存当前页面。但是代理服务器不解析HTML内容，一般应用广泛的是用HTTP头信息控制缓存。 1.什么是浏览器缓存？ 　　浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一个页面时，浏览器就可以直接从本地磁盘加载文档。 2.缓存规则解析 　　我们认为浏览器存在一个缓存数据库，用于存储缓存信息。在客户端第一个请求数据时

1、大型网站架构的发展史（红字就是每一步发展历程的关键） （1）从一个小网站发展起来， 一台服务器，应用程序、数据库、文件等所有资源都在一台服务器上 （2）网站业务的发展，一台服务器逐渐不能满足需求，因此要将 应用和数据分离，应用和数据分离后使用三台服务器：应用服务器、文件服务器和数据库服务器 （3）网站进一步发展，数据库压力太大导致访问延迟，因此 使用缓存该改善网站性能（记住，使用缓存是改善网站性能的第一步） ，网站使用的缓存分为两种：缓存在应用服务器上的本地缓存和缓存在专门的分布式缓存服务器上的远程缓存 （4）使用缓存，数据库访问压力得到有效缓解，但是在网站访问高峰期应用服务器还是成为了整个网站的瓶颈。这种时候要理解， 不要企图去更换更强大的服务器，对大型网站而言，不管多么强大的服务器，都满足不了网站持续增长的业务需求 ，因此可以 通过增加服务器的方式改善负载压力 ，再通过负载均衡调度服务器，将来自用户浏览器的访问请求分发到应用服务器集群中的某台服务器上 （5）虽然使用缓存可以使大部分数据不走数据库，但是缓存没有命中、缓存过期的数据还是会走数据库，网站达到一定规模之后，数据库读写压力还是会很大，成为网站的瓶颈。此时可以 使用数据库读写分离来改善数据库负载压力，应用服务器写数据走写库，应用服务器读数据走读库 ，目前大部分主流数据库都提供主从热备功能，通过配置两台数据库主从关系

FE-interview 个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习，目录如下，通过文档内搜索目录可快速定位章节 $HTML， HTTP，web 综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些 SEO 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 重要内容不要用 js 输出：爬虫不会执行 js 获取内容 少用 iframe：搜索引擎不会抓取 iframe 中的内容 非装饰性图片必须加 alt 提高网站速度：网站速度是搜索引擎排序的一个重要指标 web 开发中会话跟踪的方法有哪些 cookie session url 重写 隐藏 input ip 地址 <img> 的 title 和 alt 有什么区别 title 是 global

作者：antwang juejin.im/post/5aa09bb3f265da238f121b6c 前言 Nginx日志对于统计、系统服务排错很有用。 Nginx日志主要分为两种： access_log(访问日志)和error_log(错误日志)。通过访问日志我们可以得到用户的IP地址、浏览器的信息，请求的处理时间等信息。错误日志记录了访问出错的信息，可以帮助我们定位错误的原因。 本文将详细描述一下如何配置Nginx日志。 设置access_log 访问日志主要记录客户端的请求。客户端向Nginx服务器发起的每一次请求都记录在这里。客户端IP，浏览器信息，referer，请求处理时间，请求URL等都可以在访问日志中得到。当然具体要记录哪些信息，你可以通过log_format指令定义。 语法 access_log path [format [buffer=size] [gzip[=level]] [flush=time] [if=condition]]; # 设置访问日志 access_log off; # 关闭访问日志 path 指定日志的存放位置。 format 指定日志的格式。默认使用预定义的combined。 buffer 用来指定日志写入时的缓存大小。默认是64k。 gzip 日志写入前先进行压缩。压缩率可以指定，从1到9数值越大压缩比越高，同时压缩的速度也越慢。默认是1

本系列七篇文章列表如下： 微服务实战（一）：微服务架构的优势与不足 微服务实战（二）：使用API Gateway 微服务实战（三）：深入微服务架构的进程间通信 微服务实战（四）：服务发现的可行方案以及实践案例 微服务实践（五）：微服务的事件驱动数据管理 微服务实践（六）：选择微服务部署策略 微服务实践（七）：从单体式架构迁移到微服务架构 【编者的话】本系列的第一篇介绍了微服务架构模式。它讨论了采用微服务的优点和缺点，除了一些复杂的微服务，这种模式还是复杂应用的理想选择。 当你决定将应用作为一组微服务时，需要决定应用客户端如何与微服务交互。在单体式程序中，通常只有一组冗余的或者负载均衡的服务提供点。在微服务架构中，每一个微服务暴露一组细粒度的服务提供点。在本篇文章中，我们来看它如何影响客户端到服务端通信，同时提出一种API Gateway的方法。 假定你正在为在线购物应用开发一个原生手机客户端。你需要实现一个产品最终页来展示商品信息。 例如，下面的图展示了你在亚马逊Android客户端上滑动产品最终页时看到的信息。 虽然这是一个智能手机应用，这个产品最终页展示了非常多的信息。例如，不仅这里有产品基本信息（名字、描述和价格），还有以下内容： 购物车中的物品数 低库存警告 各式各样的推荐，包括经常跟这个物品一起被购买的产品

清理网站缓存的几种方法 meta方法 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="0"> 清理form表单的临时缓存 <body onLoad="javascript:document.yourFormName.reset()"> jquery ajax清除浏览器缓存 方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下: $.ajax({ url:'www.haorooms.com', dataType:'json', data:{}, beforeSend :function(xmlHttp){ xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.setRequestHeader("Cache-Control","no-cache"); }, success:function(response){ //操作 } async:false }); 方法二，直接用cache:false, $

一、缓存系统 一、静态web页面： 1、在静态Web程序中，客户端使用Web浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给Web服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过Web服务器返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。 2、为了让静态web页面显示更加好看，使用javascript／VBScript／ajax（AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。）但是这些特效都是在客户端上借助于浏览器展现给用户的，所以在服务器上本身并没有任何的变化。 3、静态web无法连接数据库； 4、静态web资源开发技术：HTML； 5、由于现在的web页面中，大量使用JS，导致浏览器打开页面，就会占用大量的内存，服务端的压力是减轻了，但压力转移到了客户端。 二、动态web页面： 1、动态WEB中，程序依然使用客户端和服务端，客户端依然使用浏览器（IE、FireFox等），通过网络(Network)连接到服务器上，使用HTTP协议发起请求（Request）