讯享网

 <p><strong>引言</strong></p><p id="2VJOUQSR">上篇《 》介绍了浏览器的基本情况、发展历史以及市场占有率。<br/></p><p id="2VJOUQSS">本篇文章将介绍浏览器基本原理。在掌握基本原理后，通过技术深入，在研发过程中不断创新，推动产品性能、用户体验的提升，来实现业务的增长，创造可持续的价值。</p><p id="2VJOUQSV"><strong>01</strong></p><p>业务系统呈现给用户的节点</p><p id="2VJOUQT2">理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将</p><p id="2VJOUQT5">当用户访问我们的业务系统时，浏览器和服务器之间会进行一系列复杂的交互过程。</p><p id="2VJOUQT7">浏览器整体的导航流程如下：</p><p id="2VJOUQT8">以下是用户从输入 URL 到看到业务系统页面的详细步骤：</p><p><strong>1. 输入 URL 并解析</strong><strong>1.1 用户输入 URL 并按下回车键</strong></p><p id="2VJOUQT9">用户在浏览器地址栏中输入业务系统的 URL，例如，并按下回车键。</p><p><strong>1.2 浏览器解析 URL</strong></p><p id="2VJOUQTA">浏览器解析输入的 URL，确定协议（如 HTTPS）、主机名（如 www.businesssystem.com）、端口号（如果有）、路径、查询参数等。</p><p><strong>1.3 DNS 解析</strong></p><p><strong></strong></p><p id="2VJOUQTD">浏览器需要将主机名转换为 IP 地址。这个过程称为 DNS 解析，通常包括以下步骤：</p><p><ul><li id="2VJOUR1A"></p><p id="2VJOUQTE">浏览器首先检查本地 DNS 缓存，看看是否有对应的 IP 地址。</p><p></li><li id="2VJOUR1B"></p><p id="2VJOUQTF">如果本地缓存中没有，浏览器会向操作系统查询。</p><p></li><li id="2VJOUR1C"></p><p id="2VJOUQTG">操作系统会检查自己的缓存，并可能向本地的 DNS 服务器发出请求。</p><p></li><li id="2VJOUR1D"></p><p id="2VJOUQTH">本地 DNS 服务器可能会递归查询其他 DNS 服务器，直到找到对应的 IP 地址。</p><p></li></ul><strong>2. 建立连接、发送请求并接收响应</strong><strong>2.1 建立 TCP 连接</strong></p><p id="2VJOUQTI">一旦获得了 IP 地址，浏览器会通过 TCP/IP 协议与服务器建立连接。对于 HTTPS，浏览器还会进行 SSL/TLS 握手，以建立安全连接。流程如下：</p><p><strong>2.2 发送 HTTP 请求</strong></p><p id="2VJOUQTK">连接建立后，浏览器会构建一个 HTTP 请求并发送给服务器。请求包括请求行（例如）、请求头（如 User-Agent、Accept 等）以及可能的请求体（对于 POST 请求）。</p><p><strong>2.3 服务器处理请求</strong></p><p id="2VJOUQTL">服务器接收到请求后，会根据请求的内容进行处理：</p><p><ul><li id="2VJOUR1E"></p><p id="2VJOUQTM">服务器解析请求，确定所需的资源（如 HTML 文件、图片、数据等）。</p><p></li><li id="2VJOUR1F"></p><p id="2VJOUQTN">服务器可能需要与后端数据库或其他服务进行交互，以生成响应内容。</p><p></li><li id="2VJOUR1G"></p><p id="2VJOUQTO">服务器构建 HTTP 响应，包括状态行（如）、响应头（如 Content-Type、Content-Length 等）和响应体（实际的页面内容）。</p><p></li></ul><strong>2.4 发送 HTTP 响应</strong></p><p id="2VJOUQTP">服务器将构建好的 HTTP 响应发送回浏览器。</p><p><strong>2.5 浏览器接收响应</strong></p><p id="2VJOUQTQ">浏览器接收到服务器的响应后，会根据响应头的信息处理响应体：</p><p><ul><li id="2VJOUR1H"></p><p id="2VJOUQTR">如果响应是重定向（如 301 或 302），浏览器会根据 Location 头再次发起请求。</p><p></li><li id="2VJOUR1I"></p><p id="2VJOUQTS">如果响应包含压缩内容（如 gzip），浏览器会解压缩。</p><p></li><li id="2VJOUR1J"></p><p id="2VJOUQTT">浏览器会根据 Content-Type 头确定如何处理响应体（如 HTML、CSS、JavaScript、图片等）。</p><p></li></ul></p><p id="2VJOUQTU">发送请求和接受响应流程如下：</p><p><strong>3. 解析和加载资源、渲染页面</strong><strong>3.1 解析 HTML</strong></p><p id="2VJOUQU0">浏览器开始解析 HTML 文档，构建 DOM 树。解析过程中，浏览器会处理各种 HTML 标签，并根据需要发起其他请求（如 CSS、JavaScript、图片等）。</p><p><strong>3.2 加载和执行资源</strong><ul><li id="2VJOUR1K"></p><p id="2VJOUQU1">CSS：浏览器解析 CSS 文件并构建 CSSOM 树，与 DOM 树结合形成渲染树。</p><p></li><li id="2VJOUR1L"></p><p id="2VJOUQU2">JavaScript：浏览器解析和执行 JavaScript 代码，可能会修改 DOM 树或 CSSOM 树。</p><p></li><li id="2VJOUR1M"></p><p id="2VJOUQU3">图片和其他资源：浏览器会异步加载这些资源，并在加载完成后进行渲染。</p><p></li></ul><strong>3.3 渲染页面</strong></p><p id="2VJOUQU4">浏览器根据渲染树计算每个元素的布局（位置和大小），并将页面绘制到屏幕上。这个过程可能会涉及多次重绘和重排（reflow/repaint），尤其是在 JavaScript 修改 DOM 或 CSS 的情况下。</p><p id="2VJOUQU5">页面渲染流程如下：</p><p><strong>4. 用户交互</strong></p><p id="2VJOUQU7">页面加载完成后，用户可以与页面进行交互。浏览器会响应用户的操作（如点击、输入等），并可能通过 JavaScript 动态更新页面内容。</p><p><strong>5. 小结</strong></p><p id="2VJOUQU8">业务系统的呈现过程主要是：URL解析、与服务器建立连接、服务器处理请求并返回响应、下载和解析响应、页面渲染。</p><p id="2VJOUQUB"><strong>02</strong></p><p>系统呈现过程中的技术点</p><p id="2VJOUQUI">理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将</p><p id="2VJOUQUK"><strong><br/>1. DNS解析优化</strong><strong>1.1 启用 DNS 预解析</strong></p><p><ul><li id="2VJOUR1N"></p><p id="2VJOUQUL">DNS 预解析（DNS Prefetching）：浏览器在用户点击链接之前，提前解析该链接的域名，从而减少等待时间。</p><p></li></ul><strong>1.2 DNS缓存优化</strong></p><p id="2VJOUQUM">合理设置 DNS 记录的 TTL（Time-To-Live），使得 DNS 记录可以在客户端和中间缓存服务器上保存适当的时间，减少重复解析请求。</p><p><ul><li id="2VJOUR1O"></p><p id="2VJOUQUN">对于不经常变化的记录，可以设置较长的 TTL 值（如 24 小时）。</p><p></li><li id="2VJOUR1P"></p><p id="2VJOUQUO">对于经常变化的记录，可以设置较短的 TTL 值（如几分钟到几小时）。</p><p></li></ul><strong>1.3 负载均衡和冗余</strong><ul><li id="2VJOUR1Q"></p><p id="2VJOUQUP">负载均衡：使用 DNS 负载均衡技术，将流量分配到多台服务器上，防止单点故障。</p><p></li><li id="2VJOUR1R"></p><p id="2VJOUQUQ">冗余配置：配置多个权威 DNS 服务器，确保在一个服务器故障时，其他服务器可以继续提供解析服务。</p><p></li></ul><strong>1.4 减少 DNS 查询次数</strong><ul><li id="2VJOUR1S"></p><p id="2VJOUQUR">合并资源：尽量将资源放在同一个域名下，减少跨域名的 DNS 查询次数。</p><p></li><li id="2VJOUR1T"></p><p id="2VJOUQUS">减少外部资源：尽量减少页面中引用的外部资源（如第三方脚本和样式），以减少额外的 DNS 查询。</p><p></li></ul><strong>2. http协议优化</strong><strong>2.1 请求方法优化</strong><ul><li id="2VJOUR1U"></p><p id="2VJOUQUT">使用合适的请求方法：确保使用正确的 HTTP 方法（GET、POST、PUT、DELETE 等）来表示操作的意图。例如，使用 GET 方法获取数据，使用 POST 方法提交数据。</p><p></li><li id="2VJOUR1V"></p><p id="2VJOUQUU">避免不必要的请求：合并请求，减少页面中的请求次数。例如，CSS 和 JavaScript 文件可以合并，图像可以使用精灵图（sprite）。</p><p></li></ul><strong>2.2 状态码优化</strong><ul><li id="2VJOUR20"></p><p id="2VJOUQUV">正确使用状态码：确保服务器返回正确的 HTTP 状态码。例如，200 表示成功，404 表示资源未找到，500 表示服务器错误。</p><p></li><li id="2VJOUR21"></p><p id="2VJOUQV0">重定向优化：减少重定向次数，避免不必要的 301 或 302 重定向。</p><p></li></ul><strong>2.3 请求头和响应头优化</strong><ul><li id="2VJOUR22"></p><p id="2VJOUQV1">压缩传输内容：使用 Gzip 或 Brotli 压缩传输内容，减少传输数据量。</p><p></li><li id="2VJOUR23"></p><p id="2VJOUQV2">缓存控制：使用缓存控制头（如 Cache-Control、Expires）来缓存静态资源，减少重复请求。</p><p></li><li id="2VJOUR24"></p><p id="2VJOUQV3">内容安全策略（CSP）：设置内容安全策略头，防止跨站脚本攻击（XSS）。</p><p></li><li id="2VJOUR25"></p><p id="2VJOUQV4">减少头部大小：删除不必要的请求和响应头，减少头部大小，加快传输速度。</p><p></li></ul><strong>2.4 HTTP/2 和 HTTP/3 优化</strong></p><p id="2VJOUQV5">a. 多路复用</p><p><ul><li id="2VJOUR26"></p><p id="2VJOUQV6">启用 HTTP/2 或 HTTP/3：这些协议支持多路复用，可以在一个 TCP 连接中同时发送多个请求和响应，减少延迟。</p><p></li><li id="2VJOUR27"></p><p id="2VJOUQV7">减少域名分片：HTTP/2 和 HTTP/3 中，多路复用使得域名分片（将资源分布到多个子域名）不再必要，反而可能降低性能。</p><p></li></ul></p><p id="2VJOUQV8">b. 头部压缩</p><p><ul><li id="2VJOUR28"></p><p id="2VJOUQV9">使用 HPACK（HTTP/2）或 QPACK（HTTP/3）头部压缩：这些协议支持头部压缩，减少传输的数据量。</p><p></li></ul></p><p id="2VJOUQVA">c. 减少延迟</p><p><ul><li id="2VJOUR29"></p><p id="2VJOUQVB">使用优先级和依赖：HTTP/2 和 HTTP/3 支持请求优先级和依赖，确保关键资源优先加载。</p><p></li><li id="2VJOUR2A"></p><p id="2VJOUQVC">启用 QUIC 协议（HTTP/3）：QUIC 协议基于 UDP，减少了连接建立的延迟，提供更快的传输速度。</p><p></li></ul><strong>4. CDN优化</strong><ul><li id="2VJOUR2B"></p><p id="2VJOUQVD">使用 CDN：将静态资源分发到全球各地的节点，减少用户访问的延迟。</p><p></li><li id="2VJOUR2C"></p><p id="2VJOUQVE">边缘计算：利用 CDN 的边缘计算能力，在靠近用户的节点上处理部分逻辑，减少服务器负载。</p><p></li><li id="2VJOUR2D"></p><p id="2VJOUQVF">静态资源托管：将静态资源（如图像、CSS、JavaScript）托管在 CDN 上，减少网络延迟，加快加载速度。</p><p></li></ul></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0827%2Fcbddb876j00sivlxo0010d200gw00btg00it00d5.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><strong>5. 页面渲染时优化</strong><strong>5.1 HTML 优化</strong></p><p id="2VJOUQVI">a. 减少 DOM 复杂度</p><p><ul><li id="2VJOUR2E"></p><p id="2VJOUQVJ">简化 HTML 结构：减少嵌套层级，避免过度复杂的 DOM 结构。</p><p></li><li id="2VJOUR2F"></p><p id="2VJOUQVK">删除不必要的元素：移除无用的 HTML 标签和注释。</p><p></li></ul></p><p id="2VJOUQVL">b. 延迟加载非关键内容</p><p><ul><li id="2VJOUR2G"></p><p id="2VJOUQVM">使用 defer 和 async：对非关键 JavaScript 文件使用或属性，避免阻塞页面渲染。</p><p></li><li id="2VJOUR2H"></p><p id="2VJOUQVN">懒加载图像和视频：使用属性或 JavaScript 实现懒加载，延迟加载视口外的图像和视频。</p><p></li></ul><strong>5.2 CSS 优化</strong></p><p id="2VJOUQVO">a. 减少 CSS 文件大小</p><p><ul><li id="2VJOUR2I"></p><p id="2VJOUQVP">压缩 CSS 文件：使用工具（如 CSSNano、CleanCSS）压缩 CSS 文件，减少文件大小。</p><p></li><li id="2VJOUR2J"></p><p id="2VJOUQVQ">移除未使用的 CSS：使用工具（如 PurgeCSS）移除未使用的 CSS 规则。</p><p></li></ul></p><p id="2VJOUQVR">b. 优化 CSS 加载</p><p><ul><li id="2VJOUR2K"></p><p id="2VJOUQVS">使用外部样式表：将 CSS 放在外部样式表中，而不是内联样式，便于缓存和管理。</p><p></li><li id="2VJOUR2L"></p><p id="2VJOUQVT">放置 CSS 在 中: 确保 CSS 文件在中加载，以便尽快渲染页面。</p><p></li><li id="2VJOUR2M"></p><p id="2VJOUQVU">避免 CSS 阻塞渲染：将关键 CSS 内联到 HTML 中，非关键 CSS 异步加载。</p><p></li></ul><strong>5.3 JavaScript 优化</strong></p><p id="2VJOUQVV">a. 减少 JavaScript 文件大小</p><p><ul><li id="2VJOUR2N"></p><p id="2VJOUR00">压缩和混淆：使用工具（如 UglifyJS、Terser）压缩和混淆 JavaScript 文件，减少文件大小。</p><p></li><li id="2VJOUR2O"></p><p id="2VJOUR01">移除未使用的代码：使用工具（如 Webpack 的 Tree Shaking）移除未使用的代码。</p><p></li></ul></p><p id="2VJOUR02">b. 优化 JavaScript 加载</p><p><ul><li id="2VJOUR2P"></p><p id="2VJOUR03">分离关键和非关键脚本：将关键脚本放在中，非关键脚本放在页面底部或使用和。</p><p></li><li id="2VJOUR2Q"></p><p id="2VJOUR04">代码分割：使用 Webpack 等工具进行代码分割，按需加载模块。</p><p></li></ul></p><p id="2VJOUR05">c. 优化 JavaScript 执行</p><p><ul><li id="2VJOUR2R"></p><p id="2VJOUR06">减少重排和重绘：避免频繁操作 DOM，使用文档片段（Document Fragment）或虚拟 DOM 技术。</p><p></li><li id="2VJOUR2S"></p><p id="2VJOUR07">使用节流和防抖：对高频率事件（如滚动、输入）使用节流（throttle）和防抖（debounce）技术，减少不必要的函数调用。</p><p></li><li id="2VJOUR2T"></p><p id="2VJOUR08">减少 JavaScript 阻塞：避免长时间运行的 JavaScript 任务，使用 Web Workers 将复杂计算移到后台线程。</p><p></li></ul><strong>5.4 图像优化</strong></p><p id="2VJOUR09">a. 减少图像文件大小</p><p><ul><li id="2VJOUR2U"></p><p id="2VJOUR0A">压缩图像：使用工具（如 ImageOptim、TinyPNG）压缩图像文件，减少文件大小。</p><p></li><li id="2VJOUR2V"></p><p id="2VJOUR0B">选择合适的格式：根据图像内容选择合适的格式（如 JPEG、PNG、WebP），WebP 通常比 JPEG 和 PNG 更小。</p><p></li></ul></p><p id="2VJOUR0C">b. 优化图像加载</p><p><ul><li id="2VJOUR30"></p><p id="2VJOUR0D">使用响应式图像：使用和属性提供不同分辨率的图像，适应不同设备。</p><p></li><li id="2VJOUR31"></p><p id="2VJOUR0E">懒加载图像：使用属性或 JavaScript 实现图像懒加载。</p><p></li></ul><strong>5.5 其他优化策略</strong></p><p id="2VJOUR0F">a. 优化字体加载</p><p><ul><li id="2VJOUR32"></p><p id="2VJOUR0G">使用字体显示策略：使用属性控制字体加载行为，避免字体闪烁（FOIT）和不可见文本（FOUT）。</p><p></li><li id="2VJOUR33"></p><p id="2VJOUR0H">减少字体文件大小：使用子集化工具（如 Google Fonts 的子集化功能）只加载需要的字符集，减少字体文件大小。</p><p></li></ul><strong>6. 小结</strong>在实际业务中我们需要针对页面呈现过程中的每一个节点，去制定不同的优化策略。</p><p id="2VJOUR0K"><strong>03</strong></p><p><strong>总结</strong></p><p id="2VJOUR0N">理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将</p><p id="2VJOUR0Q"><br/>本文主要介绍了业务系统呈现给用户所经历的各个节点，以及作为技术人能在各节点中进行优化的点， 通过这些技术优化点，在研发过程中不断创新，推动产品性能、用户体验的提升，来实现业务的增长，创造可持续的价值。</p><p id="2VJOUR0S"><strong>参考阅读</strong></p><p><ul><li id="2VJOUR34"></p><p id="2VJOUR0T">《浏览器工作原理与实践》</p><p></li><li id="2VJOUR35"></p><p id="2VJOUR0U">《一次完整的http请求过程》（https://www.cnblogs.com/bonne-chance/p/）</p><p></li><li id="2VJOUR36"></p><p id="2VJOUR0V">《前端需要了解的CDN知识》（https://juejin.cn/post/?searchId=A6E22E0045FF583A） </p><p></li></ul></p><p id="2VJOUR10">如果各位看官喜欢，留下你的的评论，留下你的赞后续可以对浏览器深入分享。</p><p id="2VJOUR11">最后欢迎大家交流学习，共同成长。</p><p id="2VJOUR13">打SAS化服务的会员徽章体系，可以作为标准的产方 点击”阅读原文“查看 技术类精选书单案统一对外输出。结合现有平台通用能力，实现会员行为全路径覆盖，并能结合企业自身业务特点，规划相应的会员精准营销活动，提升会员忠诚度和业务的持续增长。</p><p id="2VJOUR15">底层能力：维护用户基础数据、行为数据建模、用户画像分析、精准营销策略的制定</p><p id="2VJOUR16">▪功能支撑：会员成长体系、等级计算策略、权益体系、营销底层能力支持</p><p id="2VJOUR17">▪用户活跃：会员关怀、用户触达、活跃活动、业务线交叉获客、拉新促活</p><p>‍‍</p>