浏览器缓存

前端性能优化，目的是为什么？让用户有更友好的体验，让服务商节省可观的资源。 对优化方向进行分类，直接来看表： 优化方向 优化手段 请求数量 CSS Sprites，合并脚本和样式表 请求带宽 使用Gzip压缩传输文件，精简JS文件 缓存利用 使用http缓存，使用CDN，ajax，减少DNS查找 页面结构 样式表放顶部，脚本放底部 代码校验 避免CSS表达式，避免重定向 减少Repaint和Reflow 设置class，脱离文档流，减少dom操作 下面具体解释其中一些优化点： CDN Content Delivery Network 即内容分发网络，CDN把 内容分发 到距离用户近的缓存服务器，然后DNS托管(把DNS解析的地址改成CDN提供的)，DNS服务器根据用户IP地址，将域名解析成相应节点的缓存服务器IP地址，实现 用户就近访问 ，提高网站渲染速度和性能。 减少repaint和reflow 回流与重绘 通过设置class的方式，而不是多次修改元素style属性。 有动画效果的元素可以将position属性设为fixed或absolute。 权衡速度的平滑性，函数节流（自己的理解） 减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。 CSS引用 尽量使用link代替@import，因为link是在页面加载时同时加载，import是等页面加载完再加载。 有关缓存

Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。 浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。 在具体了解 HTTP 缓存之前先来明确几个术语： 缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。 过期内容：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。 验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。 失效：失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。 浏览器缓存主要是 HTTP 协议定义的缓存机制。HTML meta 标签，例如 <META HTTP-EQUIV="Pragma" CONTENT="no-store"> 含义是让浏览器不缓存当前页面。但是代理服务器不解析 HTML 内容，一般应用广泛的是用 HTTP 头信息控制缓存。 浏览器缓存分类 浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下： 浏览器先根据这个资源的http头信息来判断是否命中强缓存。如果命中则直接加在缓存中的资源，并不会将请求发送到服务器。 如果未命中强缓存

我也要谈谈大型网站架构之系列（3）——死了都要说的缓存 　　说到缓存，我想大家跟我一样都很兴奋，当我们遭遇网站性能瓶颈的时候，缓存是一剂强心针，也是一粒紧急妈富隆，从而在优化网站 性能方面冠上了第一定律的帽子，我们前年在做淘应用的时候，就遭遇了性能瓶颈，短时间内采用缓存紧急优化，给我们大优化之前争取了 宝贵的时间。 一：缓存的种类 要说缓存有多少种，太多了，比如浏览器缓存，文件缓存，片段缓存，数据库缓存等等，合理利用这些缓存则能大幅度的提高系统性能， 利用不好反而会偷鸡不成蚀把米，给服务器造成巨大的压力，所以这里就存在一个缓存的使用原则的问题。 二：合理的使用缓存 1. 读写小于10:1的情况下，不适合用缓存，我们用缓存的目的就是想分摊下数据库的压力以及利用内存来提速性能，如果读写差不多，或者 压根就没读过，这样的死数据就会造成内存资源的浪费。 2. 既然是缓存，就注定了它的资源是有限的，宝贵的，也就注定了我们必须合理利用它的内存空间，也就被迫的让我们清楚的认识到热点数据， 　 不易修改的应该放在缓存，反之不宜放。 3. 大公司在缓存方面做的好的地方就是在一个“控”字上，他们会为缓存专门做一套“缓存系统”，当系统预加载的时候，同时也充当内存数据库 使用，将这些元数据加载到缓存系统中，比如“县市区”，“分类信息”等等作为预热数据。 三：分布式缓存 一般情况下，会有两种形式

转载;https://www.cnblogs.com/bill-shooting/archive/2018/07/21/9347441.html 1. 传统的HTTP浏览器缓存策略 在一个网页的生命周期中，开发者为了缩短用户打开页面的时间，通常会设置很多缓存。其中包括了： 浏览器缓存 代理服务器缓存（CDN缓存） 服务器缓存 数据库缓存 等各种缓存。这些缓存大多数和前端没什么关系，也不由前端开发者控制，其中和前端较为密切的是 浏览器缓存 ，但它本质上也是由服务器控制的。 在Service Worker还未问世之前，浏览器缓存主要是由HTTP缓存策略和浏览器内置的存储功能（cookie，Local Storage，Session Storage等）来提供。其中HTTP缓存由于是钦定的，根正苗红，浏览器支持的也很好，是最常用的浏览器缓存技术。而通过浏览器内置存储功能来实现缓存，相比之下就没那么高端大气上档次了。因为这种方式没个标准范式，虽说可以通过JS进行控制显得比HTTP缓存灵活，但效果嘛就只能依赖程序员的水平了，也没有个统一的轮子能用，所以这种方式也就是小打小闹，不成气候。 下面介绍一下HTTP缓存的一些用法： Expires头部 早在HTTP协议被设计的时候，协议的起草者们就想到了缓存的事情，自然也有相应的功能，那就是 Expires 这个头部。每当浏览器请求时

概述 互联网应用发展到今天，从单体应用架构到SOA以及今天的微服务，随着微服务化的不断升级进化，服务和服务之间的稳定性变得越来越重要，分布式系统之所以复杂，主要原因是分布式系统需要考虑到网络的延时和不可靠，微服务很重要的一个特质就是需要保证服务幂等，保证幂等性很重要的前提需要分布式锁控制并发，同时缓存、降级和限流是保护微服务系统运行稳定性的三大利器。 随着业务不断的发展，按业务域的划分子系统越来越多，每个业务系统都需要缓存、限流、分布式锁、幂等工具组件，distributed-tools组件(暂未开源)正式包含了上述分布式系统所需要的基础功能组件。 distributed-tools组件基于tair、redis分别提供了2个springboot starter，使用起来非常简单。 以使用缓存使用redis为例，application.properties添加如下配置 redis.extend.hostName=127.0.0.1 redis.extend.port=6379 redis.extend.password=pwdcode redis.extend.timeout=10000 redis.idempotent.enabled=true 接下来的篇幅，重点会介绍一下缓存、限流、分布式锁、幂等的使用方式。 缓存 缓存的使用可以说无处不在，从应用请求的访问路径来看，用户user

1.vue (1)组件 每个组件单独分成文件，如A.vue文件实现A组件； 除index.vue之外文件名推荐大写开头如BaseHeader.vue或横线连接base-header.vue; 基础组件名可以共用相同的前缀，如BaseButton; 组件名应该倾向于完整单词而不是缩写； 组件名推荐多个单词，如TodoItem代替Todo;html模板中引用推荐todo-item prop定义尽量详细，如指定其类型，必填与否; props: { 　　status: { 　　　　type: String, 　　　　required: true, 　　　　validator: function (value) { 　　　　// 校验方法 　　　　　　return *** 　　　　} 　　} } 编辑器通常按照字母顺序组织文件，可以考虑将具有相关关系的组件的命名相关，如都是搜索相关的组件可带公共前缀Search，具有父子关系的组件，可以考虑将子组件命名带上父组件命名参数SearchSidebar.vue NavigationForSearchS idebar.vue； 自闭合组件引用； <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent /> <!-- 在 DOM 模板中 --> <my-component></my-component> <!-- 在所有地方

现代 WEB 前端的性能优化 ——IT唐伯虎 前言：这只是一份学习笔记。 什么是WEB前端 潜在的优化点： DNS是否可以通过缓存减少DNS查询时间？ 网络请求的过程走最近的网络环境？ 相同的静态资源是否可以缓存？ 能否减少http请求的大小？ 减少http请求数 服务端渲染 涉及层面 网络层面 构建层面 服务端层面 浏览器渲染层面 基础优化：图片的编码原理、选择图片的格式、资源的合并与压缩。 进阶优化：浏览器渲染层面的优化、重绘与回流层面的优化、浏览器存储的选择与使用、浏览器端结合服务端的缓存机制。 结合服务端的优化：基于nodejs的Vue-SSR解决首屏渲染的问题。 知识点 资源的合并与压缩 目的：减少http请求数量、减少请求资源大小、减少带宽消费。 原理：通过一个入口文件（依赖的顶层），分析所有依赖，得到依赖树，最后按照依赖树，对文件进行压缩、混淆、合并、语法转换。 a) html压缩 在前端的源代码里，有些东西，只在代码里有意义，但是对于浏览器却毫无意义的。 例如：代码对齐的回车、空格、tab，代码注释。 这些东西在发布的时候可以去掉。 b) css压缩 删除回车、空格、tab，删除代码注释，css语义合并。 c) js压缩与混淆（必须） 删除回车、空格、tab，删除代码注释，代码命名和语义的缩减与优化， 达到代码保护。 d) 文件合并 · 公共库合并

#何为大型网站# ##大型网站特性## 既然说的是大型网站架构，那么 架构的背后自然是解决人因面对大型网站特性而带来的问题 。这样可以先给大家说下大型网站的特性， 这些特性带来的问题就是人要解决的问题 ： 高并发、大流量：PV 量巨大； 高可用：7*24 小时不间断服务； 海量数据：文件数目分分钟 xxTB； 用户分布广泛，网络情况复杂：网络运营商； 安全环境恶劣：黑客的攻击； 需求快速变更，发布频繁：快速适应市场，满足用户需求； 渐进式发展：慢慢地运营出大型网站； ##大型网站目标## 既然说到了大型网站的特性，那么**解决这些特性带来的问题要达到什么目标呢？**如下： 每个目标背后面临着技术、设计、维护等诸多方面的挑战； 而目标本身的期望值也会根据实际情况进行调整，这也意味着网站架构建设是个不断调整的过程。 有了问题，也定了伟大的目标，那么网站在不同阶段面对不同的问题，是如何解决的？又是如何一步步成长为大型网站架构，实现这些伟大的目标呢？ ##如何网站架构## 首先，什么是大型网站架构呢？ 其实大型网站架构的概念对于每一个开发者来说很笼统、很模糊，正如盲人摸象，看到的、了解到的只是很小的一部分，大部分情况下我们只是负责架构中的一小块内容，所以很难清晰地给出具体定义。这就是所谓“不识庐山真面目 只缘身在此山中”的尴尬吧。所以我们要跳出来，站在宏观的角度

原文链接： 征服前端面试 ，仅供学习使用 前端知识集锦2 1. JavaScript 1.1 原型 我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个对象，就是原型。 当我们在创建对象时，可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象上。而每一个new出来的实例，都有一个proto属性，该属性指向构造函数的原型对象，通过这个属性，让实例对象也能够访问原型对象上的方法。因此，当所有的实例都能够通过proto访问到原型对象时，原型对象的方法与属性就变成了共有方法与属性。 // 声明构造函数 function Person(name, age) { this.name = name; this.age = age; } // 通过prototye属性，将方法挂载到原型对象上 Person.prototype.getName = function() { return this.name; } var p1 = new Person('tim', 10); var p2 = new Person('jak', 22); console.log(p1.getName === p2.getName); // true 通过图示我们可以看出，构造函数的prototype与所有实例对象的proto都指向原型对象

HTTP和HTTPS HTTP协议（HyperText Transfer Protocol，超文本传输协议）：是一种发布和接收 HTML页面的方法。 HTTPS（Hypertext Transfer Protocol over Secure Socket Layer）简单讲是HTTP的安全版，在HTTP下加入SSL层。 SSL（Secure Sockets Layer 安全套接层）主要用于Web的安全传输协议，在传输层对网络连接进行加密，保障在Internet上数据传输的安全。 HTTP 的端口号为 80 ， HTTPS 的端口号为 443 HTTP工作原理 网络爬虫抓取过程可以理解为 模拟浏览器操作的过程 。 浏览器的主要功能是向服务器发出请求，在浏览器窗口中展示您选择的网络资源，HTTP是一套计算机通过网络进行通信的规则。 HTTP的请求与响应 HTTP通信由两部分组成： 客户端请求消息 与 服务器响应消息 浏览器发送HTTP请求的过程： 当用户在浏览器的地址栏中输入一个URL并按回车键之后，浏览器会向HTTP服务器发送HTTP请求。HTTP请求主要分为“Get”和“Post”两种方法。 当我们在浏览器输入URL http://www.baidu.com 的时候，浏览器发送一个Request请求去获取 http://www.baidu.com 的html文件