WAD-B202 如何快速提升网站兼容性和 Windows 10 Web 平台的发展
杨滔/闫伟
. . .
. . . Windows 10 中的Web平台
Edge浏览器 25年 440亿 快速询问Cortana功能
阅读模式
笔记模式
分享功能 JetStream Benchmark Octane 2.0 Benchmark 160 (higher is better) 25000 (higher is better)
140 20000 120
100 15000 80
60 10000
40 5000 20
0 0 1 2 3 4 1 2 3 4
• 卸下兼容老版IE的包袱
• 网站开发者只需针对同 一个版本进行开发，节 省开发时间成本
• 网站更好地运行 1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident HTML4, ES3, CSS2
1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident
!DOCTYPE Quirks Strict HTML4, ES3, CSS2 CSS2.1
1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident
!DOCTYPE x-ua-compatible IE5 IE7 IE8 Compatibility Standards Quirks View Mode
HTML4, ES3, CSS2 CSS2.1 HTML5, SVG, ES5
1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident
IE5 IE7 IE8 Compatibility Standards !DOCTYPE Quirks View Mode x-ua-compatible
IE9 Standards Mode
HTML4, ES3, CSS2 CSS2.1 HTML5, SVG, ES5, CSS3
1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident
IE5 IE7 IE8 Compatibility Standards !DOCTYPE Quirks View Mode x-ua-compatible
IE9 QME IE10 Standards Quirks Mode Standards Mode Emulation Mode
Legacy Web Modern Web HTML4, ES3, CSS2 CSS2.1 HTML5, SVG, ES5, CSS3
1995 2015
1 2 3 4 4.x 5 5.5 6 7 8 9 10 11
Trident
IE5 IE7 IE8 EMIE Quirks Compat Standards Enterprise !DOCTYPE View Mode Mode x-ua-compatible
IE9 IE10 QME IE11 Quirks Standards Standards Standards Mode Mode Mode Mode Emulation EdgeHTML Chakra EdgeHTML Chakra 以前，开发者需要维护不同版本IE浏 使用兼容现代标准的渲染引擎后 览器的不同代码
浏览器请求 浏览器请求
遗留下来的 现代标准 标准 何种浏览器？ EdgeHTML Webkit, Blink & Webkit, Gecko 多个版本不 Blink & code 同的代码 Gecko code Microsoft Edge
.
.
.
. . 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020
Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Internet Explorer 11
Internet Explorer 10
Internet Explorer 11
Internet Explorer 11 Microsoft Edge
2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020
功能多 • 方便 Windows Web App 调用更多的 Windows 原生功能 • HTML5兼容性更好，支持的功能更多 速度快 • 浏览器快速迭代，持续更新 • 打开网页快，代码运行快 体验好 • 安全性好 • Windows 平台中的默认浏览器，跨设备的Web 一致体验，具有更好的兼容性 投入省 • 数10亿用户将通过 Windows update 为升级到 Windows 10 • Edge浏览器的F12开发 Windows 10 中的Web平台
Web Apps
EdgeHTML.dll Chakra
WebView
• 为iOS，安卓以及 Windows平台制作应用 • 近乎100%共享代码 • 在任何设备和模拟器上进 行调试 • 使用你喜欢的JS框架 • 支持离线模式
WebView . . . .
Microsoft Edge
将你的开发网站的经验带入Windows商店 中
平衡网站的投入和开发人员的工作流程
可以获得全部通用API的权限，如磁贴、 通知、相机、通讯录以及日历等
Web 兼容性和兼容性测试
关键因素 问题原因 解决方案
标准模式 请使用 HTML5 通用标签“”声明编写指令， 网页在Edge模式下进行渲染错误，原因可能是该页面没有使 Web standards 并删除IE兼容性标签"http-equiv"例如："”标签声明编写指令 docmode equiv="x-ua-compatible" content="IE=*">"
框架和类库 网页是基于一些三方框架或类库进行搭建的，但是由于当前 Frameworks & 请您更新网站正在使用的框架和类库 使用的版本过于陈旧，从而出现一些问题 libraries
浏览器前缀 网页正在使用浏览器前缀技术，以保证页面的跨平台体验效 请您尝试将 -ms- 浏览器前缀与其他浏览器前缀同时加入 CSS prefixes 果，例如：-webkit- 和 -moz- 但是并不包含-ms-前缀 CSS代码中，这样做不会影响页面渲染和加载速度
浏览器检测 网页正在使用 userAgent 判断浏览器类型，进而选择性的展 您只需将类似“navigator.userAgent;”的UA判断代码替换成 Browser detection 示功能 功能检测代码 例如：modernizr
浏览器插件 建议您采用 无插件浏览体验 标准，页面将支持更多设备以 Legacy plug-ins and 网页正在使用Adobe Flash 和 PDF 以外的浏览器插件 及浏览器 features
Windows Edge 兼容性测试工具 详细修改建议和方案请参考
http://dev.modern.ie/tools/staticscan/ http://aka.ms/edge-dev .
.
.
.
. .
//正确示范，推荐做法 //错误示范，极不推荐
function load() { if (navigator.userAgent.indexOf("MSIE 7") > -1) { if ('localStorage' in window) { // Only for IE7 // Now use local storage } return; } }
.
if (Modernizr.csstransitions) { // Browser supports CSS Transitions } if (!Modernizr.canvas) { loadCanvasPolyfill(); } .
.
.
. 功能 基于插件的技术示例 基于标准的等效技术 详细信息 Flash、Apple 视频和音频 HTML5 视频 和音频 视频、 音频 QuickTime、Silverlight HTML5 Canvas 、可 缩放的向量图形 Flash、Apple Canvas、SVG、过渡、 (SVG)、级联样式表 图形 QuickTime、Silverlight 动画、转换、 级别 3 (CSS3) 过 、Java 小程序 WebGL 渡 和动画、CSS 转 换、WebGL Web 存储、文件 API Web 存储、文件 API Flash、Java 小程序和 脱机存储 、IndexedDB 和应 、IndexedDB 和应 Google Gears 用程序缓存 API 用程序缓存 API HTML5 Web 消息传 网络通信、资源 通道消息传递、 Flash 和 Java 小程序 递和跨源资源共享 共享和文件上载 XMLHttpRequest (CORS)
Edge浏览器不支持出Adobe Reader和 Flash 以外的插件 关键因素 问题原因 解决方案
标准模式 请使用 HTML5 通用标签“”声明编写指令， 网页在Edge模式下进行渲染错误，原因可能是该页面没有使 Web standards 并删除IE兼容性标签"http-equiv"例如："”标签声明编写指令 docmode equiv="x-ua-compatible" content="IE=*">"
框架和类库 网页是基于一些三方框架或类库进行搭建的，但是由于当前 Frameworks & 请您更新网站正在使用的框架和类库 使用的版本过于陈旧，从而出现一些问题 libraries
浏览器前缀 网页正在使用浏览器前缀技术，以保证页面的跨平台体验效 请您尝试将 -ms- 浏览器前缀与其他浏览器前缀同时加入 CSS prefixes 果，例如：-webkit- 和 -moz- 但是并不包含-ms-前缀 CSS代码中，这样做不会影响页面渲染和加载速度
浏览器检测 网页正在使用 userAgent 判断浏览器类型，进而选择性的展 您只需将类似“navigator.userAgent;”的UA判断代码替换成 Browser detection 示功能 功能检测代码 例如：modernizr
浏览器插件 建议您采用 无插件浏览体验 标准，页面将支持更多设备以 Legacy plug-ins and 网页正在使用Adobe Flash 和 PDF 以外的浏览器插件 及浏览器 features
Windows Edge 兼容性测试工具 详细修改建议和方案请参考
http://dev.modern.ie/tools/staticscan/ http://aka.ms/edge-dev 相关资源
. . . . . https://channel9.msdn.com/Events/Ignite/ Microsoft-Ignite-China-2015 http://aka.ms/IgniteChina2015 .
.
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0