论坛 › 湖南 › 百度Web前端研发实战案例解析

wloe2gf 发表于 2024-7-8 20:43:52

百度Web前端研发实战案例解析

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从 Web 诞生到如今，Web 前端技术<span style="color: black;">已然</span>逐步成长为一个丰富且有活力的技术世界。随着互联网行业发展格局的频繁演进以及<span style="color: black;">制品</span>策略的<span style="color: black;">持续</span><span style="color: black;">调节</span>，<span style="color: black;">区别</span><span style="color: black;">周期</span>的业务在技术选型、前端性能优化、用户交互体验上<span style="color: black;">持续</span>产生新的需求，<span style="color: black;">持续</span>地对 Web 前端技术提出新的<span style="color: black;">需求</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">10 月 27 日，82 期百度技术沙龙，邀请了数位百度前端技术部 Web 前端资深<span style="color: black;">开发</span>工程师，从 Web 前端技术出发，<span style="color: black;">经过</span>五个主题，<span style="color: black;">安身</span><span style="color: black;">此刻</span>面向<span style="color: black;">将来</span>，由内到<span style="color: black;">外区</span>分享百度在搜索组件化的探索、搜索体验<span style="color: black;">加强</span>、开放 Web 速度优化及开放 Web <span style="color: black;">将来</span>发展发面的技术沉淀和<span style="color: black;">累积</span>。</p>
    <span style="color: black;">1</span> 搜索组件化探索与实践 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>进行分享的是百度前端技术部资深<span style="color: black;">开发</span>工程师陈骁带来的《搜索组件化的探索与实践》。</p>
    <span style="color: black;">为何</span>搜索要做组件化？ <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">据陈骁介绍，最<span style="color: black;">起始</span>的百度搜索移动端的前端架构是从 PC 时代迁移过来，服务器端<span style="color: black;">运用</span> Smarty 来渲染模版，实现前后端分离。前端<span style="color: black;">运用</span> Zepto 来完成交互<span style="color: black;">规律</span>，<span style="color: black;">然则</span>它的扩展性比较有限，难以实现对 HTML、CSS 代码的组件化管理，随着移动端的交互形式越来越<span style="color: black;">繁杂</span>，<span style="color: black;">本来</span>的<span style="color: black;">方法</span><span style="color: black;">显现</span>了局限性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">于是，组件化应运而生。组件化是把<span style="color: black;">有些</span>可复用的单元提取出来，<span style="color: black;">经过</span>对几个组件的管理，实现对<span style="color: black;">全部</span>搜索结果页样式的<span style="color: black;">掌控</span>，<span style="color: black;">加强</span><span style="color: black;">研发</span>的效率和横向团队整体升级的效率。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">日前</span>百度<span style="color: black;">已然</span>有了非常多的组件化<span style="color: black;">处理</span><span style="color: black;">方法</span>，<span style="color: black;">包含</span> Lavas 和 Reac t。<span style="color: black;">能够</span><span style="color: black;">详细</span>到组件语法、<span style="color: black;">基本</span>框架以及同构区块。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如下图所示，组件语法<span style="color: black;">包含</span>四部分：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Template：组件代理结构</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">浏览器端：组件前端<span style="color: black;">规律</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Style：前端样式</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Config：同构<span style="color: black;">规律</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0A9JSv2h4EI4fT8VxP0sLpJRn5WIWTsawcN6kzxuTfQ4AnPsGfjQzYsg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前三部分基本能够覆盖组件的常用语法，而同构在服务器端和浏览器端都能执行，<span style="color: black;">重点</span>有 props、data、components、computed 等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>这个组件代码怎么在线上跑起来呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>会在线下<span style="color: black;">经过</span>编译器，把它编译成 PHP、JavaScript 两份原码。PHP 的编译产物完全<span style="color: black;">运用</span> PHP 的语法，<span style="color: black;">能够</span>在后端形成一个 Server Runtime，在这个过程中，<span style="color: black;">亦</span>能够把 PHP 的编译产物渲染成字符串，<span style="color: black;">经过</span>网络传输到浏览器端。而在浏览器端运行时<span style="color: black;">能够</span>用编码产物 Javascript 的组件，渲染成可操作的 HTML 代理结构，<span style="color: black;">包含</span>它的事件和交互。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中的难点在于怎么把一个组件代码编译成在 PHP、在 JS 都能跑的组件代码。百度会做<span style="color: black;">针对</span>模板和<span style="color: black;">有些</span>表达设计的处理。例如，模板代码有一个文本节点，有一个自定义组件，在编译的过程中，会利用编译器把它转化成抽象语法树，形成树的结构，<span style="color: black;">每一个</span>节点都有<span style="color: black;">有些</span>属性和信息，利用语法树的结构和属性信息，就<span style="color: black;">能够</span><span style="color: black;">经过</span>代码生成器分别生成 PHP 和 JS 的代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0ASvjJ2arED6BB2fO8EZCaC48iaFAdQWZ5vpIHV7fVGd3YmbaHHDUMrxQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>还有一个问题，<span style="color: black;">为何</span><span style="color: black;">必须</span>一个同构区块呢？这是<span style="color: black;">由于</span>同构区块<span style="color: black;">能够</span>很好<span style="color: black;">掌控</span>服务器端能执行的代码，方便语法解析。<span style="color: black;">另一</span>，百度对同构代码块进行语法限制，以<span style="color: black;">保准</span>服务器端的稳定性，<span style="color: black;">亦</span><span style="color: black;">能够</span>更加方便解析成想要的 PHP 代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>改造，组件化渲染框架不仅<span style="color: black;">能够</span>使得效率<span style="color: black;">提高</span>，<span style="color: black;">保准</span>了体验一致性，<span style="color: black;">况且</span>进行了横向升级降低成本。</p>
    性能优化 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">针对服务器端的渲染性能，百度做了非常细致的优化：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在框架层，对渲染流程进行了简化，添加了缓存；</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在<span style="color: black;">基本</span>组件层，对<span style="color: black;">掌控</span>的简单组件进行编译优化；</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在业务层，<span style="color: black;">供给</span>先验<span style="color: black;">工具</span>、准入规范，线上监控和报警，并<span style="color: black;">供给</span> a-nossr 指令。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span>组件是<span style="color: black;">怎样</span>在服务器端渲染成想要的 HTML 字符串呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如下图所示，会经过以下<span style="color: black;">过程</span>：<span style="color: black;">首要</span>，加载组件的配置，创建组件的实例。在实例的创建过程中，对这个组件所有的数据进行初始化，<span style="color: black;">包含</span><span style="color: black;">有些</span>特征和计算属性，得到初始化状态以后，再渲染出虚拟 DOM 树，把<span style="color: black;">全部</span>组件节点数渲染成一个实例的形式，用虚拟 DOM 树渲染成 HTML 字符串。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0AZ5bISngp467F4TTltuerraFZ63j9o4YlybszoC5PJdVJib3OrV3CyNw/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">与此<span style="color: black;">同期</span>，百度搜索对<span style="color: black;">全部</span>渲染的过程进行了简化。在框架层，<span style="color: black;">经过</span>创建虚拟 DOM，减少了一次递归，<span style="color: black;">亦</span>减少了在线上运行时的<span style="color: black;">规律</span>。在<span style="color: black;">基本</span>组件层，百度对横向团队能够完全<span style="color: black;">掌控</span>的<span style="color: black;">有些</span>简单组件进行了优化。利用 HTML 编译器编译成语法树，语法树对它每一个 AST 节点进行优化，<span style="color: black;">经过</span>将 Tag 直接定义为普通的 DOM 节点的<span style="color: black;">办法</span>，生成最后想要的函数代码。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0A41us9eticMvPictkZyLkNEXYc9iaQFyGJZATXM4SgpemxmQ03BCl6c11A/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">框架层：渲染流程简化</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0AOQKcPJWBlzan1E19JGWsz6HQGRthjD5Sf26W3Ug1MJ24u3ibtB1ibDZg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">简单组件编译优化</span></p>
    <span style="color: black;">日前</span><span style="color: black;">发展</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">日前</span>，百度<span style="color: black;">供给</span>搜索组件化的<span style="color: black;">工具</span>。<span style="color: black;">例如</span>搜索 Web <span style="color: black;">没</span><span style="color: black;">阻碍</span>规划、搜索性能准入规范、搜索设计规范；服务方面<span style="color: black;">包含</span>性能监控、前后端<span style="color: black;">反常</span>监控等；运行方面<span style="color: black;">供给</span> VSL 语音交互框架<span style="color: black;">帮忙</span><span style="color: black;">研发</span>者<span style="color: black;">研发</span><span style="color: black;">有些</span>语音交互<span style="color: black;">规律</span>；工程方面<span style="color: black;">供给</span>搜索敏捷平台，<span style="color: black;">帮忙</span><span style="color: black;">研发</span>者直接完成联调、提测、上线；在应用方面，有卡片、<span style="color: black;">照片</span>搜索、咨询搜索、移动端的首页，还有<span style="color: black;">有些</span>独立的站，<span style="color: black;">包含</span>百度体育和百度招聘。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0Av0NtVibrJkEyYaYNyUnj24yrlMCVVuZuicCM7ZYLalfZ9jYnJCfJWtMA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">搜索组件化技术全景图</span></p>
    <span style="color: black;">2</span> 移动体验标准化建设 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二个 Session <span style="color: black;">是由于</span>百度前端技术部资深前端工程师刘浪宇带来的《移动体验标准化建设》。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">极致的用户体验是 Web <span style="color: black;">制品</span>所追求的，<span style="color: black;">那样</span>什么是好的用户体验，<span style="color: black;">怎样</span>去量化用户体验做到好的体验呢？<span style="color: black;">首要</span><span style="color: black;">必须</span>有一套清晰的体验<span style="color: black;">指点</span>标准，<span style="color: black;">而后</span>再去落地。</p>
    移动体验指南 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">移动体验指南是基于移动 Web 生态提出一套通用的体验<span style="color: black;">指点</span>规范，目的是更好地服务于用户及<span style="color: black;">制品</span>的系统，为广大用户<span style="color: black;">供给</span><span style="color: black;">优秀</span>的体验。从用户的体验层次、交互和移动 Web <span style="color: black;">状况</span>，百度归纳出六个纬度：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>，快速的信息呈现。速度快慢直接影响用户对站点的体验评级，<span style="color: black;">因此</span>让主<span style="color: black;">身体</span>容快速呈现给用户才是<span style="color: black;">优秀</span>的体验必需的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二，设计交互层面强调一致性。一致的设计交互<span style="color: black;">能够</span>利用用户的学习经验，降低学习和<span style="color: black;">运用</span>的成本。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三，好<span style="color: black;">制品</span><span style="color: black;">必须</span>做到让用户低成本、<span style="color: black;">有效</span>地完成所有交互操作，整体操作要清晰<span style="color: black;">没</span>阻，带给用户最流畅的体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第四，内容强调<span style="color: black;">优秀</span>阅读观感。站点的内容可读性、内容本身质量<span style="color: black;">是不是</span>能够达到，都是<span style="color: black;">优秀</span>的体验所必需的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第五，情感层面有两点，<span style="color: black;">首要</span>是愉悦的情感认知，其次是让用户对站点信任，页面<span style="color: black;">是不是</span>安全、<span style="color: black;">是不是</span><span style="color: black;">即时</span><span style="color: black;">通知</span>流量信息等等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第六，关于强健的场景适配，优秀的站点应当适合于<span style="color: black;">区别</span>的人群和宿主环境。</p>
    移动体验检测平台 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有了体验指南，<span style="color: black;">怎样</span>快速<span style="color: black;">晓得</span>站点存在<span style="color: black;">那些</span>问题？这就<span style="color: black;">必须</span>体验检测平台 Radar。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Radar 的最底层是 Headless &nbsp;Chrome，百度<span style="color: black;">经过</span>协议接口<span style="color: black;">能够</span>非常快捷地操作这个浏览器。中间的运行是基于谷歌开源的一个网页<span style="color: black;">工具</span> Lighthouse 。它<span style="color: black;">重点</span>有两个内容，<span style="color: black;">第1</span>是网页数据收集，<span style="color: black;">经过</span>数据分析<span style="color: black;">得到</span>数据，<span style="color: black;">根据</span>规则的<span style="color: black;">必须</span>，<span style="color: black;">针对</span>这些数据进行分析后输出想要的结果。第二，Radar 的核心是非常多的规则，<span style="color: black;">重点</span>分两类，一类是普通的，一类是交互的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">刘浪宇以交互的规则为例，<span style="color: black;">仔细</span>阐述了一个规则是<span style="color: black;">怎样</span>实现的。如下图，交互的规则<span style="color: black;">重点</span>分为两部分，<span style="color: black;">第1</span>是场景识别，第二是交互分析。举一个比较简单的例子，当用户在页面看到一个输入框时，觉得点击<span style="color: black;">能够</span>直接输入是一个良好的体验。<span style="color: black;">那样</span><span style="color: black;">怎样</span>量化这个规则呢？<span style="color: black;">首要</span>是场景识别，找到在这个页面中看起来像评论输入框的元素。<span style="color: black;">而后</span>找<span style="color: black;">有些</span>特征，从海量数据里面标注、提取<span style="color: black;">有些</span>通用特征之后为这个场景<span style="color: black;">创立</span>特征库。之后再基于场景所<span style="color: black;">必须</span>的特征，进行网页结构化数据提取。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0A3SmKJkAsWGFKicKQIf2BU1ciahJGmz3FbaxztNgP1tyxNZJsqbgm6zSg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Radar 规则架构（交互类规则为例）</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来这些场景元素就要进行交互分析，<span style="color: black;">首要</span>进行深度筛选<span style="color: black;">而后</span>进行交互操作。以模拟屏幕的点击举例，点击之前用户会看页面的变动，<span style="color: black;">例如</span>说 DOM 的变动、<span style="color: black;">转</span>的变动，<span style="color: black;">而后</span>对变动进行分析，看<span style="color: black;">是不是</span>符合预期。</p>
    <span style="color: black;">3</span>基于 Custom &nbsp;Elements 标准组件化构建 Web 应用<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三个主讲人是百度前端技术部资深前端工程师邹淼江，他现场分享了<span style="color: black;">怎样</span><span style="color: black;">有效</span>快速的构建一个体验良好的 Web 应用、基于 Custom Elements 标准的组件化设计、<span style="color: black;">怎样</span><span style="color: black;">提高</span>用户端体验和<span style="color: black;">研发</span>效率。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>看自定义标签，自定义标签在功能上<span style="color: black;">规律</span>上与 JavaBean 类似，都封装 Java 代码，是可重用的组件代码，并且<span style="color: black;">准许</span><span style="color: black;">研发</span>人员为<span style="color: black;">繁杂</span>的操作<span style="color: black;">供给</span><span style="color: black;">规律</span>名<span style="color: black;">叫作</span>。<span style="color: black;">另一</span>，自定义标签<span style="color: black;">拥有</span>⽀持⽆<span style="color: black;">阻碍</span>、<span style="color: black;">加强</span><span style="color: black;">研发</span>效率、<span style="color: black;">评定</span>性能、对 SEO 良好的特点。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中，<span style="color: black;">怎样</span><span style="color: black;">运用</span>自定义标签进行性能<span style="color: black;">评定</span>呢？百度<span style="color: black;">供给</span>了一套搜索引擎的验证<span style="color: black;">工具</span>。<span style="color: black;">例如</span>，符合某一种规则的 Custom &nbsp;Elements，给它标高分，为符合高性能标签。但<span style="color: black;">倘若</span><span style="color: black;">运用</span> DIV 的方式，搜索引擎没办法<span style="color: black;">晓得</span>布局是不是高性能，<span style="color: black;">亦</span>没办法<span style="color: black;">晓得</span>所对应的 JS <span style="color: black;">怎样</span>实现，<span style="color: black;">倘若</span>有了 Custom &nbsp;Elements 的标准，就能清晰地<span style="color: black;">晓得</span>这个页面想干什么。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">基于此，<span style="color: black;">咱们</span><span style="color: black;">能够</span>设想：<span style="color: black;">倘若</span>完全<span style="color: black;">运用</span>这些 Custom &nbsp;Elements 语义化标签构建 Web 站点可行吗？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这就<span style="color: black;">必须</span>引入组件化设计。其实<span style="color: black;">日前</span>存在的组件化设计都千篇一律，把一个页面的功能模块以组件树状的形式自由组合，堆积成一个功能的页面<span style="color: black;">或</span>是模块，这<span style="color: black;">便是</span>组件的结构。<span style="color: black;">详细</span><span style="color: black;">需求</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">每⼀个 Custom Element 是⼀个组件</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件内部实现相应的交互、功能和数据处理<span style="color: black;">规律</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件之间<span style="color: black;">规律</span>和样式是独⽴隔离的</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件是<span style="color: black;">能够</span>通信的</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">组件是可复⽤的</span></p>
    Web Components 标准 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Web Components <span style="color: black;">指的是</span><span style="color: black;">经过</span>一种标准化的非侵入的方式封装的一个组件。<span style="color: black;">重点</span>标准<span style="color: black;">包含</span> Custom Elements，Shadow DOM，HTML Templates，HTML Imports 等多个维度的规范与实现。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Custom Elements 是<span style="color: black;">供给</span>一种方式让<span style="color: black;">研发</span>者<span style="color: black;">能够</span>自定义 HTML 元素，<span style="color: black;">包含</span>特定的<span style="color: black;">构成</span>，样式和<span style="color: black;">行径</span>。支持 Web Components 标准的浏览器会<span style="color: black;">供给</span>一系列 API 给<span style="color: black;">研发</span>者用于创建自定义的元素，<span style="color: black;">或</span>扩展现有元素。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Shadow DOM 旨在<span style="color: black;">供给</span>一种更好地组织页面元素的方式，来为日趋<span style="color: black;">繁杂</span>的页面应用<span style="color: black;">供给</span>强大支持，避免代码间的相互影响。<span style="color: black;">研发</span>者可利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">HTML Imports 是一种在 HTML 中引用以及复用其他的 HTML 文档的方式，<span style="color: black;">能够</span>简单理解为<span style="color: black;">平常</span>的模板中的 include 之类的<span style="color: black;">功效</span>。<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">经过</span> HTML &nbsp;Import 的形式，直接将做的 Custom &nbsp;Elements 的标签放进 HTML 中进行渲染渲染。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0Au02UQ1DkDCYUdTcWW1urg4v0EK09eIyECIyzprkpIyUuzuQ5jnx7Pg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Web Components 兼容性</span></p>
    <span style="color: black;">4</span> 搜索落地页体验技术及应用 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第四个主题由百度前端技术部前端工程师李兆明讲述。<span style="color: black;">怎样</span>更快、更好的将各类搜索结果页面传递到用户端<span style="color: black;">始终</span><span style="color: black;">败兴</span>是百度搜索前端的核心关注点。基于此，李兆明分别从<span style="color: black;">怎样</span>让落地页加载更快，<span style="color: black;">怎样</span>让搜索结果页和落地页之间切换更加顺滑以及<span style="color: black;">将来</span>的新标准，介绍百度搜索落地页体验技术的探索。</p>
    <span style="color: black;">怎样</span>让落地页加载更快 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">思路一：提前加载。<span style="color: black;">经过</span> Resource Hint 提示浏览器预解析域名、<span style="color: black;">创立</span>预连接，<span style="color: black;">乃至</span>进行预渲染。若是不支持的浏览器，则<span style="color: black;">能够</span><span style="color: black;">经过</span> JavaScript 模拟一部分。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">思路二：抓取数据。<span style="color: black;">经过</span>开放平台提交数据，由百度来渲染。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">思路三：MIP / AMP。MIP <span style="color: black;">供给</span>多重<span style="color: black;">办法</span>，让<span style="color: black;">运用</span> MIP 技术的页面加载速度更上一层楼。例如，CDN 加速服务；<span style="color: black;">运用</span> MIP 设计的网站<span style="color: black;">无</span>任何<span style="color: black;">能够</span>阻塞渲染的脚本，所有脚本都在页面主体加载完成后才执行。<span style="color: black;">另外</span>，MIP <span style="color: black;">需求</span>所有页面都是静态的，<span style="color: black;">倘若</span>有<span style="color: black;">必须</span>实时更新的数据<span style="color: black;">必须</span>异步获取，<span style="color: black;">这般</span>设计节省了后端的渲染时间。</p>
    <span style="color: black;">怎样</span>把两个页面融合在<span style="color: black;">一块</span>？ <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其实，<span style="color: black;">没</span>论有多少优化加载速度的手段，归根结底离不开页面<span style="color: black;">转</span>。<span style="color: black;">然则</span>，浏览器<span style="color: black;">转</span>相对<span style="color: black;">来讲</span><span style="color: black;">不足</span>平滑，用户体验<span style="color: black;">不足</span>好，能<span style="color: black;">不可</span>把前后两个页面融合到<span style="color: black;">一块</span>呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">答案当然是肯定的。李兆明在<span style="color: black;">保准</span>体验、<span style="color: black;">保证</span>安全及保持开放的<span style="color: black;">基本</span>上，讲解了百度前端搜索的<span style="color: black;">处理</span><span style="color: black;">方法</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">保准</span>体验：<span style="color: black;">经过</span> Iframe 加载页面；<span style="color: black;">经过</span> PostMessage 等<span style="color: black;">办法</span>实现交互动效。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">保证</span>安全：不<span style="color: black;">准许</span><span style="color: black;">运用</span><span style="color: black;">外边</span>脚本，<span style="color: black;">必须</span>封装组件审核；<span style="color: black;">经过</span>校验<span style="color: black;">保证</span> HTML 符合规范。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">保持开放：<span style="color: black;">经过</span> GitHub <span style="color: black;">跟踪</span><span style="color: black;">研发</span>。</span></p>
    展望新技术 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">将来</span>，百度搜素将基于域名、Iframe 渲染问题，为<span style="color: black;">研发</span>者带来 Navigation Transition、Promotable Iframe、Portals 及 Web Packaging 新标准，带来最流畅的体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Navigation Transition：页面切换的交互方式。<span style="color: black;">处理</span>了跨域问题，<span style="color: black;">无</span> Iframe 渲染的历史包袱。<span style="color: black;">不外</span>前一个页面依然<span style="color: black;">不可</span><span style="color: black;">掌控</span>后一个页面的加载、渲染。iframe <span style="color: black;">能够</span>提前加载，<span style="color: black;">然则</span> Navigation Transitions <span style="color: black;">必定</span>要在用户切换的时候加载。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Promotable Iframe：与 Iframe <span style="color: black;">关联</span>，核心代码是 Promotable 的 API，只要调用 Promotable，就会调动页面的一小块，而后调动<span style="color: black;">全部</span>页面及内容。<span style="color: black;">然则</span>这种<span style="color: black;">办法</span><span style="color: black;">触及</span><span style="color: black;">有些</span>生命周期的管理和 JS 的回收问题，是<span style="color: black;">不足</span>安全的实现，<span style="color: black;">况且</span><span style="color: black;">这般</span><span style="color: black;">无</span><span style="color: black;">处理</span> CDN 的问题，依然<span style="color: black;">必须</span>改域名。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Portals：传送门，将一个页面传送另一个页面。这个标准是 Promotable Iframe 的<span style="color: black;">加强</span>，引入了一个新的 HTML 标签 portal，这个标签用来替代 Iframe <span style="color: black;">表示</span><span style="color: black;">一起</span>网页，写法和 Iframe 类似。<span style="color: black;">然则</span>它比 Iframe 多一个功能，<span style="color: black;">便是</span><span style="color: black;">能够</span><span style="color: black;">经过</span> “active” <span style="color: black;">办法</span>激活它。与此<span style="color: black;">同期</span>， portal 的子文档会收到一个 portal zactive 事件，事件中<span style="color: black;">能够</span>拿到它的上级元素，<span style="color: black;">这般</span>又<span style="color: black;">能够</span>把上级元素当成一个 portal <span style="color: black;">插进</span>回自己的文档流，使得页面切换回去<span style="color: black;">作为</span>可能。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Web &nbsp;Packaging：<span style="color: black;">处理</span>了 CDN 跨越问题。这个标准<span style="color: black;">包含</span>三方面：签名、打包、加载。如下图，左边内容<span style="color: black;">供给</span>者是站长，缓存的 CDN 类比 MIP 的 CDN ，右边是<span style="color: black;">拜访</span>用户，用户浏览<span style="color: black;">咱们</span>百度搜索结果页的时候，<span style="color: black;">经过</span> MIP 的 Cache CDN 提前把数据取过来，用户真正点击的时候，直接从刚才取回来的页面去加载它。<span style="color: black;">因为</span>内容本身是内容<span style="color: black;">供给</span>者<span style="color: black;">供给</span>的，<span style="color: black;">因此</span>他<span style="color: black;">能够</span><span style="color: black;">针对</span>自己 URL 进行签名。有了这个签名且签名有效的时候，浏览器<span style="color: black;">能够</span>自己<span style="color: black;">表示</span>原始的网址，<span style="color: black;">同期</span>原始的网址<span style="color: black;">能够</span>和原来的服务器进行交互，像<span style="color: black;">经过</span>原网址打开的<span style="color: black;">同样</span>，<span style="color: black;">处理</span>了 CDN 跨域问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/YriaiaJPb26VP8DSRQVoibq3tLViaSp2XD0Axc1iaEJ4oDFITQjMzZ5ic3dQ4qicuA4fRDDa4OfMaHumcAaTnicKn85dCQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <span style="color: black;">5</span> <span style="color: black;">怎样</span><span style="color: black;">经过</span> Lavas 快速构建 PWA 站点 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后一个主题的讲师是百度前端技术部资深<span style="color: black;">开发</span>工程师王轶盛为<span style="color: black;">大众</span>介绍<span style="color: black;">怎样</span><span style="color: black;">经过</span> Lavas 快速构建 PWA 站点。</p>
    PWA <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">PWA（Progress Web App）是 WEB <span style="color: black;">将来</span>的发展方向。从体验上<span style="color: black;">来讲</span>，PWA 接近原生 APP，<span style="color: black;">经过</span> Manifest 技术<span style="color: black;">准许</span>用户快速打开站点并<span style="color: black;">得到</span>沉浸式的体验，<span style="color: black;">经过</span> Service Worker 能够做到资源预加载和离线可用等从而<span style="color: black;">提高</span>性能和可用性；<span style="color: black;">同期</span> PWA 又<span style="color: black;">持有</span> Web 站点的<span style="color: black;">一起</span><span style="color: black;">优良</span>：免安装和自动更新。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但与 Web 站点<span style="color: black;">区别</span>的是，PWA 又<span style="color: black;">拥有</span><span style="color: black;">靠谱</span>、快速、黏性等特点：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>是<span style="color: black;">靠谱</span>。在断网的<span style="color: black;">状况</span>下，PWA 可做到比较友好的离线提示，这个是 PWA 断网的最高级，叫断网可用。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二是快速。53% 的用户会放弃加载时间超过 3 秒的网站，越快的加载速度就有越少的用户流失。PWA <span style="color: black;">供给</span> Service &nbsp;Worker，确定<span style="color: black;">那些</span><span style="color: black;">拜访</span>缓存、<span style="color: black;">那些</span><span style="color: black;">拜访</span>网页，缩短加载时间。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三是黏性。黏性<span style="color: black;">指的是</span>用户<span style="color: black;">拜访</span>过一次，下一次<span style="color: black;">拜访</span><span style="color: black;">是不是</span>麻烦。PWA 会用一个半秒的<span style="color: black;">起步</span>动画来<span style="color: black;">保准</span>浏览器首页<span style="color: black;">起步</span>的顺滑。<span style="color: black;">另一</span>，<span style="color: black;">起步</span>之后<span style="color: black;">无</span>的<span style="color: black;">位置</span>栏、菜单栏，<span style="color: black;">保准</span>用户的沉浸式体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从技术层面讲，PWA 有分为四部分：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>是 Service &nbsp;Worker 。定义预缓存、网络拦截和缓存策略。它本身是一个 Worker，有专门的语法，<span style="color: black;">必须</span> CACHES API，<span style="color: black;">必须</span>注册及更新。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二是 Manifest 。这是一个 Json 文件，定义快速入口，<span style="color: black;">起步</span>动画。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三是 Web Push and Notification 。是服务器推送给客户端的主动<span style="color: black;">通告</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第四是 APP Shell 。这并不是新技术，但它是常用的 PWA 架构。简单<span style="color: black;">来讲</span>，<span style="color: black;">便是</span>把一个 APP 分<span style="color: black;">成为了</span>外壳和内容，用 Service &nbsp;Worker 把外壳缓存起来，将里面的页面进行<span style="color: black;">转</span>。</p>
    <span style="color: black;">经过</span> Lavas 搭建 PWA 站点 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Lavas <span style="color: black;">包含</span><span style="color: black;">工具</span>、文档以及对应的<span style="color: black;">处理</span><span style="color: black;">方法</span>和建站模板，是一个开源的<span style="color: black;">处理</span><span style="color: black;">方法</span>。Lavas 本身有两部分，Lavas cli 和 Lavas core，内部用 Vue + Vue Router + Vuex 搭建站点，内置两套模板 (basic &amp; app-shell)，支持传统模式 SPA 和 SSR 快速渲染，<span style="color: black;">能够</span>快速<span style="color: black;">持有</span> PWA 特性，灵活性强，配置简单，<span style="color: black;">况且</span>文档<span style="color: black;">即时</span>更新，内容完整。<span style="color: black;">经过</span> Lavas 搭建 PWA 站点<span style="color: black;">重点</span>有八个<span style="color: black;">过程</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">准备环境 &amp; 初始化项目。安装 Lavas cli，初始化项目，<span style="color: black;">选取</span>模板，安装依赖。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">创建新页面。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">添加链接。<span style="color: black;">运用</span> &lt;router-link&gt;，<span style="color: black;">重视</span>和 Vue 保持一致，to 属性指明<span style="color: black;">目的</span>页面，支持字符串格式的<span style="color: black;">位置</span>，支持对象。<span style="color: black;">而后</span><span style="color: black;">起步</span>调试服务器。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">和服务端通讯。安装 axios，引入 axios，向后端发送请求。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">运用</span> Vues 管理数据。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">创建 STORE，<span style="color: black;">必须</span>定义<span style="color: black;">有些</span>内容。把请求数据移动到 action 里面，获取成功后调用 commit 触发 mutation 去更改 state。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">在组件中，<span style="color: black;">经过</span> store.dispatch 触发 action 获取数据，<span style="color: black;">而后</span><span style="color: black;">经过</span> mapState 把 state 和计算属性<span style="color: black;">相关</span>，最后<span style="color: black;">经过</span>计算属性在页面上<span style="color: black;">运用</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">配置 Manifest 。Manifestt.json 定义了<span style="color: black;">起步</span> URL，定义<span style="color: black;">各样</span>尺寸的 icon，定义动画配色和<span style="color: black;">起步</span>模式。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">配置 Service Worker。配置，指定模板位置、构建位置</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">构建和上线。执行构建命令 &gt; lavas build；<span style="color: black;">起步</span>生产环境 &gt; cd dist，&gt; lavas start。</span></p>
    Lavas 技术原理 <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Lavas 的技术原理<span style="color: black;">重点</span>有自动生成路由规则、Skeleton、App Shell。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Vue &nbsp;Router <span style="color: black;">必须</span>四个<span style="color: black;">过程</span>做整件事情：<span style="color: black;">第1</span>步定义和引用组件，第二步把组件和路由联系起来，第三步是把<span style="color: black;">刚才</span>联系起来的数据放到 Router 函数创建实例，第四是把 Router 放到 VUE 创建实例，结束 Vue 实例挂载就。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">经过改进， Router <span style="color: black;">不消</span>自己定义页面级组件，<span style="color: black;">能够</span>认定只要在 Pages 目录中，那组件都是页面级的，从而<span style="color: black;">能够</span>实现自动化 Import，不<span style="color: black;">必须</span>每次写一大堆的代码。<span style="color: black;">另一</span>，绝大<span style="color: black;">都数</span><span style="color: black;">状况</span>路由规则和组件名<span style="color: black;">叫作</span>是有对应关系的。自动生成路由规则映射，省去了列出映射关系的麻烦，<span style="color: black;">亦</span>避免后期组件改名带来的<span style="color: black;">守护</span>成本。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Skeleton 叫骨架屏，<span style="color: black;">便是</span><span style="color: black;">实质</span>内容展现之前，有个大概内容给用户看，<span style="color: black;">这般</span>用户提前看到<span style="color: black;">有些</span>东西。这是 Loading 升级版，<span style="color: black;">由于</span><span style="color: black;">每一个</span>组件<span style="color: black;">能够</span>自定义样式、切换<span style="color: black;">机会</span>、列表等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Lavas 的 Skeleton 都<span style="color: black;">能够</span>用，实现思路是 Vue 的挂载点<span style="color: black;">通常</span>是个空的 DIV，在构建时将 Skeleton 的内容添加到挂载点中，Vue 挂载前清空 DIV 内的占位内容，挂载后渲染为<span style="color: black;">实质</span>内容，<span style="color: black;">运用</span> SW 预缓存 HTML，<span style="color: black;">拜访</span>时直接从缓存中获取 HTML，<span style="color: black;">这般</span><span style="color: black;">能够</span>让用户看到占位的东西。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">App Shell，<span style="color: black;">便是</span>把一个 APP 分两部分，有外壳和内容，把外壳缓存起来，每打开页面先把外壳拿出来，<span style="color: black;">而后</span>再是内容渲染。App &nbsp;Shell 实现有两个<span style="color: black;">过程</span>，<span style="color: black;">第1</span>是划分，告诉程序哪部分是外壳、哪部分是内容；第二是程序把外壳缓存起来。这<span style="color: black;">必须</span>实现两方面，<span style="color: black;">第1</span>是 SPA，首次请求服务器返回 Index.HTML，所有页面的渲染均由 JS 完成，<span style="color: black;">仅在</span>挂载点内重新渲染，单页 Index.html <span style="color: black;">便是</span> Shell，<span style="color: black;">运用</span> SW 预缓存 Index.html <span style="color: black;">就可</span>。第二是 SSR，首次请求服务器返回给<span style="color: black;">所有</span>内容，后续页面的渲染由 JS 完成。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Web 生态的发展<span style="color: black;">便是</span>互联网的发展，新技术的不断涌现和新场景的<span style="color: black;">持续</span>实现<span style="color: black;">亦</span>让这个开放的生态得以<span style="color: black;">连续</span>繁荣。王轶盛<span style="color: black;">暗示</span>，百度<span style="color: black;">期盼</span>国内的<span style="color: black;">研发</span>者与站长能够多多参与到 PWA 项目中，<span style="color: black;">一起</span>建设和改善国内的 Web App 生态。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>

听听海 发表于 2024-8-29 22:28:44

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

cvh132 发表于 2024-9-8 20:09:13

你的话深深触动了我，仿佛说出了我心里的声音。

nykek5i 发表于 2024-10-4 06:54:29

你的见解真是独到，让我受益匪浅。

m5k1umn 发表于 2024-10-14 00:09:40

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。

qzmjef 发表于 2024-10-15 10:45:24

认真阅读了楼主的帖子，非常有益。

1fy07h 发表于 2024-10-15 18:43:05

楼主的文章深得我心，表示由衷的感谢！

wrjc1hod 发表于 2024-10-16 06:40:25

你说得对，我们一起加油，未来可期。

7wu1wm0 发表于 2024-11-5 23:37:14

在遇到你之前，我对人世间是否有真正的圣人是怀疑的。

查看完整版本: 百度Web前端研发实战案例解析