前端程序员每天都要接触浏览器。作为一名合格的前端工程师，浏览器相关的工作原理是我们进行性能优化的基石。今天就来测测你对浏览器了解多少？1、从输入URL到页面渲染会发生什么？在浏览器中输入网址，如：https://www.baidu.com。从输入地址到看到百度首页，这个过程发生了什么？1.1.构建网络请求1.2。查找缓存检查如果有缓存，则直接使用缓存。如果没有缓存，则会向服务器发送网络请求。1.3、DNS解析我们在访问网站时输入域名，如上图的域名：https://www.baidu.comIP地址：36.152.44.95:443真正的数据包是通过IP地址、域名与IP是一对一的映射关系。根据域名获取具体IP的过程称为DNS解析。IP地址后的数字指定的端口号，如果不存在，则默认为80。1.4.建立TCP连接如果服务器要向浏览器发送数据包，首先要建立连接。建立TCP连接是为了保证服务器与浏览器之间的安全连接，数据传输完成后断开连接。TCP（TransmissionControlProtocol），传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。同一个域名下最多可以建立6个TCP连接。如果超过6个，剩下的就排队等候。TCP连接分为三个阶段：浏览器和服务器之间的连接是通过三次握手建立的。对于数据传输，服务器向浏览器发送数据包。断开阶段，数据传输完成后，四次挥手断开连接。1.5.发送HTTP请求TCP连接建立后，浏览器和服务器就可以开始通信了，即开始发送HTTP请求。http请求前端程序员都非常熟悉！有请求和响应。网络请求流程图：2.页面是如何渲染的？第一个问题是浏览器输入url后要做什么，最后发送网络请求。服务器根据url提供的地址查找文件，然后加载html、css、js、img等资源文件，浏览器接收到文件后如何渲染？浏览器渲染过程如下：浏览器将获取到的html文档解析成DOM树。处理CSS标记以形成级联样式表模型CSSOM。合并DOM和CSSOM以创建渲染树（renderingtree），代表一系列要渲染的对象。计算渲染树的每个元素包含的内容，称为布局布局。浏览器采用流体布局方式，只需一次绘图操作即可布局所有元素。将渲染树的每个节点绘制到屏幕上称为绘制。图解：3.什么是浏览器缓存？3.1.检查强缓存时，不会发送http请求。如何检查？通过相应的字段进行检查，hTTP/1.0中使用Expires/，HTTP/1.1中使用Cache-Control。ExpiresExpires是过期时间，存在于服务器返回的响应头中，告诉浏览器在过期时间之前可以直接从缓存中获取数据，无需再次发送网络请求。expires:Wed,29Dec202107:19:28GMT我在2021-12-2212:30左右请求了https://www.baidu.com/，返回的expires内容如上。表示资源在2012-12-2907:12:28到期。在此之前，它不会向服务器发送请求。你觉得这个方法有什么问题吗？隐藏着一个大坑。如果电脑本地时间与服务器时间不一致，那么服务器返回的过期时间可能不准确，所以这种方式在HTTP1.1中被废弃了。Cache-Control使用了HTTP1.1中一个非常关键的字段：Cache-Control。该字段也存在于响应标头中。例如：cache-control:max-age=2592000表示响应返回后，在（2592/3600=720小时）内可以直接使用缓存。它和Expires的本质区别在于它不是用一个具体的时间点，而是用一个时间长短来控制强缓存。如果Expires和Cache-Control同时存在，则Cache-Control优先。强缓存有没有可能失效？如果资源缓存时间过期，即强缓存失效，那接下来怎么办呢？至此，我们将进入第二层关卡——协商缓存。3.2.协商缓存强缓存失效后，浏览器向服务器发送请求，请求头中带有相应的缓存标签，服务器根据缓存标签决定是否使用缓存。这是协商缓存。缓存标签有两种类型：ETag和Last-Modified。ETag是服务器根据当前文件的内容生成的唯一标识。如果内容更新，则唯一标识符也将更新。浏览器收到的ETag会作为if-None-Match字段的内容，放在请求头中。发送到服务器后，服务器会与服务器上的值进行比较。如果两者相同，浏览器会直接返回304。使用缓存。不同时发送http请求。Last-Modified，最后修改时间。浏览器第一次发送网络请求后，服务器会在响应头中加入该字段。当浏览器再发送一次请求时，会将这个值作为last-Modified-Since的值放入请求头中，然后由服务器将其与服务器上的最后修改时间进行比较。如果两者相同，浏览器会直接返回304，使用缓存。不同时发送http请求。两者对比：ETag在准确率上更胜一筹。因为ETag可以更准确的判断一个资源是否有更新，保证拉取的都是最新的内容。在性能上Last-Modified稍微好一点，只需要记录一个时间点。如果两者都存在，则ETag优先。3.3.缓存位置上文提到，当浏览器请求地址时，服务器返回304表示使用了浏览器缓存。这些资源缓存在哪里？缓存位置有四个，按照优先级从高到低排列：ServiceWorkerMemoryCacheDiskCachePushCache4.浏览器的本地存储是什么？所谓本地存储就是在客户端本地存储一些信息，存储的信息不会因为页面跳转或关闭而消失。浏览器本地存储主要分为：cookie、webStorage和indexDB。4.1.Cookies主要用于识别用户。弥补了http在状态管理上的不足。http是无状态协议。浏览器向服务器发送请求后，服务器返回响应。当发出下一个请求时，服务器不再识别浏览器。如果浏览器下次发送请求，可以带上cookie。服务器解析后，可以识别浏览器的身份。Cookies用于存储状态，其特点是：兼容所有浏览器，与服务器有一定关系。存储大小限制：一般浏览器规定同源下，最多只能存储4KB的cookie。有一个过期时间，过期时间可以自己设置。cookie不稳定，清除浏览器缓存或第三方垃圾清除时很容易清除cookie。用户可以根据自己的需要启用cookie缓存，如果开启隐身浏览器或隐身模式，cookie将被关闭。4.2.webStoragewebStorage可以分为localStorage和sessionStorage，是本地持久化存储。本地持久化存储用于保存一些不需要发送给服务器的信息，用来补充cookie存储方式的不足。localStorage特点：不兼容低版本浏览器IE6-8。生命周期是永久存在的，除非用户主动清除它。存储数据大小一般为5M，不同浏览器有差异。不受浏览器隐身或隐身模式的影响。严格本地存储，与服务器无关。sessionStorage特点：不兼容低版本浏览器IE6-8。仅在当前会话有效，当前页面关闭或浏览器关闭时清除。存储数据大小一般为5M，不同浏览器有差异。严格本地存储，与服务器无关。localStorage和sessionStorage有本质区别。localStorage的生命周期是永久的，而sessionStorage只存在于当前会话中。4.3.indexedDBindexedDB是html5提供的一种本地存储。它一般会保存大量的用户数据，需要在数据之间进行查找。在断网的情况下，做一些离线应用，数据格式为json。本质上是一个非关系数据库。它的容量是无限的。特点：存储空间大，默认250M。键值对操作可用于数据库读取和遍历，以及利用索引进行高效检索。受同源策略限制，无法跨域访问数据库。总结：浏览器本地存储的每一种方式都有自己的特点。Cookies比较小，适合存储与服务器通信的小的状态信息。webStorage存储不参与服务器通信的数据，indexedDB存储大型非关系数据库。5、什么是XSS攻击？XSS（CrossSiteScripting）跨站脚本为了和CSS区别，特意叫作XSS。主要是由于网站程序员对用户输入的过滤不够，导致攻击者可以利用输入在页面上展示或窃取用户信息，并利用身份信息进行恶意操作的一种攻击方式。说白了就是恶意攻击者在输入框中添加恶意脚本代码，当用户浏览网页时执行脚本代码，从而达到恶意攻击用户的目的。5.1.XSS攻击的类型XSS攻击的实现方式有存储型、反射型和文档写入三种。存储类型粗浅的理解就是存储恶意脚本。将脚本存储在服务器的数据库中，然后在客户端执行这些恶意脚本，从而达到攻击效果。比如在评论区提交一段脚本代码。如果前后端不做任何转义工作，脚本直接存入数据库。页面加载数据时，渲染时发现是js代码，会直接执行，相当于执行了一段逻辑不明的js。ReflectedReflectedXSS是指恶意脚本作为网络请求的一部分。浏览器请求接口如：http://www.xxx.com?q=会向服务器传递参数q=，服务器返回内容到浏览器，浏览服务器渲染时，发现是js脚本，直接执行。所以一旦页面加载，就会有一个弹出框。之所以叫反射，是因为它从浏览器通过网络向服务器请求，然后再返回给浏览器进行解析。Document-type文档型XSS攻击不会经过服务器，作为中间人，在数据传输过程中劫持网络数据包，进而修改里面的html文档。常见的wifi劫持或本地恶意软件。XSS攻击的危害包括：窃取各种用户账号，如机器登录账号、用户网银、各种管理员账号等。控制企业数据，包括读取、篡改、添加和删除敏感数据。盗窃具有商业价值的材料。控制受害机器对其他网站发起攻击。劫持别人的广告，点击广告转码或过滤后跳转到自己的广告页面。例如：//转码后，在代码html中解析时，不会作为a执行js脚本。Measure2：CSP，浏览器中的内容安全策略，决定浏览器加载哪些资源。具体来说：同源策略，限制加载其他域下的资源。当前页面禁止向其他域提交数据。提供报告机制，及时发现XSS攻击。措施三：HttpOnly，如果cookie设置为httponly，则无法通过js脚本获取cookie信息。这样可以有效防止XSS攻击和窃取用户信息。6、http和https浏览器访问http网站时，域名会提示“不安全”，访问https//xxx.com时，浏览器会提示“安全”。为什么？http协议，超文本传输??该协议用于在服务器和浏览器之间传输信息。http协议以明文形式发送内容，没有任何形式的数据加密。如果攻击者直接拦截浏览器和服务器之间传输的消息，就可以直接读取。理解信息。为了解决http协议的缺陷，使用了https安全套接字层超文本传输??协议。为了保证数据的安全性，在http协议的基础上增加了SSL协议。SSL依靠证书来验证服务器的身份，并且浏览器和服务器之间的通信没有加密。https并不是一个新的协议，而是http的增强版。简单的说，https协议是由SSL+http协议构造成一个可以进行加密传输和身份认证的网络协议，比http协议更安全。https和http的区别：https协议需要申请安全证书，一般免费的少，需要收费，而http则不需要。https有SSL加密传输，比较安全，而http是明文传输，不安全。https和http使用不同的连接方式，使用不同的默认端口，http是80，https是443。http的连接简单，没有状态，而https需要通过SSL验证身份信息，相对更安全.https的工作原理图：加解密过程接下来说说浏览器和服务器协商加解密的过程。首先，浏览器向服务器发送一个随机数client_random和一个加密的方法列表。服务端收到后返回另一个随机数server_random和加密方式给浏览器。现在两者都具有相同的三个凭据：client_random、server_random和加密方法。然后用这种加密方式将两个随机数混合生成一个密钥，这个密钥就是浏览器和服务器通信的密码。
