能打开网站的浏览器,做网站在手机端预览乱码了,app推广视频,大连产品设计公司有哪些CDN缓存DNSTCP三次握手、四次挥手浏览器渲染过程输入URL到页面渲染过程的一些优化
下面我将“从输入URL到渲染的全过程”大概的描述出来#xff0c;再对其过程加以解释#xff0c;了解过程中可以做哪些优化。文章内容有点长#xff0c;需要有足够的耐心看完哟#xff01;再对其过程加以解释了解过程中可以做哪些优化。文章内容有点长需要有足够的耐心看完哟下面我要开始啦
1、URL解析
2、DNS解析
3、建立TCP链接
4、客户端发送请求
5、服务器处理和响应请求
6、浏览器解析并渲染响应内容
7、TCP四次挥手断开连接
一、URL解析
地址解析和编码
我们输入URL后浏览器会解析输入的字符串判断是URL还是搜索关键字如果是URL就开始编码。 一般来说URL只能使用英文字母、阿拉伯数字和某些标点符号不能使用其他文字和符号所以如果URL中有文字就必须编码后使用。但是URL编码很混乱不同的操作系统、浏览器、网页字符集会导致不同的编码结果。所以我们需要使用JavaScript先对URL编码然后提交给服务器不给浏览器插手的机会。我们通常会使用encodeURI()函数或者encodeURIComponent()函数来编码URL
HSTS
HSTS(HTTP Strict TransportSecurity)是一种新的Web安全协议HSTS的作用是强制客户端使用HTTPS与服务器创建连接。比如你在地址栏输入http://xxx/浏览器会自动将http转写成https然后直接向 https://xxx/ 发送请求。
缓存检查
浏览器在发送请求之前先检查有没有缓存过程如下
浏览器会先去查看强缓存Expires和cache-control判断是否过期如果强缓存生效直接从缓存中读取资源若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag/If-None-Match)协商缓存由服务器决定是否使用缓存若协商缓存失效那么代表该请求的缓存失效返回200并重新返回资源和缓存标识再次存入浏览器缓存中生效则返回304并从缓存中读取资源。协商缓存之前要经过DNS域名解析之后建立TCP链接
那么浏览器缓存的位置在哪呢
Service Worker浏览器独立线程进行缓存Memory Cache内存缓存Disk Cache硬盘缓存Push Cache推送缓存HTTP/2中的
注意输入网址之后会查找内存缓存没有再找硬盘都没有就发生网络请求。 普通刷新F5因为TAB没有关闭所以内存缓存可用如果匹配上会被优先使用其次是磁盘缓存 强制刷新CtrlF5浏览器不使用缓存因此发送的请求头均带有Cache-controlno-cache,服务器直接返回200和最新内容。
二、进行DNS解析
DNS
1、DNS把域名和ip地址相互映射分布式数据库让用户能更方便的访问互联网DNS协议运行在UDP协议之上 2、DNS解析通过域名最终得到对应ip地址的过程。 3、DNS缓存浏览器操作系统路由器本地DNS根域名服务器都会对DNS结果作出一定的缓存
DNS解析过程
1、首先搜索浏览器自身的DNS缓存有缓存直接返回; 2、浏览器自身DNS不存在浏览器就会调用一个类似gethostbyname的库函数,此函数会先去检测本地hosts文件查看是否有对应ip。 3、如果本地hosts文件不存在映射关系就会查询路由缓存路由缓存不存在就去查找本地DNS服务器一般TCP/IP参数里会设首选DNS服务器通常是8.8.8.8)(客户端到本地DNS服务器是递归过程 4、如果本地DNS服务器还没找到就会向根服务器发出请求。DNS服务器之间是迭代过程 具体过程 本地DNS服务器代我们的浏览器发起迭代DNS解析请求首先它会找根域的DNS的IP地址全球13台哟可惜中国没有。找到根域的DNS地址,就会向其发起请求请问www.baidu.com这个域名的IP地址是多少呀 根域发现这是一个顶级域com域的一个域名于是告诉本地DNS服务器我不知道这个域名的IP地址,但是我知道com域的IP地址你去找它去吧 于是本地DNS服务器就得到了com域的IP地址又向com域的IP地址发起了请求请问www.baidu.com这个域名的IP地址是多少呀?,于是com域服务器告诉本地DNS服务器我不知道www.baidu.com这个域名的IP地址但是我知道baidu.com这个域的DNS地址你去找它去; 于是本地DNS服务器又向baidu.com这个域名的DNS地址这个一般就是由域名注册商提供的像万网新网等发起请求请问www.baidu.com这个域名的IP地址是多少这个时候baidu.com域的DNS服务器一查呀果真在我这耶于是就把找到的结果发送给本地DNS服务器; 这个时候本地DNS服务器就拿到了www.baidu.com这个域名对应的IP地址。 参考 前端进阶面试题详细解答 DNS优化
DNS也是开销通常浏览器查找一个给定域名的IP地址要花费20~120毫秒在完成域名解析之前浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间加快页面加载速度呢 1、减少DNS请求次数 2、DNS预获取,DOM还没开始浏览器预解析地址把解析好的地址放在本地缓存里面DOM树生成完要加载图片类的发现DNS已经解析好了再发送请求。link rel‘dns-prefetch’href’//dfns.tanx.com’ 主要对图片资源 3、DNS 查询的过程经历了很多的步骤如果每次都如此会耗费太多的时间、资源。所以我们应该尽早的返回真实的IP地址:减少查询过程也就是DNS缓存。浏览器获取到IP地址后一般都会缓存到浏览器的缓存中本地的DNS缓存服务器也可以去记录。另外每天几亿网名的访问需求一秒钟几千万的请求域名服务器如何满足就是DNS负载均衡。通常我们的网站应用各种云服务或者各种服务商提供类似的服务由他们去帮我们处理这些问题。 DNS系统根据每台机器的负载量地理位置的限制长距离的传输效率等等去提供高效快速的 DNS 解析服务。 4、当客户端DNS缓存浏览器和操作系统缓存为空时DNS查找的数量与要加载的Web页面中唯一主机名的数量相同包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的数量就可以减少DNS查找的数量 5、减少唯一主机名的数量会潜在减少页面中并行下载的数量HTTP1.1规范建议从每个主机名并行下载两个组件但实际上可以多个但是减少主机名和并行下载的方案会产生矛盾需要大家自己权衡。建议将组件放到至少两个但不多于4个主机名下减少DNS查找的同时也允许高度并行下载。 DNS解析后会把域名的解析权交给cname()指向的内容分发CDN专用的DNS服务器。CDN专用的DNS服务器把CDN的全局负载均衡设备的ip地址返回给用户。
CDN
举个例子以前坐火车买票都要到火车站买所有人都去火车站买票火车站售票厅的压力可想而知有多大。 后来火车票代售点出现了分布在各个城市城镇我们只需要去距离我们最近的火车票售卖点买票就可以了。 卖火车票的代理售票点缓存服务器为买票者提供了方便帮助他们在最近的地方最近的CDN节点 用最短的时间最短的请求时间买到票拿到资源。减轻了售票大厅的压力起到分流作用减轻服务器负载压力
CDN缓存
在浏览器本地缓存失效后浏览器会像CDN边缘节点发起请求类似浏览器缓存CDN边缘节点也存在一套缓存机制 CDN边缘节点缓存策略因服务商不同而不同通过http响应头中的cache-controlmax-age字段设置CDN边缘节点数据缓存时间。当浏览器向CDN节点请求数据时CDN节点会判断缓存数据是否过期若缓存数据过期CDN会向服务器发出回源请求从服务器拉取最新数据更新本地缓存并将最新数据返回给客户端CDN服务商一般会提供基于文件后缀目录多个维度来指定CDN缓存时间为用户提供更精细化的缓存管理。 CDN工作方式 1、当你点击网站页面的url时经过本DNS解析DNS解析后会把域名的解析权交给cname()指向的内容分发专用的DNS服务器。内容分发专用的DNS服务器把内容分发的全局负载均衡GSLB设备的ip地址返回给用户。 2、当你向CDN的全局负载均衡设备的ip地址发起url访问请求CDN的全局负载均衡设备会为你选择一台合适的缓存服务器提供服务。 选择的依据用户的ip地址判断哪台服务器距离用户最近根据用户请求的url中携带的内容名称判断哪台服务器上有用户要的数据查询各个服务器当前负载情况判断哪台服务器有服务能力。 分配基于这些条件综合分析后区域负载均衡设备会向全局负载均衡设备请求返回一台缓存服务器的IP地址。全局负载均衡设备返回服务器IP地址用户向缓存服务器发起请求缓存服务器响应用户请求将用户所需内容传送到用户终端如果这台缓存服务器没有用户想要的内容而区域均衡设备依然将它分配给了用户那么这台服务器就要向它的上一级缓存服务器请求内容直至追溯到网站的源服务器将内容拉到本地。域名解析服务器根据用户ip地址把域名解析成相应节点的缓存服务器ip地址实现用户就近访问使用CDN服务的网站只要将其域名解析权交给CDN的全局负载均衡设备将需要分发的内容注入到CDN就可以实现内容加速了。 CDN优势 1、CDN节点解决了跨运营商和跨地域访问的问题访问延时大大降低 2、大部分请求在CDN边缘节点完成CDN起到分流作用减轻了源服务器的负载。 CDN劣势 1、当网站更新时如果CDN节点上数据没有及时更新即便用户在浏览器使用 Ctrl F5 的方式使浏览器端的缓存失效也会因为CDN边缘节点没有同步最新数据而导致用户访问异常。 2、CDN不同的缓存时间会对“回源率”产生直接的影响 如果缓存时间短CDN边缘节点的内容经常失效导致频繁回源。不仅增加服务器压力也增加了用户访问时间。如果缓存时间长数据更新了边缘节点的内容都还没更新开发者对特定的任务做特定的数据缓存时间管理。 CDN刷新缓存 CDN边缘节点对开发者是透明的相比于浏览器CtrlF5的强制刷新来使浏览器本地缓存失效开发者可以通过CDN服务商提供的“刷新缓存”接口来达到清理CDN边缘节点缓存的目的。这样开发者在更新数据后可以使用“刷新缓存”功能来强制CDN节点上的数据缓存过期保证客户端在访问时拉取到最新的数据。 | CDN优化
1、前端需要被加速的文件大致包括 js、css、图片、视频、和页面等文件。页面文件有动态和静态之分。这些文件和页面比如html最大的区别是这些文件都是静态的改动比较小这类静态文件适合做CDN加速。我们把这些静态文件通过CDN分发到世界各地的节点用户可以在距离最近的边缘节点拿到需要的内容从而提升内容下载速度加快网页打开速度。页面分为动态页面和静态页面动态页面不适合做CDN缓存因为页面是动态的话内容的有效期就比较活跃。边缘节点的数据经常失效要回源造成源服务器压力。 2、减少资源请求的等待时间 不同浏览器的并发数量不一样IE11 、IE10 、chrome、Firefox 的并发连接数是 6个IE9是10个。如果页面静态资源图片等过多大于6个会存在资源请求等待的情况。目前现实状况是大多用户带宽越来越大但是我们的静态资源并非那么大很多文件都是几k或者几十k6个文件加起来都小于带宽。这样就导致了资源的浪费。 解决方案是用多个不同IP的服务器来存储这些文件并在页面中通过绝对路径的方式引用要求同一IP的文件不超过6个。这样就可以尽可能的减少资源请求等待的情况。 至此你已经获取到缓存服务器的IP地址并且准备向这个IP地址发送请求了。
三、建立TCP连接
TCP 1、TCP是一种面向连接的可靠的基于字节流的传输层通信协议。 2、建立TCP连接需要进行三次握手。过程如下 TCP握手过程 1、客户端发送带有SYN标识SYN1seqx的请求报文段然后进入SYN_SEND状态等待服务端确认; 2、服务端接收到客户端SYN报文段后需要发送ACK信息对这个SYN进行确认同时还要发送自己的SYN信息SYN1ACK1seqyackx1服务端把这些信息放在一个报文段中SYNACK报文段一并发给客户端此时客户端进入SYN_RECV状态; 3、客户端接收到服务端的SYNACK报文段后会向服务端发送ACKACK1seqxacky1确认报文段这个报文段发送后客户端和服务端都进入ESTABLISHED状态完成三次握手。 为什么TCP建立一定要三次呢两次不行吗 原因 双方要明确对方接收能力都是正常的客户端发之后服务端可以确定客户端发送能力正常服务端发送给客户端客户端可以确定服务端的接收和发送能力正常最后客户端发送确认来确定客户端的接收能力。为了防止已失效的连接请求报文段突然又传送到了服务端因而产生错误”。 四、客户端发送请求
TCP三次握手建立连接成功后客户端按照指定的格式开始向服务端发送HTTP请求。
请求过程优化
减少HTTP请求次数和请求资源大小 1、资源合并压缩 2、字体图标精灵图基本不是好的优化方式了不好维护 3、base64 4、Gzip一般文件能压缩60% 5、图片懒加载 6、数据延迟分批加载 7、CDN资源 五、服务器响应请求
服务器端收到请求后由web服务器准确说应该是http服务器处理请求诸如Apache、Ngnix、IIS等。web服务器解析用户请求了解了要调度哪些资源文件再通过响应的资源文件处理用户请求和参数并调用数据库信息最后将结果通过web服务器返回给浏览器客户端。
六、断开连接
服务器响应完客户端请求之后解除TCP连接释放过程四次挥手过程如下 1、客户端发送标记为FIN1finished的缩写表示接收完成请求释放连接同时生成一个Sequ的序列号之后进入FIN-WAIT-1半关闭阶段此时客户端到服务端发送数据的通道已经关闭但是仍然可以接收服务端发过来的数据 2服务器收到连接释放报文发出确认报文ACK1acku1并且带上自己的序列号seqv此时服务端就进入了CLOSE-WAIT关闭等待状态。TCP服务器通知高层的应用进程客户端向服务器的方向就释放了这时候处于半关闭状态即客户端已经没有数据要发送了但是服务器若发送数据客户端依然要接受。这个状态还要持续一段时间也就是整个CLOSE-WAIT状态持续的时间。 3客户端收到服务器的确认请求后此时客户端就进入FIN-WAIT-2终止等待2状态等待服务器发送连接释放报文在这之前还需要接受服务器发送的最后的数据。 4服务器将最后的数据发送完毕后就向客户端发送连接释放报文FIN1acku1由于在半关闭状态服务器很可能又发送了一些数据假定此时的序列号为seqw此时服务器就进入了LAST-ACK最后确认状态等待客户端的确认。 5客户端收到服务器的连接释放报文后必须发出确认ACK1ackw1而自己的序列号是sequ1此时客户端就进入了TIME-WAIT时间等待状态。 6服务器只要收到了客户端发出的确认立即进入CLOSED状态就结束了这次的TCP连接。 为什么要四次握手而不是三次、两次
因为建立一旦连接双方既是发送方又是接收方为了保证在最后断开的时候客户端发送的最后一个ACK报文段能够被服务器接收到。如果客户端在收到服务器给它的断开连接的请求之后回应完服务器就直接断开连接的话服务器就会因为一直没得到客户端响应而一直等待所以客户端要等待两个最长报文段寿命的时间以便于服务器没有收到请求之后重新发送请求。
七、浏览器解析并渲染响应内容
在这之前我们先来补充一点基础知识
浏览器的渲染引擎组成列举的是基本组成 1、HTML解析器:将HTML解析成DOM树。 2、CSS解析器: 为DOM中各个元素对象计算出样式信息为布局提供基础设施。 3、JavaScript引擎:解析并执行javascript代码。 4、布局layout模块:在DOM树创建后webkit需要将其中的元素对象同样式信息结合起来计算他们的大小位置等布局信息形成一个能表达这所有信息的模型。 5、绘图模块:使用图形库将布局计算后的各个网页的节点绘制成图像的结果。 渲染过程 1、浏览器拿到文件后拿到的是一些字节码通过编码方式一般是utf-8转换为对应的字符。 2、浏览器至上而下解析文档遇见HTML标记调用HTML解析器解析为对应的tockentocken就是标签文本的序列号将tocken按词法解析解析成具体的标记结构这个过程已经构建出一颗有标签有层级有结构的DOM树就是一块内存这块内存实际就是一个个Tocken构成的 3、遇见style/link标记调用CSS解析器处理CSS标记并构建CSSOM样式树 4、遇见script标记调用javascript解析器处理绑定事件、修改DOM树/CSS树等 5、将DOM树和CSSOM树合并成一颗render树渲染树。 6、根据渲染树来渲染计算每个节点的几何信息这一过程要依赖图形库 7、将各个节点绘制到屏幕上。 如果用户操作页面会触发第6或者第7步骤也就是重排和重绘 阻塞渲染
1、style标签的样式 由HTML解析器解析(异步解析 不阻塞浏览器渲染可能会出现闪屏解析一点显示一点现象 不阻塞DOM解析。 2、link引入的外部css样式推荐使用 由CSS解析器解析同步解析 阻塞浏览器渲染可以利用这种阻塞避免闪屏); 阻塞其后js语句的执行 原因如果后面js的内容是获取元素的样式例如宽高等属性,如果不等样式解析完毕后面的js就获得了错误的信息,由于浏览器也不知道后续js的具体内容所以只好等前面所有样式解析完毕再执行js。例如firefox在样式加载和解析过程会禁止所有脚本。webkit内核的浏览器只会在js尝试访问样式属性或者可能受到未加载的样式影响时才会禁止脚本。 不阻塞DOM的解析 原因DOM解析和CSS解析是两个并行的线程。 3、优化核心概念尽可能快的提高外部css加载速度。 使用CDN节点进行外部资源打包 对css进行压缩利用打包工具比如webpackglup等 减少对http请求数量将多个css文件合并 优化样式的代码。 4、js阻塞 阻塞DOM解析 原因浏览器不知道后续脚本的内容如果先去解析了下面的DOM而随后js删除了后面的所有DOM做了无用功。浏览器无法预估脚本具体做了什么操作索性全部暂停等脚本执行完浏览器再继续向下解析。 阻塞页面的渲染 原因js中也可以给DOM设置样式浏览器同样等该脚本执行完再继续干活避免做无用功。 阻塞后续js的执行 原因维护依赖关系例如必须先引入jQuery再引入bootstrap。 如果script脚本加了defer浏览器会发送请求加载js但是不会阻塞DOM解析等DOM解析完再执行js。 如果script加了async浏览器会发送请求加载js不阻塞DOM解析等js加载过来了就先停止DOM解析去执行js谁先回来先执行谁等js执行完继续DOM解析。 渲染过程优化 1、标签语义化使用合适的标签如果不是w3c规定的标签Tocken令牌和词法解析语法得识别分析是不是wc3规定的 2、减少标签嵌套生成结构树嵌套太多就得递归在DOM树构建时候快可以一点 3、样式尽可能少的层级嵌套使用与编译器的时候层级嵌套要慎用。CSS选择器渲染从右到左.box a{}会 比a{} 慢 4、尽早把CSS下载到客户端充分利用HTTP多请求并发机制 5避免阻塞js放在底部 6、减少回流 放弃传统操作DOM时代基于vue/react开始数据影响试图模式 样式集中改变 缓存布局信息 动画效果应用到position属性为absolute或fixed的元素上脱离文档流 CSS3硬件加速比起考虑如何减少回流重绘更期望不要回流重绘transform、opacity、filters这些属性会触发硬件加速不会引发回流重绘过多使用占用大量内存性能消耗严重 避免使用table布局和使用css的js表达式 结语
通过阅读本文相信小伙伴们对从输入URL到页面渲染的过程有了一个大概的理解。其实整个过程是很复杂也比较繁琐的不是一篇文章或者几张图就可以囊括的在这有很多细节不便展开有兴趣的小伙伴可以对这个过程中的一些细节深入研究研究哦文章中肯定会有些说的不是很清楚的地方恳请各位大佬不吝赐教一起成长
