快手推广网站同城配送网站建设

当前位置： 首页 > news >正文

快手推广网站,同城配送网站建设,站长工具seo综合查询官网,网站建设运维自查问题清单本文节选自我的博客#xff1a;浏览器输入 URL 并回车发生了什么 #x1f496; 作者简介#xff1a;大家好#xff0c;我是MilesChen#xff0c;偏前端的全栈开发者。#x1f4dd; CSDN主页#xff1a;爱吃糖的猫#x1f525;#x1f4e3; 我的博客#xff1a;爱吃糖… 本文节选自我的博客浏览器输入 URL 并回车发生了什么 作者简介大家好我是MilesChen偏前端的全栈开发者。 CSDN主页爱吃糖的猫 我的博客爱吃糖的猫 Github主页: MilesChen 支持我点赞收藏⭐️留言介绍The mixture of WEBDeepLearningIotanything 前言 这是前端面试中的高频问题文章有点长若你耐心读完一定有所收获。若你在面试中能简单描述出完整过程一定会令面试官耳目一新。但其中涉及的细节也是相当多读者还需要主动探索不然还是禁不起大厂面试官的深挖。 大致流程URL 解析DNS 查询TCP 连接服务器处理请求浏览器接收响应渲染页面四次断开渲染页面的过程构造文档对象模型(DomTree)构造CSS 对象模型(CSSOM)生成渲染树、排版、分层、绘制 URL解析 如果是非 URL 结构的字符串则会用浏览器默认的搜索引擎搜索该字符串。UTF-8 URL 主要由 协议、主机、端口、路径、查询参数、锚点6部分组成 输入URL后浏览器会解析出协议、主机、端口、路径等信息并构造一个HTTP请求。 浏览器发送请求前根据请求头的expires和cache-control判断是否命中包括是否过期强缓存策略如果命中直接从缓存获取资源并不会发送请求。如果没有命中则进入下一步。没有命中强缓存规则浏览器会发送请求根据请求头的If-Modified-Since和If-None-Match判断是否命中协商缓存如果命中直接从缓存获取资源。如果没有命中则进入下一步。如果前两步都没有命中则直接从服务端获取资源。 HSTS由于安全隐患会使用 HSTS 强制客户端使用 HTTPS 访问页面。 DNS查询 通过 DNS 来查询 IP 地址DNS 先查本地、后查运营商、逐级网上查。 查询的方式分为两种 递归查询 递归查询是一种DNS服务器的查询模式在该模式下DNS服务器接收到客户机请求必须使用一 个准确的查询结果回复客户机。如果DNS服务器本地没有存储查询DNS信息那么该服务器会询问其他服务器并将返回的查询结果提交给客户机。迭代查询 DNS服务器另外一种查询方式为迭代查询当客户机发送查询请求时DNS服务器并不直接回复查询结果而是告诉客户机另一台DNS服务器地址客户机再向这台DNS服务器提交请求依次循环直到返回查询的结果为止。 总结一般情况下从PC客户端到本地DNS服务器是属于递归查询。而DNS服务器之间就是的交互查询就是迭代查询。 访问经过迭代查询后会在本地的DNS服务器缓存DNS映射以便下次再次打开此网页一般会缓存两天防止服务器挂掉本地DNS服务器就是路由器 TCP连接 三次握手四次挥手默认都了解这里不再展开 服务器处理请求 通常是Apache和Nginx服务器去处理请求HTTP请求一般可以分为两类静态资源 和 动态资源。 第一次请求通常是静态资源请求index.html文件这时Nginx会直接拿这个文件资源响应回去。 动态资源会回委托给后端程序处理通常会经过一层层中间件过滤非法请求、异常请求、跨域请求、重定向请求路由分发到具体的业务代码去处理比如数据库操作在处理过程中可能出现非法请求参数做异常处理最后将处理结果响应给前端。
浏览器接收响应 浏览器接收到来自服务器的响应资源后会对资源进行分析。首先查看响应头 Response header根据不同状态码做不同的事比如上面提到的重定向。如果响应资源进行了压缩比如 gzip还需要进行解压。然后对响应资源做缓存。 渲染页面 浏览器拿到数据如何渲染浏览器是如何渲染UI的 这张图相信你一定不陌生但你真的理解这张图了吗接着看下去带你来一步步吃透彻这张图 渲染页面的关键步骤就叫 关键渲染路径 关键渲染路径构造文档对象模型(DomTree)构造CSS 对象模型(CSSOM)生成渲染树、排版、分层、绘制 构造文档对象模型(DomTree) 二进制解析从网络读取HTML原始字节根据文件指定编码UTF-8词法分析将字符串转换为一个个token如div、body语法分析将token转成为对象这些对象定义了它们的属性和规则。构造DomTree根据HTML文档中的token关系构建树
构造CSS 对象模型(CSSOM) CSS文件和HTML处理流程差不多CSS 文件经过转化为字符然后进行分词、转化为节点最终拼接为一个树状的 CSSOM。构造过程中还做了标准化计算值例如color单词形式转化为rgbem单位转化为px 将CSS构造成树形便于下上寻找CSS继承样式 生成渲染树也叫 布局树 上面生成的两棵树都是互相独立的两个树状对象。这一步实现将两个树组成一个具有所有可见节点样式和内容的 Render Tree 渲染树的构建过程大概分为以下三个步骤 DomTree CssomTree RenderTree 从 DomTree 开始遍历遍历每一个可见节点。 一些脚本标签、元标签等节点是不可见的由于它们未反映在页面的呈现中所以会被被省略。同时对于一些通过 CSS 隐藏的节点也会从渲染树中省略。比如上述 HTML 中的 span 节点在上面的例子中会在渲染树中丢失因为它明确的设置了 “display: none” 属性。 对于 DomTree 中的每个可见节点在 CSSOM 中找到合适的匹配 CSSOM 规则并应用它们。最终在 Render Tree 上挂载这些带有内容以及样式的可见节点。 前三个步骤总结
排版layout 布局计算 计算出每个节点在对应设备屏幕上确切的位置和大小。布局过程的输出是一个“盒子模型”它精确地捕获视口内每个元素的确切位置和大小所有相对测量值px都转换为屏幕上的绝对像素 。 分层layer 处理层叠问题包括普通图层 和 复合图层 的处理 分层根据复杂的3d转换页面滚动还有z-idex属性都会形成单独图层把图层按照正确顺序排列。生成分层树 图层 以B站举例打开浏览器调试工具的图层可以发现网页被切割为一块块图层。
图层上下文 什么是图层上下文 让HTML元素在2D平面堆叠出3D的视觉效果根据层叠规则将哪个元素置于视觉最近处哪个次之以此类推堆叠而成的部分就是一个图层。且每个层叠上下文对象都是一个渲染图层。 如何形成层叠上下文 文档根元素、position不为初始值且z-index不为0或auto、opacity属性值小于1、flex布局元素、transform不为none等等 层叠顺序?层叠等级的比较只有在当前层叠上下文元素中才有意义 同一层叠上下文的层叠顺序为z-index0 z-index:auto/z-index:0 inline/inline-block水平盒子 float浮动盒子 block块级水平盒子 z-index0 background/border 普通图层渲染图层与复合图层 浏览器渲染的图层一般包含两大类普通图层渲染图层以及复合图层 普通图层是页面的普通的文档流我们虽然可以使用绝对定位相对定位来脱离文档流但是它仍属于默认复合层都公用同一个绘画上下文对象复合图层它会单独分配系统资源每个复合图层都有一个独立的图形上下文当然也会脱离文档流这样一来不管复合图层中如何变化都不会影响默认图层内的重绘重排硬件加速就用在了这里 如何创建复合图层 3D转换translate3dtranslateZ依此类推videocanvasiframe元件transform、opacity经由СSS过渡和动画;该元素在复合层上面渲染会自动创建CSS具有 will-change 属性等等 复合图层作用 交给GPU处理速度更快、回流不影响其他层速度更快、GPU与CPU并行更加高效 从上面的对比可以看出我们使用了CSS的transform:translate来实现动画效果这可以避开重排和重绘阶段直接在非主线程上执行合成动画操作。这样的效率是最高的因为是在非主线程上合成并没有占用主线程的资源另外也避开了布局和绘制两个子阶段所以相对于重绘和重排合成能大大提升绘制效率。其实这就是硬件加速 绘制paint 完成了图层的构建接下来要做的工作就是图层的绘制了。图层的绘制跟我们日常的绘制一样每次都会把一个复杂的图层拆分为很小的绘制指令然后再按照这些指令的顺序组成一个绘制列表 Chrome 开发者工具中在设置栏中展开 more tools, 然后选择Layers面板就能看到绘制列表然后将这个绘制列表提交给 合成线程 专门负责绘制操作
tiles分块 合成线程分块一个页面可能很长需要滚动显示每次显示在视口中的只是页面的一小部分。对于这种情况绘制出一整个长页会产生太大的开销而且也没必要。合成线程会将图层划分为图块。这样可以大大加速页面的首屏展示。 raster光栅化 栅格化线程地中将图快转化为位图栅格化过程都会使用 GPU 来加速生成 draw quad 一旦所有图块都被生成位图合成线程就会生成一个绘制图块位图的命令—— DrawQuad然后将该命令提交给浏览器主进程。 display 浏览器主进程里面有一个叫 viz 的组件用来接收合成线程发过来的 DrawQuad 命令然后根据 DrawQuad 命令将其页面内容绘制到内存中最后再将内存显示在屏幕上。 内存到屏幕的过程 无论是 PC 显示器还是手机屏幕都有一个固定的刷新频率一般是 60 HZ即 60 帧也就是一秒更新 60 张图片一张图片停留的时间约为 16.7 ms。而每次更新的图片都来自显卡的前缓冲区。而显卡接收到浏览器进程传来的页面后会合成相应的图像并将图像保存到后缓冲区然后系统自动将前缓冲区和后缓冲区对换位置如此循环更新。 渲染页面中需要注意的几个问题 Css Parse 和 Dom Parse不是并行关系 注意大多数人认为Css Parse 和 Dom Parse 是并行的关系其实并不是 当 HTML Parse 遇到 link 标签的 stylesheet 时并不会等待 stylesheet 下载并解析完毕后才会解析后续 Dom。而是在网络进程加载 style 脚本的同时可以继续去解析后续 Dom。严格来说是非阻塞关系CSS解析不会阻塞HTML解析而JS解析会阻塞当网络进程加载完样式脚本后主线程中仍然需要存在一个 parse styleSheet 的操作这一步就是解析 link 脚本中的样式内容从而生成添加Cssom 上的节点。 parse styleSheet 的操作是在主线程中进行操作的。这也就意味着它会和 parse Html 抢占主线程资源同一时间只能进行一个操作。 JS parse 和 Css Parse 、 Dom Parse 的关系 在构建 CSSOM 树时会阻塞渲染直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程所以应该尽量保证层级扁平减少过度层叠越是具体的 CSS 选择器执行速度越慢。 当 HTML 解析到 script 标签时会暂停构建 DOM完成后才会从暂停的地方重新开始。也就是说如果你想首屏渲染的越快就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行只有当解析完样式表才会执行 JS所以也可以认为这种情况下CSS 也会暂停构建 DOM。 css加载是否会阻塞dom树渲染 我们都知道css是由单独的下载线程异步下载的。 结论 css加载不会阻塞DOM树解析异步加载时DOM照常构建但会阻塞render树渲染渲染时需等css加载完毕因为render树需要css信息 思考这种阻塞render树本质是减少重绘与回流不然就会出现CSS解析频繁触发重绘与回流 JS加载会阻塞dom树解析 js会阻塞DOM解析 因为浏览器不知道js脚本会写些什么如果有删除dom操作那提前解析dom就是无用功。不过浏览器也会先“偷看”下html中是否有碰到如link、script和img等标签时它会帮助我们先行下载里面的资源不会傻等到解析到那里时才下载。 defer和async异步进行js的解析的区别 script defer srca.jsscript 表示这个 script 下载后不急着执行等到html解析结束后再执行。浏览器会下载a.js和b.js同时一起加载 dom加载完后再按顺序执行a.js 和 b.js不会阻塞dom script async srca.jsscript 表示下载这两个脚本下载好了和dom一起执行。浏览器会下载a.js和b.jsjs下载时渲染dom下载完后立即js执行但一方面此时dom可能还没读完所以不要操作 dom。一方面两个script的执行顺序可能不一样了所以他们不能相互依赖会阻塞dom 回流-重绘-合成 结合浏览器渲染过程我们再来理解一遍回流、重绘、合成的区别 大家都知道重绘不一定导致回流但回流一定发生了重绘其中的内容是什么样的呢 回流/重排 触发回流的条件 一个 DOM 元素的几何属性变化常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。改变DOM内容文字大小、内容的改变如用户在输入框中敲字改变窗口大小使 DOM 节点发生增减或者移动。读写 offset族、scroll族和client族属性的时候如获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性浏览器为了保证值的正确也会回流取得最新的值调用调用 window.getComputedStyle 等方法 重排/回流的渲染流水线从头走一遍流水线
重绘 当页面中元素样式的改变并不影响它在文档流中的位置时例如color、background-color、visibility、脱标后的元素等浏览器会将新样式赋予给元素并重新绘制它这个过程称为重绘。 重绘的渲染流水线跳过了渲染树和建图层树直接去绘制
合成 更改了一个既不要布局也不要绘制的属性如transform那么渲染引擎会跳过布局和绘制直接执行后续的合成操作这个过程就叫合成。 提升合成层的最好方式是使用 CSS 的 will-change 属性。在使用transform和opacity实现动画效果时尽量用 will-change 来提前告诉渲染引擎让它为元素创建独立的层。 总结 本文首先简单介绍了URL解析到响应的处理再渲染页面的过程根据浏览器关键渲染路径详细展开对其中的图层相关知识点进行了补充绘制paint的过程分为分块、栅格化、draw quad、display四个部分还介绍了浏览器渲染页面的中的常见问题最后结合渲染页面的过程去理解回流、重绘、合成的区别 感谢小伙伴们的耐心观看本文为笔者个人学习记录如有谬误还请告知万分感谢如果本文对你有所帮助还请点个关注点个赞~您的支持是笔者不断更新的动力