移动Web体验月报（5月）：MIP引入MIP-SHELL组件；Google Search推出AMP页面新使用场景

为推进Web技术的发展，Brilliant Open Web 团队特推出每月一期的月报，该月报将整理较流行的移动Web加速技术，并跟进各项技术的进展和发展方向，以期帮助开发者了解或选用相关的技术，把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”，一起探讨相关技术。

作者 | Brilliant Open Web 团队编辑 | Daisy

本期看点

MIP 为全站改造MIP的站点引入了MIP-SHELL 模块
小故事相关的组件开源
GoogleSearch团队推出non-click
AMP概念Web Package技术标准落地到了Google Search中

升级与重要进展

MIP Shell 组件

熟悉 MIP 的开发者可能了解，MIP 全称 Mobile Instant Pages（移动网页加速器），是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及MIP-Cache 页面缓存系统，实现移动网页加速。MIP 是以页面（Page）为单位来运行的，开发者通过改造/提交一个个页面，继而被百度收录并展示。从搜索打开的MIP页面，极大的提升用户体验。

但以页面为单位带来一个问题：当一个MIP 页面往其他页面跳转时，就会使浏览器使用加载页面的默认行为来加载新页面，这就是所谓的的“第二跳”。从实际来看，“第二跳”的体验比起从搜索结果页到 MIP页面的“第一跳”来说相去甚远，依然会出现白屏。

为了解决“第二跳”的体验问题，我们为全站改造MIP的站点引入了MIP-SHELL 模块。它的作用是把多个页面以一定的形式组织起来，让它们互相切换时拥有和单页应用一样的切换效果，而不是浏览器默认的切换效果。这个功能大部分对开发者是透明的，但也需要开发者遵守一些页面的编写规范。

目前 MIP-SHELL 组件已经完成开发，正在进行小范围内测，在这里先和大家介绍一下 MIP-SHELL 组件的部分能力。

在实际项目中，我们很可能会有一些独立于页面内容之外的相对固定的部分，我们称之为外壳（Shell）。在页面切换时，Shell 部分一般不跟随页面内容进行过场动画。

开发者可以在每个页面中使用标签来定义Shell 的各项配置。目前 MIP 仅提供头部 Shell，后续会陆续提供多种类型、多种样式的 Shell 供开发者选择。

开发者通过如下方式使用 MIP-SHELL 组件，并进行对应的配置。

<html>        <head></head>        <body>            <mip-shell>                <script type="application/json">                    {                        key: value                    }                </script>            </mip-shell>            <!-- mip script -->        </body>    </html>

通过使用 MIP-SHELL 组件，我们可以让一个站点的切换变得非常流畅。目前已经有站点通过全站接入MIP，获得了酷炫的效果，比如搜索“极客公园”即可查看效果，目前页面效果已经和 APP 相媲美。