福州网站建设案例,包装设计网页,软件开放和网站开发,如何做网销第一步#xff1a;用户输入
1、 对用户所输入内容进行解析#xff1a; 为什么需要解析#xff1a;判断出所输入的关键字是 搜索内容 还是 URL 搜索内容#xff1a;地址栏会使用浏览器默认的搜索引擎#xff0c;来合成带关键字的 URL URL#xff1a;输入内容符合 URL 规则…
第一步用户输入
1、 对用户所输入内容进行解析 为什么需要解析判断出所输入的关键字是 搜索内容 还是 URL 搜索内容地址栏会使用浏览器默认的搜索引擎来合成带关键字的 URL URL输入内容符合 URL 规则地址栏会根据规则把内容加上协议合成完整的 URL 为什么要解析URLHTTP协议中参数组件的传输是 “keyvalue” 键值对的形式如果要传输多个参数就需要用“”符号对键值对进行分隔。但是对于 value 中本就包含 或者 等特殊字符例如http:www.baidu.com?keyvalue1就会出现歧义。 如何解决歧义对URL进行编码在特殊字符的各个字节16进制前加上”%”即可http:www.baidu.com?keyva%26lu%3D
第二步网络请求
1、DNS解析
DNS 的核心系统是一个三层的树状、分布式服务基本对应域名的结构
根域名服务器Root DNS Server管理顶级域名服务器返回“com”“net”“cn”等顶级域名服务器的 IP 地址。 顶级域名服务器Top-level DNS Server管理各自域名下的权威域名服务器比如 com 顶级域名服务器可以返回 apple.com 域名服务器的 IP 地址。 权威域名服务器Authoritative DNS Server管理自己域名下主机的 IP 地址比如 apple.com 权威域名服务器可以返回 www.apple.com 的 IP 地址。 解析流程 1、在浏览器中输入www.qq.com域名操作系统会先检查自己本地的hosts文件是否有这个网址映射关系如果有就先调用这个IP地址映射完成域名解析。
2、如果hosts里没有这个域名的映射则查找本地DNS解析器缓存是否有这个网址映射关系如果有直接返回完成域名解析。
3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系首先会找TCP/IP参数中设置的首选DNS服务器在此我们叫它本地DNS服务器此服务器收到查询时如果要查询的域名包含在本地配置区域资源中则返回解析结果给客户机完成域名解析此解析具有权威性。
4、如果要查询的域名不由本地DNS服务器区域解析但该服务器已缓存了此网址映射关系则调用这个IP地址映射完成域名解析此解析不具有权威性。
5、如果本地DNS服务器本地区域文件与缓存解析都失效则根据本地DNS服务器的设置是否设置转发器进行查询如果未用转发模式本地DNS就把请求发至13台根DNS根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后如果自己无法解析它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后就会找qq.com域服务器重复上面的动作进行查询直至找到www.qq.com主机。
6、如果用的是转发模式此DNS服务器就会把请求转发至上一级DNS服务器由上一级服务器进行解析上一级服务器如果不能解析或找根DNS或把转请求转至上上级以此循环。不管是本地DNS服务器用是是转发还是根提示最后都是把结果返回给本地DNS服务器由此DNS服务器再返回给客户机。
2、建立TCP链接
在OSI 模型中共有七层从下到上分别是物理层、数据链路层、网络层、运输层、会话层、表示层和应用层。但是这显然是有些复杂的所以在 TCP/IP 协议中它们被简化为了四层。 当然TCP/IP 是协议族的统称在OSI七层模型中 三次握手
很多人都看过三次握手四次挥手的流程图但是总是不明白、记不住。最主要的原因还是我们对其含义不理解
流程图
初始时客户端处于 Colse(关闭) 状态服务端处于 Listen(监听) 状态。客户端想要和客户端建立连接。第一次握手客户端 发送 SYN1初始化建立连接seqx 给服务端消息发完后此时 客户端处于SYN_SENT 状态等待服务器的确认。第二次握手服务端收到客户端发送的想要建立连接的信息会发送ACK1 表明确认收到消息,并以自己的 SYN1 报文作为应答表示可以建立连接并且也是指定了自己的初始化序列号 seqy同时会把客户端的 seq 1 作为ack 的值(ackx1)表示自己已经收到了客户端的 SYN此时服务器处于 SYN_REVD 的状态。第三次握手客户端收到服务端可以建立链接的信息于是发送 ACK1 表明确认收到消息, 并且指定序列号seqx1初始为seqx第二个报文段所以要1同时会把服务端的 seq 1 作为ack(acky1) 的值表示自己已经收到了客户端的 SYN消息发送后此时 客户端处于 ESTABLISHED(已确认) 状态服务端接收到此消息后也变为 ESTABLISHED(已确认) 状态。
为什么需要三次握手两次不行吗
三次握手、四次挥手 的目的就是为了确认双方是否可接受可发送数据。如果改为两次握手假如客户端第一次发送了建立连接的消息第一次握手由于网络卡顿了或其他原因没有及时传达到服务端过了一会儿时间客户端迟迟未收到服务端的确认消息便取消了这次信息传输但是一段时间后服务端终于接收到了此条消息于是向客户端发送可建立连接的消息第二次握手如果只有两次握手那么此时双方的连接就建立了此时客户端忽略服务端发来的确认也不发送数据则服务端一直等待客户端发送数据浪费资源。
第三次握手失败了怎么办
当客户端与服务端的第三次握手失败了之后即客户端发送至服务端的确认建立连接报文段未能到达服务端服务端发送了SYNACK报文后就会启动一个重传计时器等待客户端返回的ACK报文如果服务端在等待客户端回复ACK的过程中超过规定时间后重新发送SYNACK重传次数根据 /proc/sys/net/ipv4/tcp_synack_retries 来指定默认是5次。如果重传指定次数到了后仍然未收到ACK应答那么一段时间后server自动关闭这个连接那么服务端会向客户端发送一个RTS报文段并进入CLOSE关闭状态即并不等待客户端第三次握手的ACK包重传直接关闭连接请求这主要是为了防止泛洪SYN攻击即坏人伪造许多IP向服务端发送连接请求从而将服务端的未连接队列塞满浪费服务端的资源。
3、发送HTTP请求
提到HTTP我们最先想到的就是HTTP与HTTPS
HTTP超文本传输协议(Hypertext Transfer Protocol)。 HTTPS超文本传输安全协议(Hypertext Transfer Protocol Secure)其实就是在HTTP的基础上加上了TLS/SSL协议。
为什么会有HTTPS?
为什么会有HTTPS其实就是在问HTTP与HTTPS的区别首先我们来了解一下HTTP的结构
请求 响应 HTTP与HTTPS的主要区别
4、四次挥手 初始时客户端和服务端都处于ESTABLISHED已建立连接状态。有一方想要发起关闭连接请求假设为客户端客户端首先发出 FIN1, 序列号 sequ 的结束信号消息此时 客户端变为 FIN_WAIT1 状态。服务端收到消息后首先回复 ACK1, acku1, seqv 表明收到上一条想要结束连接的消息此时服务端变为 CLOSE_WAIT 状态接下来服务端会去检查是否可以结束连接没有需要再传输的请求或数据。客户端收到上一条消息后变为 FIN_WAIT2 状态继续等待服务端可以结束连接的消息传来。服务端确定可以断开连接后会再向 客户端发送 FIN1(结束标志), ACK 1ack u1, seq w 的消息表明可以结束连接的消息此时服务端变为 LAST_ACK(最后一次发送消息)状态等待 客户端的 确认。客户端收到FIN消息后回复 ACK1,ackw1,sequ1表明收到上一条可以结束的消息此时客户端变为 TIME_WAIT状态并设置时间等待定时器时间 为2MSL这么做的原因是确保消息被服务器接收到定时器时间到后客户端才会变为CLOSED状态客户端发起结束信号的一方主动变为CLOSED状态。服务端收到上一条消息后状态变为 CLOSED客户端接收结束信号的一方是被动变为CLOSED。
为什么需要四次挥手才能结束连接
如果接收结束消息的一方 收到FIN1,sequ 这条想要结束连接的消息后就直接回复FIN1(结束标志), ACK 1ack u1, seq w 消息确定可以结束连接最终连接被关闭双方变为CLOSE状态那么如果在收到第一条想要结束的消息时还有将要传输或者正在进行的消息传输就会被被迫终止所以必须在这之前先回复一条收到消息的报文在对自身是否可以断开连接进行检查确保已没有需要传输信息后再回复FIN来结束连接。
四次挥手释放连接时等待2MSL的意义是什么
MSL(最长报文段寿命)报文在网络上存活的最长时间超过这个时间报文将会被丢弃。 意义一确保客户端(主动结束方发送)的最后一条消息不被丢失。如果最后一条消息被丢失了服务端没有收到这条消息因为服务端在发出SYNACK这条消息后会设置一个重传定时器在规定的时间内没有收到来自客户端的确认会重传第三条消息再次设置定时器假设客户端不等待2MSL而是在发送完ACK之后直接释放关闭一但这个ACK丢失的话服务器就无法正常的进入关闭连接状态。 意义二防止“已失效的连接请求报文段”出现在本连接中。客户端(主动结束方发送)在发送完最后一个ACK报文段后再经过2MSL就可以使本连接持续的时间内所产生的所有报文段都从网络中消失使下一个新的连接中不会出现这种旧的连接请求报文段。
5、浏览器缓存
当我们在地址栏输入URL后进行回车是否就每次都会执行相关的查询操作呢 不是
下面这张图很好的展示了浏览器缓存的运作流程
当我们发起GET请求请求还未发出时浏览器会首先检查 是否有缓存 如果 存在缓存 是否为强缓存强缓存不需要发送请求到服务器直接取浏览器本地缓存即可如果不存在强缓存或者强缓存失效则走协商缓存。
1、如何检查是否存在强缓存
强缓存由 Expires、Cache-Control 和 Pragma优先级依次递增 3 个 Header 属性共同来控制
Expires Expires是在HTTP/1.0时期提出的它的值是一个 HTTP 日期在浏览器发起请求时会根据系统时间和 Expires 的值进行比较如果系统时间超过了 Expires 的值缓存失效。它的缺陷也很明显由于和系统时间进行比较所以当系统时间和服务器时间不一致的时候会有缓存有效期不准的问题。优先级最低
Cache-Control Cache-Control 是 HTTP/1.1 中新增的属性。优先级中等常用的属性值如有 max-age单位是秒缓存时间计算的方式是距离发起的时间的秒数超过间隔的秒数缓存失效 no-cache不使用强缓存需要与服务器验证缓存是否新鲜 no-store禁止使用缓存包括协商缓存每次都向服务器请求最新的资源 private专用于个人的缓存中间代理、CDN 等不能缓存此响应 public响应可以被中间代理、CDN 等缓存 must-revalidate在缓存过期前可以使用过期后必须向服务器验证
Pragma Pragma 只有一个属性值就是 no-cache 效果和 Cache-Control 中的 no-cache 一致不使用强缓存需要与服务器验证缓存是否新鲜。优先级最高
2、协商缓存
协商缓存分为两种ETag/If-None-Match 和 Last-Modified/If-Modified-Since。
ETag/If-None-Match
ETag 是服务器根据当前文件的内容给文件生成的唯一标识只要里面的内容有改动这个值就会变。服务器通过响应头把这个值给浏览器。 浏览器接收到 ETag 的值会在下次请求时将这个值作为 If-None-Match 这个字段的内容并放到请求头中然后发给服务器。 服务器接收到 If-None-Match 后会跟服务器上该资源的 ETag 进行比对: 如果两者不一样说明要更新了。返回新的资源跟常规的HTTP请求响应的流程一样。 否则返回304告诉浏览器直接用本地缓存。
Last-Modified/If-Modified-Since
在浏览器第一次给服务器发送请求后服务器会在响应头中加上 Last-Modified最后修改时间 这个字段。浏览器接收到后会在下次请求时将这个值作为 If-Modified-Since 这个字段的内容并放到请求头中然后发给服务器。服务器拿到请求头中的 If-Modified-Since 的字段后其实会和这个服务器中该资源的最后修改时间对比: 如果请求头中的这个值小于最后修改时间说明是时候更新了。返回新的资源跟常规的HTTP请求响应的流程一样。 否则返回304告诉浏览器直接用本地缓存。
两者的区别
在精准度上ETag优于Last-Modified。优于 ETag 是按照内容给资源上标识因此能准确感知资源的变化。而 Last-Modified 就不一样了它在一些特殊的情况并不能准确感知资源变化主要有两种情况: 编辑了资源文件但是文件内容并没有更改这样也会造成缓存失效。Last-Modified 能够感知的单位时间是秒如果文件在 1 秒内改变了多次那么这时候的 Last-Modified 并没有体现出修改了。 在性能上Last-Modified 优于 ETag因为 Last-Modified 仅仅只是记录一个时间点而 Etag 需要根据文件的具体内容生成哈希值。 如果两种方式都支持的话服务器会优先考虑ETag。
3、都说使用 浏览器本地缓存 那么 浏览器的本地缓存 到底存在哪里呢
浏览器的缓存位置一共有四种Service Worker、Memory Cache内存缓存、Disk Cache硬盘缓存、Push Cache推送缓存优先级从高到低
它们的执行流程为 Service Worker
Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站拦截并修改访问和资源请求细粒度地缓存资源。它的缓存与浏览器其他内建的缓存机制不同它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存并且缓存是持续性的。这个缓存是永久性的即关闭 TAB 或者浏览器下次打开依然还在(而 memory cache 不是)。有两种情况会导致这个缓存中的资源被清除手动调用 API cache.delete(resource) 或者容量超过限制被浏览器全部清空。
Service worker运行在worker上下文因此它不能访问DOM。相对于驱动应用的主JavaScript线程它运行在其他线程中所以不会造成阻塞。它设计为完全异步同步API如XHR和localStorage不能在service worker中使用。
出于安全考量Service workers只能由HTTPS承载毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在Firefox浏览器的用户隐私模式Service Worker不可用。
Memory Cache
Memory Cache 即内存中的缓存。几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。按照操作系统的常理先读内存再读硬盘所以从效率上讲它是最快的。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素memory cache 注定只能是个“短期存储”。常规情况下浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)那可能在 TAB 没关闭之前排在前面的缓存就已经失效了。
Disk Cache
Disk Cache 即存储在硬盘上的缓存因此它是持久存储的是实际存在于文件系统中的从存取效率上讲是比内存缓存慢的但是他的优势在于存储容量和存储时长。而且它允许相同的资源在跨会话甚至跨站点的情况下使用例如两个站点都使用了同一张图片Disk Cache 会严格根据 HTTP 头信息中的各类字段来判定哪些资源可以缓存哪些资源不可以缓存哪些资源是仍然可用的哪些资源是过时需要重新请求的。当命中缓存之后浏览器会从硬盘中读取资源虽然比起从内存中读取慢了一些但比起网络请求还是快了不少的。
Push Cache
Push Cache是 HTTP/2 中的内容当以上三种缓存都没有命中时它才会被使用。它只在会话Session中存在一旦会话结束就被释放并且缓存时间也很短暂在Chrome浏览器中只有5分钟左右同时它也并非严格执行HTTP头中的缓存指令。
第三步页面渲染
1、构建布局树(render tree)
构建DOM树
当我们请求完成之后如果响应头里的 Content-Type 为 text/html那就意味着浏览器需要进行解析和渲染工作了。
了解React,Vue等框架的同学应该都会知道Virtual DOM(虚拟DOM)diff算法 的第一步就是将 HTML 转化为可维护的 DOM树浏览器也一样。浏览器无法直接识别我们的 HTML 内容需要把它转化成为浏览器可识别的文件结构–DOM树。
HTML文件内容就是一个个的DOM节点DOM节点有它所对应的父子节点classstyle等属性。 DOM树本质上是一个以document为根节点的多叉树。
如何将HTML文件解析成DOM树
1、标签解析
这部分完成从HTML字符串中解析出标签的功能。主要使用标记化算法。
标记化算法的输入结果是HTML标记使用状态机表示。状态机一共有4个状态数据状态(Data)、标记打开状态(Tag open)、标记名称状态(Tag name)、关闭标记打开状态(Close tag open state)。
初始状态是 数据状态。
当标记是处于数据状态时 1遇到字符 时状态更改为 “标记打开状态” a. 接收一个 a-z 字符会创建 “起始标记” 状态更改为 “标记名称状态” 并保持到接收 字符。此期间的字符串会形成一个新的标记名称。接收到 标记后将当前的 新标记 发送给 树构造器 状态改回 “数据状态”。 b. 接收下一个输入字符 / 时会创建 关闭标记打开状态 并更改为 “标记名称状态” 。直到接收 字符将当前的 新标 记发送给 树构造器并改回 “数据状态” 。 2遇到 a-z字符时会将每个字符创建成字符标记并发送给树构造器。
注意⚠️
如果我们在解析的过程中遇到 “ script / script “标签当前线程会被停止去加载 js 文件因为 js文件可能会涉及到 DOM节点或者CSS样式 的更改这是它无法预测的当 js 文件加载结束后该线程会继续执行下去。这就是为什么我们建议把 js文件 放在body的最后因为 JS 会阻塞 DOM 树的解析。
那为什么又会建议把 CSS文件 放在前面加载呢
CSS解析 和 DOM解析 是在不同的线程中执行的但是绘制 Render Tree(后面会提到) 必须要 CSS解析 和 DOM解析 都完成后才可以进行的CSS解析 并不会影响 DOM解析但它会阻塞 DOM渲染所以我们建议把 CSS文件 放在前面加载。
2、DOM树构建
当标签解析器解析出标签后会发送到DOM树构建器DOM树构建器主要有这两部分组成DOM树、一个存放标签名的栈。
我们举个例子说明
htmlbodyh1 stylecolor: red/h1divp styledisplay: none/p/div/body
/html2、CSS树构建
css来源有三种外部样式表、内部样式表、内联样式因此在生成css tree时会根据各个样式表通过 继承、层叠 来计算出最终样式。
与处理 HTML 时一样我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。因此我们会重复 HTML 过程不过是为 CSS 而不是 HTML 3、合成 render tree 通过上图我们可以清楚的发现render tree 只会保留可见元素。
2、构建图层树
1、建立图层树layer tree
现在虽然我们已经有了 render tree 和 css tree但是我们也无法保证能够正确渲染出页面因为还会有一些复杂的场景比如3D动画如何呈现出变换效果当元素含有层叠上下文时定位z-index等如何控制显示和隐藏等等。所以还需 图层树layer tree来解决问题。
一般情况下节点的图层会默认属于父亲节点的图层(这些图层也称为合成层)。那什么时候会提升为一个单独的合成层呢
有两种情况需要分别讨论一种是显式合成一种是隐式合成。
显式合成 拥有层叠上下文的节点 HTML根元素本身就具有层叠上下文 普通元素设置position不为static并且设置了z-index属性会产生层叠上下文 元素的 opacity 值不是 1 元素的 transform 值不是 none 元素的 filter 值不是 none 元素的 isolation 值是isolate will-change指定的属性值为上面任意一个 需要剪裁的地方 比如一个div你只给他设置 100 * 100 像素的大小而你在里面放了非常多的文字那么超出的文字部分就需要被剪裁。当然如果出现了滚动条那么滚动条会被单独提升为一个图层。
隐式合成
层叠等级低的节点被提升为单独的图层之后那么所有层叠等级比它高的节点都会成为一个单独的图层这个隐式合成其实隐藏着巨大的风险如果在一个大型应用中当一个z-index比较低的元素被提升为单独图层之后层叠在它上面的的元素统统都会被提升为单独的图层可能会增加上千个图层大大增加内存的压力甚至直接让页面崩溃这就是层爆炸的原理。
这时我们就不得不来聊一聊 重排回流 和 重绘 了
重排回流当DOM的变化引发了元素几何属性的变化比如改变元素的宽高元素的位置导致浏览器不得不重新计算元素的几何属性并重新构建渲染树这个过程称为“重排”。
常见的引起重排的操作
一个 DOM 元素的几何属性变化常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。使 DOM 节点发生增减或者移动。读写 offset族、scroll族和client族属性的时候浏览器为了获取这些值需要进行回流操作。调用 window.getComputedStyle 方法。
重绘 完成重排后要将重新构建的渲染树渲染到屏幕上这个过程就是“重绘”。重绘不一定引起重排但重排一定伴有重绘。 2、生成绘制列表
接下来渲染引擎会将图层的绘制拆分成一个个绘制指令比如先画背景、再描绘边框…然后将这些指令按顺序组合成一个待绘制列表相当于给后面的绘制操作做了一波计划。
通过Chrome 开发者工具中 more tools的Layers面板可以观察到 3、生成图块和生成位图
绘制列表准备好了之后渲染进程的主线程会给合成线程发送commit消息把绘制列表提交给合成线程。
但是我们的视口大小有限但是我们的页面非常大需要滑动很长时间才能滑到底如果一次性把全部绘制出来是非常浪费性能的。因此合成线程要做的第一件事情就是将图层按照分块然后根据可视区上下的的图库转化成位图这一步也叫栅格化这样可以提高页面的首屏展示效率。
4、合成与显示
栅格化完成后合成线程会生成一个DrawQuad的命令并发送给浏览器进程浏览器进程里面有一个叫 viz 的组件用来接收合成线程发过来的 DrawQuad 命令然后根据 DrawQuad 命令将其页面内容绘制到内存中最后再将内存显示在屏幕上。
写在最后
参考博文 DNS原理及其解析过程https://blog.51cto.com/369369/812889 一文读懂前端缓存https://juejin.cn/post/6844903747357769742
