作为互联网的基础载体，Web站点具有开放性、跨平台性的优势。百度作为国内在搜索领域不断深耕技术的公司，一直在Web生态的整体体验提升中扮演着重要角色。同时，在移动互联网时代，通过移动设备浏览移动网站流量早已超过了电脑版网站。可见，对移动端的页面优化也是必不可少的过程。

4月22日，由百度开发者中心主办，极客邦科技承办的第70期百度技术沙龙圆满结束，沙龙的主题围绕Web技术生态，邀请了百度技术专家现场分享了百度在这方面的技术成果，和最优的实践案例。因为篇幅有限，所以本文以介绍关键内容为主，读者后续可以下载演讲PDF文件深入了解。

　　MIP－加速移动页面

百度资深Web前端研发工程师 李浪波为大家分享了MIP（?Mobile Instant Page 移动网页加速器）的相关内容，MIP是一套应用于移动网页的开放性技术标准，可以大大提升用户在浏览移动页面时的打开速度。

MIP实际上是一套基于代理的CDN缓存系统，包含三个重要部分，第一个，它会缓存所有符合MIP规范的页面，只要这个页面是MIP页面就都可以进入CDN系统，缓存页面上所有的图片，字体等。同时它最大的一个亮点就是支持HTTPS。

访问MIP在线的流程的话，是先请求CDN，然后一直查询到MIP-server，atv，然后到Mint，如果有缓存，直接给访问用户返回超快的缓存页面。当然如果没有缓存，就直接请求原站把页面反馈给用户。

加速实现原理

总结起来就是通过这几点来进行加速：?网络连接优化、静态自适应布局、加速实现原理、资源缓存、资源加载顺序以及预取、超大图片控制等等。利用MIP加速尽最大限度去解决页面抖动的问题。在资源缓存方面，目前MIP缓存在80%左右，在缓存命中率超高的情况下，资源缓存对性能提升是非常可观的。MIP在对图片资源进行缓存的同时，也会限制超大图片，避免或减少页面加载超大图片对性能的消耗，同时还会对超大网页进行限制。

　　PWA的探索与实践

陶清乾是百度资深Web前端研发工程师，目前致力于提升百度搜索生态体验。他介绍了什么是PWA－－Progressive Web Apps（渐进式Web Apps）是Google提出来的一种带来突破性体验的Web站的应用标准，主要特性是：Reliable（可依赖）Fast（快），Engaging（有粘性的）与传统Web相比，多了几个关键特性：offline、icon、splash、notification

关键技术

Serviceworkers－－通过浏览器网络代理，提供Web离线缓存能力，这也是Serviceworkers的核心功能

Add To Home Screen－－让页面可以被添加到手机主屏，通过icon调起，就像一个APP图标一样也可以被调起

Web Push & Notifications－－提供通知推送功能，增加Web站点与用户互动能力

基于上面所提到的概念，陶老师介绍了PWA和OpenWeb之间的细节，包括传统Web的困境，例如在移动互联网的入口不像以前在PC入口一样单一，Web在手机上很多用户通过App直达。其次，App遇到的问题也很多。90%的用户在一天内打开的App不超过10个；另外就是App获取的路径特别长等问题。

PWA与Open Web变革与影响

体验层面向Native App靠拢：离线能力、添加到主屏、调起交互

开发模式的变革：Web开发同时考虑离线模式和体验

安装更新机制带来的运营方式变化：与Web互联，URL直达，不再依赖应用分发

在开发模式上的变革，其实以前的Web开发只是单纯的写一些页面（HTML、CSS、JS）的业务逻辑，但是未来需要同时考虑用户在没有网络的情况下能给用户提供什么样的体验，这就是Web在未来开发的过程中需要考虑的线下体验和开发模式。

一起开发PWA需要涉及到的内容包括：

Service  Worker配置；

缓存策略设计；

Manifest配置；

页面质量检测；

开发总结。

离线化关键细节－缓存策略思考：

缓存key对应于版本号。

获取资源(样式、脚本、字体)时离线优先(Cache First)。

获取数据(天气、地理位置)时网络优先(Network First)。

所有网络请求都会被更新到缓存。

如何评估PWA带来的技术体验上的改善，陶老师说，首先需要一个实验，使用A/B Test可以看出改造和没有改造的。可以先评估页面的性能，页面的到达率，页面的转化这些都是需要考虑的。如果PWA改造本身会影响统计方式，那么评估的时候PWA的改变方式就是对使用方式的影响。

　　ECharts 中应用 WebGL 的实践