浏览器缓存

常见HTTP状态码

|▌冷眼眸甩不掉的悲伤 提交于 2020-03-21 01:21:48
一些常见HTTP状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 常见HTTP状态码大全 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码。 代码 说明 http状态码 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 http状态码 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。 2xx (成功) 表示成功处理了请求的状态代码。 代码 说明 http状态码 200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 http状态码 201 (已创建) 请求成功并且服务器创建了新的资源。 http状态码 202 (已接受) 服务器已接受请求,但尚未处理。 http状态码 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。 http状态码 204 (无内容) 服务器成功处理了请求,但没有返回任何内容。 http状态码 205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。 http状态码 206 (部分内容) 服务器成功处理了部分 GET 请求。 3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。 代码 说明 http状态码 300 (多种选择

微服务监控平台-缓存设计

a 夏天 提交于 2020-03-20 10:29:35
一,架构图及其说明 1,UI数据:页面 2,一级缓存:内存 3,二级缓存:硬盘文件系统 4,定时任务:同步数据库与缓存中的数据 5,数据源:数据库 二,场景分析 加缓存之前的数据信息流: 浏览器发出数据请求后,服务器后端接收到数据请求,开始通过数据源连接读取各种数据后,通过业务逻辑层处理成需要的逻辑数据后返回给浏览器。浏览器更新数据模型展现数据。 三,上述场景存在的问题 1、 每次获取数据都要走相同的数据流程来获取数据,如果遇到源数据宕机、或者逻辑性能降低情况时页面效果会非常的差。 2、 每次获取到数据后都要进行相同的数据逻辑处理,浪费性能。 3、 获取到的数据可能并没有发生变化,但是每次都产生了不必要的浪费。 四,缓存方案选择 1,划分的原则:业务场景 2,常见方案:   1)一级缓存+二级缓存;   2)一级缓存; 3,实现方式:   1)一级缓存可以采用HashTable的方式来进行数据存储。不同的页面可以创建不同的HashTable对象,页面的不同信息块创建不同的Key值,将逻辑层处理好的JSON数据作为Value来存放。当信息块更新数据时,通过Key值可以直接获取到JSON数据。如果是这个页面的数据刷新则直接将HashTable的数据序列化为JSON返回即可。 2) 二级缓存基于本地文件系统,将数据序列化为JSON后写入文本文件即可。一个页面信息块一个JSON文本文件。

Elasticsearch相关配置(二)

送分小仙女□ 提交于 2020-03-20 09:04:00
一、关于elasticsearch的基本概念 term   索引词,在elasticsearch中索引词(term)是一个能够被索引的精确值。foo,Foo Foo几个单词是不相同的索引词。索引词(term)是可以通过term查询进行准确的搜索。 text   文本是一段普通的非结构化文字,通常,文本会被分析称一个个的索引词,存储在elasticsearch的索引库中,为了让文本能够进行搜索,文本字段需要事先进行分析;当对文本中的关键词进行查询的时候,搜索引擎应该根据搜索条件搜索出原文本。 analysis   分析是将文本转换为索引词的过程,分析的结果依赖于分词器,比如: FOO BAR, Foo-Bar, foo bar这几个单词有可能会被分析成相同的索引词foo和bar,这些索引词存储在elasticsearch的索引库中。当用 FoO:bAR进行全文搜索的时候,搜索引擎根据匹配计算也能在索引库中搜索出之前的内容。这就是elasticsearch的搜索分析。 cluster   代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的。es的一个概念就是去中心化,字面上理解就是无中心节点,这是对于集群外部来说的,因为从外部来看es集群,在逻辑上是个整体,你与任何一个节点的通信和与整个es集群通信是等价的。 node  

前端优化带来的思考,浅谈前端工程化

|▌冷眼眸甩不掉的悲伤 提交于 2020-03-19 13:01:10
这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量 执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线程下载(有并发上限),在带宽限制的条件下,无序并发会导致主资源速度下降,从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源,这个时候可以避免请求体的传输,对性能有极大提高 衡量性能的重要指标为首屏载入速度(指页面可以看见,不一定可交互),影响首屏的最大因素为请求,所以请求是页面真正的杀手,一般来说我们会做这些优化: 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源,jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候,我们也会采用类似“时间换空间、空间换时间”的做法,比如: ① 缓存为王,对更新较缓慢的资源&接口做缓存(浏览器缓存

http面试题

て烟熏妆下的殇ゞ 提交于 2020-03-18 17:31:52
一. 基础概念 URI - 包括URL和URN 请求和响应报文 请求报文: 响应报文: 二. Http方法 客户端发送的请求报文为第一行,包含了方法字段。 GET - 获取资源,当前网络请求中,绝大部分是GET方法 HEAD - 获取报文首部,主要用于确认URL的有效性和资源更新的日期时间等 POST - 传输实体主体,POST主要用来传输数据,GET主要用来获得资源 三. HTTP状态码 1XX 信息: 100 Continue 表示到目前为止都很正常,客户端可以继续发送请求或忽略这个响应。 2XX 成功:200 OK 204 No Content: 请求已经成功处理,但是返回的响应报文不包含实体的主体部分。一般在只需要从客户端往服务器发送信息,而不需要返回数据时使用。 206 Partial Content: 表示客户端进行了范围请求,响应报文包含由Content-Range指定范围的实体内容。 3XX 重定向:301 Moved permennantly 永久性重定向 302 Found 临时性重定向 304 Not modified 如果请求报文首部欧包含一些条件,例如:If-Match, If-Modified-Since, 如果不满足条件,则服务器会返回304状态码。 具体解释:在客户端向服务端发送http请求时,若返回状态码为304 Not Modifiied

HTTP Request header

此生再无相见时 提交于 2020-03-18 11:54:16
某厂面试归来,发现自己落伍了!>>> HTTP Request header 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等。 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看。也希望对大家的开发工作或者测试工作有所帮助。使用Fiddler工具非常方便地捕获HTTP Request和HTTP Response, 关于Fiddler工具的用法,请看我另一篇博客[ Fiddler 教程 ] 阅读目录 什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器 目前我们使用的是HTTP/1.1 版本 Web服务器,浏览器,代理服务器 当我们打开浏览器,在地址栏中输入URL,然后我们就看到了网页。 原理是怎样的呢? 实际上我们输入URL后,我们的浏览器给Web服务器发送了一个Request, Web服务器接到Request后进行处理,生成相应的Response,然后发送给浏览器, 浏览器解析Response中的HTML,这样我们就看到了网页,过程如下图所示

五、数据缓存Data3——.data(key, value)

坚强是说给别人听的谎言 提交于 2020-03-18 03:50:56
// 代码行:3915——3972 // Multifunctional method to get and set values of a collection // The value/s can optionally be executed if it's a function var access = function( elems, fn, key, value, chainable, emptyGet, raw ) { var i = 0, len = elems.length, bulk = key == null; // Sets many values if ( toType( key ) === "object" ) { chainable = true; for ( i in key ) { access( elems, fn, i, key[ i ], true, emptyGet, raw ); } // Sets one value } else if ( value !== undefined ) { chainable = true; if ( !isFunction( value ) ) { raw = true; } if ( bulk ) { // Bulk operations run against the entire set if (

我的面试之旅

▼魔方 西西 提交于 2020-03-17 13:30:45
腾讯一面 1.自我介绍!!!   下次一定要好好准备准备!!!   您好,我叫刘晶霞,来自华南理工大学广州学院软件专业,今天面试的岗位为前端实习生。 我认为我是一个比较善于沟通、性格开朗并且有较强的自我管理能力和学习能力的人。 在学习上能保持学习热情,成绩排名连续班级第一,全级前三。在工作中,能与同学进行有效沟通 并一起进步。我从18年开始接触前端知识,做过几次与前端有关的项目,对前端职业有比较浓厚的热 爱,也想经过此次面试将我在校所学的知识都有用武之地。 2.在这么多的项目中你最熟悉的是什么?   追问:能详细说一下吗?   我最熟悉的项目为:外聘教师月报表系统。   这个项目是给教务员和教务处所使用的一个系统。每个学院的教务员每个月登录此系统对该学院 的所有外聘教师进行一个教学时间的汇总,填好之后通过此系统提交到教务处,最终教务处可以对各个学院所提交的信息进行汇总。 3.能详细说明一下你是怎么通过设置请求头和ajax添加随机数解决了缓存问题吗?   追问:使用了标准http请求头之后还是会偶现数据没更新对吗?有没有考虑过可能是说因为你之前没有加过头,后面加了以后浏览器又把之前的头给缓存下来了呢?   让html不缓存?设置no-cache让html每次都去请求服务器,所以浏览器每次都能拿到最新的html资源。   首先一开始我们的项目没有进行任何有关缓存的操作

浏览器缓存

风流意气都作罢 提交于 2020-03-16 20:17:48
1、基本介绍 浏览器缓存是指浏览器会存储用户最近请求过的资源,当用户再次请求同一资源时,浏览器可以直接从本地读取 这样,不仅可以提高浏览器的加载速度,也能减轻服务器的负载压力,可以说是一举两得 具体而言,浏览器的缓存策略分为两种,一种是强缓存(又称本地缓存),一种是弱缓存(又称协商缓存) 它们的行为会根据响应头和请求头的特定字段决定 强缓存与 expires 和 cache-control 字段有关 弱缓存与 etag / if-none-match 和 last-modified / if-modified-since 字段有关 2、本地缓存 本地缓存:当一个请求发生时,浏览器自己决定是否从缓存中读取数据 在浏览器第一次请求资源时,服务器会返回资源,并在响应中设置 expires 或 cache-control 字段 然后浏览器会把这些信息都缓存下来,当再次请求资源时,浏览器先不向服务器发送请求 而是根据该资源的 expires 或 cache-control 字段判断缓存的资源是否已经失效 如果缓存没有失效,那么直接读取缓存拿到资源 exprise :表示这个资源的失效时间,它的值是一个绝对时间的 GMT 格式字符串 cache-control :表示这个资源的失效时间,主要通过该字段的 max-age 进行设置,它的值是一个相对时间 此外,这个字段还能设置其它的值

jQuery2.x源码解析(缓存篇)

痞子三分冷 提交于 2020-03-16 20:11:17
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计,jQuery自身的很多东西都依赖于缓存,比如事件、一些中间变量、动画等。同时他还为用户提供接口了使用缓存的接口,方便用户在元素节点上保存自己的数据,并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏、命名冲突等问题。 同时,html5提出了一种通过属性缓存元素数据的功能,就是 data-*属性 ,他可以以字符串的形式保存数据,并且不会和元素固有属性冲突。jQuery的缓存提供了访问data-*的接口,与html5标准结合更加紧密,更加规范。 提问:jQuery不同版本的缓存实现原理是什么? 答:jQuery1.x与jQuery2.x、jQuery3.x是不同的。 jQuery1.x系列中,需要兼容ie6、ie7等早期的浏览器,在ie6、ie7这样的浏览器中,根据艾伦的博客,我们可以知道DOM元素与js对象相互引用,是会引起浏览器的内存泄漏问题。所以 jQuery1.x中,最大的问题是要防止在ie6、ie7浏览器上出现内存泄漏。为了避免DOM元素与js对象相互引用而造成的内存泄漏,jQuery必须从设计解决对象循环引用的问题。所以jQuery1.x将需要缓存到元素上的数据