浏览器缓存

面试中经常会被问到这个问题吧，唉，我最开始被问到的时候也就能大概说一些流程。被问得多了，自己就想去找找这个问题的全面回答，于是乎搜了很多资料和网上的文章，根据那些文章写一个总结。 写得不好，或者有意见的直接喷，不用走流程。也欢迎大佬指点 首先这不是小问题，能把里面的过程说清楚真的很麻烦，然后下面我把这些知识点，按流程的形式总结的： 从浏览器接收url到开启网络请求线程 开启网络线程到发出一个完整的http请求 从服务器接收到请求到对应后台接收到请求 后台和前台的http交互 http的缓存问题 浏览器接收到http数据包后的解析流程 CSS的可视化格式模型 JS引擎解析过程 跨域、web安全、hybrid等等 1. 从浏览器接收url到开启网络请求线程 多进程的浏览器 浏览器是多进程的，有一个主控进程，以及每一个tab页面都会新开一个进程（某些情况下多个tab会合并进程）。 进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等等。 Browser进程：浏览器的主进程（负责协调、主控），只有一个 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建 GPU进程：最多一个，用于3D绘制 浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程） 多线程的浏览器内核

1. 概述 本文以淘宝作为例子，介绍从一百个并发到千万级并发情况下服务端的架构的演进过程，同时列举出每个演进阶段会遇到的相关技术，让大家对架构的演进有一个整体的认知，文章最后汇总了一些架构设计的原则。 2. 基本概念 在介绍架构之前，为了避免部分读者对架构设计中的一些概念不了解，下面对几个最基础的概念进行介绍： 分布式 系统中的多个模块在不同服务器上部署，即可称为分布式系统，如 Tomcat和数据库分别部署在不同的服务器上，或两个相同功能的Tomcat分别部署在不同服务器上 高可用 系统中部分节点失效时，其他节点能够接替它继续提供服务，则可认为系统具有高可用性 集群 一个特定领域的软件部署在多台服务器上并作为一个整体提供一类服务，这个整体称为集群。如 Zookeeper中的Master和Slave分别部署在多台服务器上，共同组成一个整体提供集中配置服务。在常见的集群中，客户端往往能够连接任意一个节点获得服务，并且当集群中一个节点掉线时，其他节点往往能够自动的接替它继续提供服务，这时候说明集群具有高可用性 负载均衡 请求发送到系统时，通过某些方式把请求均匀分发到多个节点上，使系统中每个节点能够均匀的处理请求负载，则可认为系统是负载均衡的 正向代理和反向代理 系统内部要访问外部网络时，统一通过一个代理服务器把请求转发出去，在外部网络看来就是代理服务器发起的访问

1. HTTP请求格式 首先介绍HTTP协议： 超文本传输协议 （HTTP，HyperText Transfer Protocol)是 互联网 上应用最为广泛的一种 网络协议 。所有的 WWW 文件都必须遵守这个标准。 工作原理： 由HTTP客户端发起一个请求，建立一个到服务器指定端口（默认是 80端口 ）的TCP连接。 连接 HTTP服务器则在那个端口监听客户端发送过来的请求。一旦收到请求， 请求 服务器（向客户端）发回一个状态行，比如"HTTP/1.1 200 OK"，和（响应的）消息，消息的消息体可能是请求的文件、错误消息、或者其它一些信息。响应 客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客 http工作流程图 户机与服务器断开连接 显示内容 HTTP协议的网页 HTTP使用TCP而不是UDP的原因在于（打开）一个网页必须传送很多数据，而TCP协议提供传输控制，按顺序组织数据，和错误纠正。 　　做过Socket编程的人都知道，当我们设计一个通信协议时，“消息头/消息体”的分割方式是很常用的，消息头告诉对方这个消息是干什么的，消息体告诉对方怎么干。HTTP协议传输的消息也是这样规定的，每一个HTTP包都分为HTTP头和HTTP体两部分，消息体是可选的，而消息头是必须的。每当我们打开一个网页，在上面点击右键，选择“查看源文件”

本文主要学习一下一些高级的HTTP知识，例如 Session LocalStorage Cache-Control Expires ETag 其实主要就是涉及到了 持久化存储与缓存的技术 在此之前已经学习了 Cookie 的 相关知识 ，但是 Cookie 有个缺点是可以人为修改，有一定的安全隐患。 所以，针对这个缺点，诞生了 Session Session 一般来说 Session 是基于Cookie实现的，它利用一个 sessionId 把用户的敏感数据隐藏起来，除非暴力穷举才有可能获得敏感数据。 sessionId 我们使用 Cookie 的时候，一般是服务器给用户一个响应头，设置 Cookie response.setHeader('Set-Cookie', 'sign_in_email=...;HTTPOnly') 既然Session还是基于 Cookie 实现的，那么还是应该在 Set-Cookie 上搞事情。 //预先在服务器端预留对象准备存储各种session let sessions = { } ... let sessionId = Math.random() * 100000 sessions[sessionId] = {sign_in_email: email} response.setHeader('Set-Cookie', `sessionId=$

自去年开始，AngularJS 引入到项目中，并逐渐推动公司产品核心模块进行重构，提升产品稳定性与开发效率。在前端架构演进的过程中最艰难的不是理解 API，而是思维方式被颠覆的无助，所有繁杂的事务都被高度抽象化，以前 WEB 富 UI 开发最头疼的表现部分放到现在几乎不费吹灰之力，前端工程师重心将由 UI 转向数据模型的构建。在这个过程中，小伙伴经常会遇到跨页数据传递这个经典问题，于是我在公司给组里同事做了一次分享，以下是概要： 业务场景 跨页选中操作 分步骤操作 问题 Angular 跳转页面后，控制器实例被注销 Angular 没有提供跨页传递临时数据的特性 可选方案 A. 超级单页 使用同一个控制器与同一份实例，不使用路由 缺点 无历史记录：不支持浏览器前进后退操作（体验差） 无URL：不支持收藏与分享地址（如果应用出BUG，客户无法提供 URL，导致售后成本变高） B. URL传递数据 通过 URL 查询参数传递数据 缺点 可能引起安全问题 不支持复杂的数据模型（只支持 String 类型） D. Ng Service 缓存 使用 Angular Service 构建内存缓存 权衡后，采用此方案。 实践遇到的问题 唯一性难以保证 可能使用未清理的缓存引起 BUG 内存泄露 过期的缓存得不到清理 缓存会连同控制器一起被 Ng Service 持有(闭包的缘故)

浏览器缓存的解决方案 ——IT唐伯虎 摘要：浏览器缓存的解决方案，包括传统前端和现代前端。 前言：本文只针对文件请求（html、css、js）进行分析，但不涉及json数据请求。 浏览器的状态 （1）当浏览器向服务器发起请求，如果请求正常， 状态是200 。 （2）浏览器接收到请求结果后，如果会根据响应头设置的缓存规则，把请求结果存起来。 （3）当浏览器再次发起相同的请求的时候，浏览器会先向服务器比对文件，只对比最后修改时间，如果最后修改时间变化就重新获取请求结果，此时 状态是200 ；如果最后修改时间没有变化则从缓存读，此时 状态是304 。 （4）304状态是比较理想的缓存使用方案，但是往往来说，浏览器会走另一条粗暴的路线，即不进行时间比对，直接从缓存读，此时 状态是200已缓存 。 （200）> （304） > （200已缓存） （10ms）>（5ms）> （0ms） 浏览器的刷新 （1）按F5刷新： 从缓存读取文件，然后将这些文件向服务器对比，如果最后修改时间变化就重新下载，此时 状态是200 ，如果没变就从缓存读，此时 状态是304 ，这是只理想情况，有些时候，只从缓存读取， 状态是200已缓存 。 （2）按ctrl+F5强制刷新： 强制删除当前页面的所有缓存，并且重新下载，此时 状态是200 。 （3）手动清除浏览器所有缓存： 强制删除浏览器的所有缓存

Native APP与Web APP的技术融合已经逐渐成为一种趋势，使用标准的Web技术来开发应用中的某些功能，不仅可以降低开发成本，同时还可以方便的进行功能迭代更新。但是如何保证Web APP的流畅性也一直是业内讨论的热点。InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验，另外作为ArchSummit深圳2014大会《移动互联网，一浪高过一浪》专题的讲师，冯森林将会分享 手机淘宝的客户端架构探索之路 。 InfoQ：淘宝手机客户端是否使用了HTML5技术？能简单介绍下吗？ 冯森林： 手机淘宝大量使用了Web技术，但对于HTML5，由于兼容性的要求，我们相对比较保守，使用到的特性并不多。主要是一些与触屏体验相关的HTML5特性，大部分运用在基础JS库中，业务开发直接使用的场景不多。优点在于可以更好的支持一些优化的体验，充分发挥新技术优势和移动端独有的能力。缺点也很明显，兼容性上需要考虑较多的适配问题。 InfoQ：我们知道Web页面与原生的页面在性能上还是有很大差距的，手机淘宝是如何处理Web页面的体验瓶颈的? 冯森林： 通过使用缓存技术，可以在再次加载页面（及用到的资源）时避免缓慢和不可靠的网络请求，从本地缓存加载基本可以做到即时完成，接近于原生应用的加载体验。为了解决首次加载，我们在缓存机制的基础上引入了预缓存机制

前言 2019年6月中旬，实在厌倦了之前平平淡淡的工作和毫不起眼的薪资，不顾亲人的反对，毅然决然地决定只身前往沿海城市，想着找到一份更加具有挑战性的工作，来彻彻底底地重新打磨自己，同时去追求更好的薪资待遇。当然在此之前，自己每天下班后都会利用业余时间抓紧复习巩固刷题等等，大概从3月份开始的吧，持续了3个多月。而后从6月中旬面试一直到6月底，中间大概两个星期，其实我的学历和背景并不突出，但是我个人感觉可能是因为自己简历做的稍微还行(后面我可能会单独出一篇文章，来聊聊我做简历时的一点点心得)，让大厂的HR能够多看几眼，中间面过的公司包括喜马拉雅、携程、哔哩哔哩、流利说、蜻蜓FM、爱回收等，陆陆续续拿到4，5个Offer吧，如今已经转正，所以在这里记录下之前的部分 面试题 ，和大家一起分享交流。 正文 1. 烈熊网络 这家公司其实我也没有太了解过，是我前同事推荐的，说里面的薪资待遇不错，然后我当时也有空闲时间，所以就去试试了，虽然公司名气没有上面提到的公司大，但是他的面试题我觉得还是挺有分量的。 1.1 请说出下面代码的执行顺序 async function async1() { console.log(1); const result = await async2(); console.log(3); } async function async2() { console.log(2)

前言 2019年6月中旬，实在厌倦了之前平平淡淡的工作和毫不起眼的薪资，不顾亲人的反对，毅然决然地决定只身前往沿海城市，想着找到一份更加具有挑战性的工作，来彻彻底底地重新打磨自己，同时去追求更好的薪资待遇。当然在此之前，自己每天下班后都会利用业余时间抓紧复习巩固刷题等等，大概从3月份开始的吧，持续了3个多月。而后从6月中旬面试一直到6月底，中间大概两个星期，其实我的学历和背景并不突出，但是我个人感觉可能是因为自己简历做的稍微还行( 后面我可能会单独出一篇文章，来聊聊我做简历时的一点点心得 )，让大厂的HR能够多看几眼，中间面过的公司包括 喜马拉雅、携程、哔哩哔哩、流利说、蜻蜓FM、爱回收 等，陆陆续续拿到4，5个Offer吧，如今已经转正，所以在这里记录下之前的部分面试题，和大家一起分享交流。 正文 1. 烈熊网络 这家公司其实我也没有太了解过，是我前同事推荐的，说里面的薪资待遇不错，然后我当时也有空闲时间，所以就去试试了，虽然公司名气没有上面提到的公司大，但是他的面试题我觉得还是挺有分量的。 1.1 请说出下面代码的执行顺序 async function async1() { console.log(1); const result = await async2(); console.log(3); } async function async2() { console.log

程序员需要了解的硬核知识之磁盘 https://www.cnblogs.com/cxuanBlog/p/11776310.html 此篇文章是 《程序员需要了解的硬核知识》系列第四篇，历史文章请戳 程序员需要了解的硬核知识之内存 程序员需要了解的硬核知识之CPU 程序员需要了解的硬核知识之二进制 我们大家知道，计算机的五大基础部件是 存储器 、 控制器 、 运算器 、 输入和输出设备 ，其中从存储功能的角度来看，可以把存储器分为 内存 和 磁盘 ，内存我们上面的文章已经介绍过了，那么此篇文章我们来介绍一下磁盘以及内存和磁盘的关系。 认识磁盘 首先，磁盘和内存都具有存储功能，它们都是存储设备。区别在于，内存是通过 电流 来实现存储；磁盘则是通过 磁记录技术 来实现存储。内存是一种高速，造假昂贵的存储设备；而磁盘则是速度较慢、造假低廉的存储设备；电脑断电后，内存中的数据会丢失，而磁盘中的数据可以长久保留。内存是属于 内部存储设备 ，硬盘是属于 外部存储设备 。一般在我们的计算机中，磁盘和内存是相互配合共同作业的。 一般内存指的就是主存（负责存储CPU中运行的程序和数据）；早起的磁盘指的是软磁盘（soft disk，简称软盘），就是下面这个 （2000年的时候我曾经我姑姑家最早的计算机中见到过这个，当时还不知道这是啥，现在知道了。） 如今常用的磁盘是硬磁盘（hard disk，简称硬盘）