从 Web 出身到如今，Web 前端技能已经逐步发展为一个丰富且有活力的技能天下。随着互联网行业发展格局的频繁演进以及产品策略的不断调度，不同阶段的业务在技能选型、前端性能优化、用户交互体验上不断产生新的需求，不断地对 Web 前端技能提出新的哀求。
10 月 27 日，82 期百度技能沙龙，约请了数位百度前端技能部 Web 前端资深研发工程师，从 Web 前端技能出发，通过五个主题，立足现在面向未来，由内到外地分享百度在搜索组件化的探索、搜索体验增强、开放 Web 速率优化及开放 Web 未来发展发面的技能沉淀和积累。
首先进行分享的是百度前端技能部资深研发工程师陈骁带来的《搜索组件化的探索与实践》。
为什么搜索要做组件化？
据陈骁先容，最开始的百度搜索移动真个前端架构是从 PC 时期迁移过来，做事器端利用 Smarty 来渲染模版，实现前后端分离。前端利用 Zepto 来完成交互逻辑，但是它的扩展性比较有限，难以实现对 HTML、CSS 代码的组件化管理，随着移动真个交互形式越来越繁芜，原来的方案涌现了局限性。
于是，组件化应运而生。组件化是把一些可复用的单元提取出来，通过对几个组件的管理，实现对全体搜索结果页样式的掌握，提高开拓的效率和横向团队整体升级的效率。
目前百度已经有了非常多的组件化办理方案，包括 Lavas 和 Reac t。可以详细到组件语法、根本框架以及同构区块。
如下图所示，组件语法包括四部分：
Template：组件代理构造浏览器端：组件前端逻辑Style：前端样式Config：同构逻辑前三部分基本能够覆盖组件的常用语法，而同构在做事器端和浏览器端都能实行，紧张有 props、data、components、computed 等。
那么这个组件代码怎么在线上跑起来呢？
首先会在线下通过编译器，把它编译成 PHP、JavaScript 两份原码。PHP 的编译产物完备利用 PHP 的语法，可以在后端形成一个 Server Runtime，在这个过程中，也能够把 PHP 的编译产物渲染成字符串，通过网络传输到浏览器端。而在浏览器端运行时可以用编码产物 Javascript 的组件，渲染成可操作的 HTML 代理构造，包括它的事宜和交互。
个中的难点在于怎么把一个组件代码编译成在 PHP、在 JS 都能跑的组件代码。百度会做对付模板和一些表达设计的处理。例如，模板代码有一个文本节点，有一个自定义组件，在编译的过程中，会利用编译器把它转化成抽象语法树，形成树的构造，每个节点都有一些属性和信息，利用语法树的构造和属性信息，就可以通过代码天生器分别天生 PHP 和 JS 的代码。
这里还有一个问题，为什么须要一个同构区块呢？这是由于同构区块可以很好掌握做事器端能实行的代码，方便语法解析。其余，百度对同构代码块进行语法限定，以担保做事器真个稳定性，也可以更加方便解析成想要的 PHP 代码。
通过改造，组件化渲染框架不仅可以使得效率提升，担保了体验同等性，而且进行了横向升级降落本钱。
性能优化
针对做事器真个渲染性能，百度做了非常细致的优化：
在框架层，对渲染流程进行了简化，添加了缓存；在根本组件层，对掌握的大略组件进行编译优化；在业务层，供应先验工具、准入规范，线上监控和报警，并供应 a-nossr 指令。那么组件是如何在做事器端渲染成想要的 HTML 字符串呢？
如下图所示，会经由以下步骤：首先，加载组件的配置，创建组件的实例。在实例的创建过程中，对这个组件所有的数据进行初始化，包括一些特色和打算属性，得到初始化状态往后，再渲染出虚拟 DOM 树，把全体组件节点数渲染成一个实例的形式，用虚拟 DOM 树渲染成 HTML 字符串。
与此同时，百度搜索对全体渲染的过程进行了简化。在框架层，通过创建虚拟 DOM，减少了一次递归，也减少了在线上运行时的逻辑。在根本组件层，百度对横向团队能够完备掌握的一些大略组件进行了优化。利用 HTML 编译器编译针言法树，语法树对它每一个 AST 节点进行优化，通过将 Tag 直接定义为普通的 DOM 节点的方法，天生末了想要的函数代码。
框架层：渲染流程简化
大略组件编译优化
目前进展
目前，百度供应搜索组件化的工具。比如搜索 Web 无障碍方案、搜索性能准入规范、搜索设计规范；做事方面包括性能监控、前后端非常监控等；运行方面供应 VSL 语音交互框架帮助开拓者开拓一些语音交互逻辑；工程方面供应搜索敏捷平台，帮助开拓者直接完成联调、提测、上线；在运用方面，有卡片、图片搜索、咨询搜索、移动真个首页，还有一些独立的站，包括百度体育和百度招聘。
搜索组件化技能全景图
移动体验标准化培植第二个 Session 是由百度前端技能部资深前端工程师刘浪宇带来的《移动体验标准化培植》。
极致的用户体验是 Web 产品所追求的，那么什么是好的用户体验，如何去量化用户体验做到好的体验呢？首先须要有一套清晰的体验辅导标准，然后再去落地。
移动体验指南
移动体验指南是基于移动 Web 生态提出一套通用的体验辅导规范，目的是更好地做事于用户及产品的系统，为广大用户供应优质的体验。从用户的体验层次、交互和移动 Web 现状，百度归纳出六个纬度：
第一，快速的信息呈现。速率快慢直接影响用户对站点的体验评级，以是让主体内容快速呈现给用户才是优质的体验必需的。
第二，设计交互层面强调同等性。同等的设计交互可以利用用户的学习履历，降落学习和利用的本钱。
第三，好产品须要做到让用户低本钱、高效地完成所有交互操作，整体操作要清晰无阻，带给用户最流畅的体验。
第四，内容强调优质阅读不雅观感。站点的内容可读性、内容本身质量是否能够达到，都是优质的体验所必需的。
第五，情绪层面有两点，首先是愉悦的情绪认知，其次是让用户对站点信赖，页面是否安全、是否及时奉告流量信息等等。
第六，关于强健的场景适配，精良的站点应该适宜于不同的人群和宿主环境。
移动体验检测平台
有了体验指南，如何快速知道站点存在哪些问题？这就须要体验检测平台 Radar。
Radar 的最底层是 Headless Chrome，百度通过协议接口可以非常快捷地操作这个浏览器。中间的运行是基于谷歌开源的一个网页工具 Lighthouse 。它紧张有两个内容，第一是网页数据网络，通过数据剖析得到数据，按照规则的须要，对付这些数据进行剖析后输出想要的结果。第二，Radar 的核心是非常多的规则，紧张分两类，一类是普通的，一类是交互的。
刘浪宇以交互的规则为例，详细阐述了一个规则是如何实现的。如下图，交互的规则紧张分为两部分，第一是场景识别，第二是交互剖析。举一个比较大略的例子，当用户在页面看到一个输入框时，以为点击可以直接输入是一个良好的体验。那么如何量化这个规则呢？首先是场景识别，找到在这个页面中看起来像评论输入框的元素。然后找一些特色，从海量数据里面标注、提取一些通用特色之后为这个场景建立特色库。之后再基于场景所须要的特色，进行网页构造化数据提取。
Radar 规则架构（交互类规则为例）
接下来这些场景元素就要进行交互剖析，首先进行深度筛选然后进行交互操作。以仿照屏幕的点击举例，点击之前用户会看页面的变动，比如说 DOM 的变动、跳转的变动，然后对变动进行剖析，看是否符合预期。
基于 Custom Elements 标准组件化构建 Web 运用第三个主讲人是百度前端技能部资深前端工程师邹淼江，他现场分享了如何高效快速的构建一个体验良好的 Web 运用、基于 Custom Elements 标准的组件化设计、如何提升用户端体验和开拓效率。
首先看自定义标签，自定义标签在功能上逻辑上与 JavaBean 类似，都封装 Java 代码，是可重用的组件代码，并且许可开拓职员为繁芜的操作供应逻辑名称。其余，自定义标签具有⽀持⽆障碍、提高开拓效率、评估性能、对 SEO 良好的特点。
个中，如何利用自定义标签进行性能评估呢？百度供应了一套搜索引擎的验证工具。比如，符合某一种规则的 Custom Elements，给它标高分，为符合高性能标签。但如果利用 DIV 的办法，搜索引擎没办法知道布局是不是高性能，也没办法知道所对应的 JS 如何实现，如果有了 Custom Elements 的标准，就能清晰地知道这个页面想干什么。
基于此，我们可以设想：如果完备利用这些 Custom Elements 语义化标签构建 Web 站点可行吗？
这就须要引入组件化设计。实在目前存在的组件化设计都千篇一律，把一个页面的功能模块以组件树状的形式自由组合，堆积成一个功能的页面或者是模块，这便是组件的构造。详细哀求：
每⼀个 Custom Element 是⼀个组件组件内部实现相应的交互、功能和数据处理逻辑组件之间逻辑和样式是独⽴隔离的组件是可以通信的组件是可复⽤的Web Components 标准
Web Components 是指通过一种标准化的非侵入的办法封装的一个组件。紧张标准包括 Custom Elements，Shadow DOM，HTML Templates，HTML Imports 等多个维度的规范与实现。
Custom Elements 是供应一种办法让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web Components 标准的浏览器会供应一系列 API 给开拓者用于创建自定义的元素，或者扩展现有元素。Shadow DOM 旨在供应一种更好地组织页面元素的办法，来为日趋繁芜的页面运用供应强大支持，避免代码间的相互影响。开拓者可利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。HTML Imports 是一种在 HTML 中引用以及复用其他的 HTML 文档的办法，可以大略理解为常见的模板中的 include 之类的浸染。我们可以通过 HTML Import 的形式，直接将做的 Custom Elements 的标签放进 HTML 中进行渲染渲染。Web Components 兼容性
搜索落地页体验技能及运用第四个主题由百度前端技能部前端工程师李兆明讲述。如何更快、更好的将各种搜索结果页面通报到用户端一贯以来是百度搜索前真个核心关注点。基于此，李兆明分别从如何让落地页加载更快，如何让搜索结果页和落地页之间切换更加顺滑以及未来的新标准，先容百度搜索落地页体验技能的探索。
如何让落地页加载更快
思路一：提前加载。通过 Resource Hint 提示浏览器预解析域名、建立预连接，乃至进行预渲染。若是不支持的浏览器，则可以通过 JavaScript 仿照一部分。
思路二：抓取数据。通过开放平台提交数据，由百度来渲染。
思路三：MIP / AMP。MIP 供应多严惩法，让利用 MIP 技能的页面加载速率更上一层楼。例如，CDN 加速做事；利用 MIP 设计的网站没有任何可以壅塞渲染的脚本，所有脚本都在页面主体加载完成后才实行。此外，MIP 哀求所有页面都是静态的，如果有须要实时更新的数据须要异步获取，这样设计节省了后真个渲染韶光。
如何把两个页面领悟在一起？
实在，无论有多少优化加载速率的手段，归根结底离不开页面跳转。但是，浏览器跳转相对来说不足平滑，用户体验不足好，能不能把前后两个页面领悟到一起呢？
答案当然是肯定的。李兆明在担保体验、保障安全及保持开放的根本上，讲解了百度前端搜索的办理方案：
担保体验：通过 Iframe 加载页面；通过 PostMessage 等方法实现交互动效。保障安全：不许可利用外部脚本，须要封装组件审核；通过校验确保 HTML 符合规范。保持开放：通过 GitHub 追踪开拓。展望新技能
在未来，百度搜素将基于域名、Iframe 渲染问题，为开拓者带来 Navigation Transition、Promotable Iframe、Portals 及 Web Packaging 新标准，带来最流畅的体验。
Navigation Transition：页面切换的交互办法。办理了跨域问题，没有 Iframe 渲染的历史包袱。不过前一个页面依然不能掌握后一个页面的加载、渲染。iframe 可以提前加载，但是 Navigation Transitions 一定要在用户切换的时候加载。
Promotable Iframe：与 Iframe 干系，核心代码是 Promotable 的 API，只要调用 Promotable，就会调动页面的一小块，而后调动全体页面及内容。但是这种方法涉及一些生命周期的管理和 JS 的回收问题，是不足安全的实现，而且这样没有办理 CDN 的问题，依然须要改域名。
Portals：传送门，将一个页面传送另一个页面。这个标准是 Promotable Iframe 的增强，引入了一个新的 HTML 标签 portal，这个标签用来替代 Iframe 显示一块网页，写法和 Iframe 类似。但是它比 Iframe 多一个功能，便是可以通过 “active” 方法激活它。与此同时， portal 的子文档会收到一个 portal zactive 事宜，事宜中可以拿到它的上级元素，这样又可以把上级元素当成一个 portal 插入回自己的文档流，使得页面切换回去成为可能。
Web Packaging：办理了 CDN 超过问题。这个标准包括三方面：署名、打包、加载。如下图，左边内容供应者是站长，缓存的 CDN 类比 MIP 的 CDN ，右边是访问用户，用户浏览我们百度搜索结果页的时候，通过 MIP 的 Cache CDN 提前把数据取过来，用户真正点击的时候，直接从刚才取回来的页面去加载它。由于内容本身是内容供应者供应的，以是他可以对付自己 URL 进行署名。有了这个署名且署名有效的时候，浏览器可以自己显示原始的网址，同时原始的网址可以和原来的做事器进行交互，像通过原网址打开的一样，办理了 CDN 跨域问题。
如何通过 Lavas 快速构建 PWA 站点
末了一个主题的讲师是百度前端技能部资深研发工程师王轶盛为大家先容如何通过 Lavas 快速构建 PWA 站点。
PWA
PWA（Progress Web App）是 WEB 未来的发展方向。从体验上来说，PWA 靠近原生 APP，通过 Manifest 技能许可用户快速打开站点并得到沉浸式的体验，通过 Service Worker 能够做到资源预加载和离线可用等从而提升性能和可用性；同时 PWA 又拥有 Web 站点的共同上风：免安装和自动更新。
但与 Web 站点不同的是，PWA 又具有可靠、快速、黏性等特点：
第一是可靠。在断网的情形下，PWA 可做到比较友好的离线提示，这个是 PWA 断网的最高级，叫断网可用。
第二是快速。53% 的用户会放弃加载韶光超过 3 秒的网站，越快的加载速率就有越少的用户流失落。PWA 供应 Service Worker，确定哪些访问缓存、哪些访问网页，缩短加载韶光。
第三是黏性。黏性是指用户访问过一次，下一次访问是否麻烦。PWA 会用一个半秒的启动动画来担保浏览器首页启动的顺滑。其余，启动之后没有的地址栏、菜单栏，担保用户的沉浸式体验。
从技能层面讲，PWA 有分为四部分：
第一是 Service Worker 。定义预缓存、网络拦截和缓存策略。它本身是一个 Worker，有专门的语法，须要 CACHES API，须要注册及更新。
第二是 Manifest 。这是一个 Json 文件，定义快速入口，启动动画。
第三是 Web Push and Notification 。是做事器推送给客户真个主动关照。
第四是 APP Shell 。这并不是新技能，但它是常用的 PWA 架构。大略来说，便是把一个 APP 分成了外壳和内容，用 Service Worker 把外壳缓存起来，将里面的页面进行跳转。
通过 Lavas 搭建 PWA 站点
Lavas 包括工具、文档以及对应的办理方案和建站模板，是一个开源的办理方案。Lavas 本身有两部分，Lavas cli 和 Lavas core，内部用 Vue + Vue Router + Vuex 搭建站点，内置两套模板 (basic & app-shell)，支持传统模式 SPA 和 SSR 快速渲染，可以快速拥有 PWA 特性，灵巧性强，配置大略，而且文档及时更新，内容完全。通过 Lavas 搭建 PWA 站点紧张有八个步骤：
准备环境 & 初始化项目。安装 Lavas cli，初始化项目，选择模板，安装依赖。创建新页面。添加链接。利用 <router-link>，把稳和 Vue 保持同等，to 属性指明目标页面，支持字符串格式的地址，支持工具。然后启动调试做事器。和做事端通讯。安装 axios，引入 axios，向后端发送要求。利用 Vues 管理数据。创建 STORE，须要定义一些内容。把要求数据移动到 action 里面，获取成功后调用 commit 触发 mutation 去变动 state。在组件中，通过 store.dispatch 触发 action 获取数据，然后通过 mapState 把 state 和打算属性关联，末了通过打算属性在页面上利用。配置 Manifest 。Manifestt.json 定义了启动 URL，定义各种尺寸的 icon，定义动画配色和启动模式。配置 Service Worker。配置，指定模板位置、构建位置构建和上线。实行构建命令 > lavas build；启动生产环境 > cd dist，> lavas start。Lavas 技能事理
Lavas 的技能事理紧张有自动天生路由规则、Skeleton、App Shell。
Vue Router 须要四个步骤做整件事情：第一步定义和引用组件，第二步把组件和路由联系起来，第三步是把刚刚联系起来的数据放到 Router 函数创建实例，第四是把 Router 放到 VUE 创建实例，结束 Vue 实例挂载就。
经由改进， Router 不用自己定义页面级组件，可以认定只要在 Pages 目录中，那组件都是页面级的，从而可以实现自动化 Import，不须要每次写一大堆的代码。其余，绝大多数情形路由规则和组件名称是有对应关系的。自动天生路由规则映射，省去了列出映射关系的麻烦，也避免后期组件改名带来的掩护本钱。
Skeleton 叫骨架屏，便是实际内容展现之前，有个大概内容给用户看，这样用户提前看到一些东西。这是 Loading 升级版，由于每个组件可以自定义样式、切换机遇、列表等。
Lavas 的 Skeleton 都可以用，实现思路是 Vue 的挂载点一样平常是个空的 DIV，在构建时将 Skeleton 的内容添加到挂载点中，Vue 挂载前清空 DIV 内的占位内容，挂载后渲染为实际内容，利用 SW 预缓存 HTML，访问时直接从缓存中获取 HTML，这样可以让用户看到占位的东西。
App Shell，便是把一个 APP 分两部分，有外壳和内容，把外壳缓存起来，每打开页面先把外壳拿出来，然后再是内容渲染。App Shell 实现有两个步骤，第一是划分，见告程序哪部分是外壳、哪部分是内容；第二是程序把外壳缓存起来。这须要实现两方面，第一是 SPA，首次要求做事器返回 Index.HTML，所有页面的渲染均由 JS 完成，只在挂载点内重新渲染，单页 Index.html 便是 Shell，利用 SW 预缓存 Index.html 即可。第二是 SSR，首次要求做事器返回给全部内容，后续页面的渲染由 JS 完成。
Web 生态的发展便是互联网的发展，新技能的不断呈现和新场景的不断实现也让这个开放的生态得以持续繁荣。王轶盛表示，百度希望海内的开拓者与站长能够多多参与到 PWA 项目中，共同培植和改进海内的 Web App 生态。
