Presentation title goes here

Size: px

Start display at page:

Download "Presentation title goes here"

攸破块管
5 years ago
Views:

1 WAD-B202 如何快速提升网站兼容性和 Windows 10 Web 平台的发展杨滔 / 闫伟

3 Windows 10 中的 Web 平台 Edge 浏览器

4 25 年 440 亿

5 快速询问 Cortana 功能阅读模式笔记模式分享功能

6 160 JetStream Benchmark (higher is better) Octane 2.0 Benchmark (higher is better)

7 卸下兼容老版 IE 的包袱网站开发者只需针对同一个版本进行开发, 节省开发时间成本网站更好地运行

8 x Trident

9 HTML4, ES3, CSS x 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!

10 HTML4, ES3, CSS2 CSS x Trident!DOCTYPE x-ua-compatible IE5 Quirks IE7 Compatibility View IE8 Standards Mode

11 HTML4, ES3, CSS2 CSS2.1 HTML5, SVG, ES x Trident!DOCTYPE IE5 Quirks IE7 Compatibility View IE8 Standards Mode x-ua-compatible IE9 Standards Mode

12 HTML4, ES3, CSS2 CSS2.1 HTML5, SVG, ES5, CSS x Trident!DOCTYPE IE5 Quirks IE7 Compatibility View IE8 Standards Mode x-ua-compatible IE9 Standards Mode QME Quirks Mode Emulation IE10 Standards Mode

13 HTML4, ES3, CSS2 Legacy Web CSS2.1 Modern Web HTML5, SVG, ES5, CSS x Trident!DOCTYPE IE5 Quirks IE7 Compat View IE8 Standards Mode EMIE Enterprise Mode x-ua-compatible IE9 Standards Mode IE10 Standards Mode QME Quirks Mode Emulation IE11 Standards Mode

14 EdgeHTML Chakra EdgeHTML Chakra

15 以前, 开发者需要维护不同版本 IE 浏览器的不同代码浏览器请求使用兼容现代标准的渲染引擎后浏览器请求遗留下来的标准现代标准多个版本不同的代码何种浏览器? Webkit, Blink & Gecko code EdgeHTML Webkit, Blink & Gecko code

16 Microsoft Edge

21 Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Internet Explorer 11 Internet Explorer 10 Internet Explorer 11 Internet Explorer 11 Microsoft Edge

安全性好 Windows 平台中的默认浏览器, 跨设备的 Web 一致体验, 具有更好的兼容性投入省

22 功能多方便 Windows Web App 调用更多的 Windows 原生功能 HTML5 兼容性更好, 支持的功能更多速度快浏览器快速迭代, 持续更新打开网页快, 代码运行快体验好安全性好 Windows 平台中的默认浏览器, 跨设备的 Web 一致体验, 具有更好的兼容性投入省数 10 亿用户将通过 Windows update 为升级到 Windows 10 Edge 浏览器的 F12 开发

23 Windows 10 中的 Web 平台 Web Apps

25 WebView EdgeHTML.dll Chakra

27 为 ios, 安卓以及 Windows 平台制作应用近乎 100% 共享代码在任何设备和模拟器上进行调试使用你喜欢的 JS 框架支持离线模式

28 WebView

31 Microsoft Edge 将你的开发网站的经验带入 Windows 商店中平衡网站的投入和开发人员的工作流程可以获得全部通用 API 的权限, 如磁贴通知相机通讯录以及日历等

35 Web 兼容性和兼容性测试

37 关键因素问题原因解决方案标准模式 Web standards docmode 网页在 Edge 模式下进行渲染错误, 原因可能是该页面没有使用 <!DOCTYPE html> 标签声明编写指令请使用 HTML5 通用标签 <!DOCTYPE html> 声明编写指令, 并删除 IE 兼容性标签 "http-equiv" 例如 :"<meta httpequiv="x-ua-compatible" content="ie=*"></meta>" 框架和类库 Frameworks & libraries 网页是基于一些三方框架或类库进行搭建的, 但是由于当前使用的版本过于陈旧, 从而出现一些问题请您更新网站正在使用的框架和类库浏览器前缀 CSS prefixes 网页正在使用浏览器前缀技术, 以保证页面的跨平台体验效果, 例如 :-webkit- 和 -moz- 但是并不包含 -ms- 前缀请您尝试将 -ms- 浏览器前缀与其他浏览器前缀同时加入 CSS 代码中, 这样做不会影响页面渲染和加载速度浏览器检测 Browser detection 网页正在使用 useragent 判断浏览器类型, 进而选择性的展示功能您只需将类似 navigator.useragent; 的 UA 判断代码替换成功能检测代码例如 :modernizr 浏览器插件 Legacy plug-ins and features 网页正在使用 Adobe Flash 和 PDF 以外的浏览器插件建议您采用无插件浏览体验标准, 页面将支持更多设备以及浏览器 Windows Edge 兼容性测试工具详细修改建议和方案请参考

40 // 正确示范, 推荐做法 function load() { if ('localstorage' in window) { // Now use local storage return; } } // 错误示范, 极不推荐 if (navigator.useragent.indexof("msie 7") > -1) { // Only for IE7 } if (Modernizr.csstransitions) { // Browser supports CSS Transitions } if (!Modernizr.canvas) { loadcanvaspolyfill(); }

42 功能基于插件的技术示例基于标准的等效技术详细信息视频和音频图形脱机存储网络通信资源共享和文件上载 Flash Apple QuickTime Silverlight Flash Apple QuickTime Silverlight Java 小程序 Flash Java 小程序和 Google Gears Flash 和 Java 小程序 HTML5 视频和音频视频音频 HTML5 Canvas 可缩放的向量图形 (SVG) 级联样式表级别 3 (CSS3) 过渡和动画 CSS 转换 WebGL Web 存储文件 API IndexedDB 和应用程序缓存 API HTML5 Web 消息传递和跨源资源共享 (CORS) Canvas SVG 过渡动画转换 WebGL Web 存储文件 API IndexedDB 和应用程序缓存 API 通道消息传递 XMLHttpRequest Edge 浏览器不支持出 Adobe Reader 和 Flash 以外的插件

关键因素问题原因解决方案标准模式 Web standards docmode 网页在 Edge 模式下进行渲染错误, 原因可能是该页面没有使用 <!DOCTYPE html> 标签声明编写指令请使用 HTML5 通用标签 <!

libraries 网页是基于一些三方框架或类库进行搭建的, 但是由于当前使用的版本过于陈旧, 从而出现一些问题请您更新网站正在使用的框架和类库浏览器前缀 CSS prefixes 网页正在使用浏览器前缀技术, 以保证页面的跨平台体验效果, 例如

43 关键因素问题原因解决方案标准模式 Web standards docmode 网页在 Edge 模式下进行渲染错误, 原因可能是该页面没有使用 <!DOCTYPE html> 标签声明编写指令请使用 HTML5 通用标签 <!DOCTYPE html> 声明编写指令, 并删除 IE 兼容性标签 "http-equiv" 例如 :"<meta httpequiv="x-ua-compatible" content="ie=*"></meta>" 框架和类库 Frameworks & libraries 网页是基于一些三方框架或类库进行搭建的, 但是由于当前使用的版本过于陈旧, 从而出现一些问题请您更新网站正在使用的框架和类库浏览器前缀 CSS prefixes 网页正在使用浏览器前缀技术, 以保证页面的跨平台体验效果, 例如 :-webkit- 和 -moz- 但是并不包含 -ms- 前缀请您尝试将 -ms- 浏览器前缀与其他浏览器前缀同时加入 CSS 代码中, 这样做不会影响页面渲染和加载速度浏览器检测 Browser detection 网页正在使用 useragent 判断浏览器类型, 进而选择性的展示功能您只需将类似 navigator.useragent; 的 UA 判断代码替换成功能检测代码例如 :modernizr 浏览器插件 Legacy plug-ins and features 网页正在使用 Adobe Flash 和 PDF 以外的浏览器插件建议您采用无插件浏览体验标准, 页面将支持更多设备以及浏览器 Windows Edge 兼容性测试工具详细修改建议和方案请参考

44 相关资源

45 Microsoft-Ignite-China

49 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/ Firefox/35.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/ (KHTML, like Gecko) Version/8.0 Safari/ Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ Edge/12.0

Internet Explorer 10

Internet Explorer 10 Windows Internet Explorer 10 Internet Explorer 10 Internet Explorer 10 Windows Windows 8 Internet Explorer 10 Windows Internet Explorer 10 Modern Desktop Windows 8 Internet Explorer