HTML5兼容性检测方法性能对比

格式：pdf
大小：278.29 KB
文档页数：4

Ｋｅｙｗｏｒｄｓ：ＨＴＭＬ５；ＣｏｍｐａｔｉｂｉｌｉｙｔＴｅｓｔｉｎｇ；ＰｅｒｆｏｒｍａｎｃｅＣｏｍｐａｉｓｒｏｎ
２０１７年第２
１８３
ＨＴＭＬ５兼容性检测方法性能对比
李可
（广东理工职业学院计算机技术系，广东广州５１００９１）
摘要：对于ＨＴＭＬ５的开发者来说影响最大的就是浏览器的兼容性问题。由于ＨＴＭＬ５标准并未能很好的被浏
览器所支持，故造成用户体验不佳，因此开发者要一一解决不同的浏览器出现的问题。首先要确定可以使用哪
些高级功能，这需要进行功能探测然后提供渐进式设计。功能探测可以采用两种解决方式：原生代码检测法和框架检测法。框架法简化了功能检测工作，但是牺牲了一定的性能。为了对比两种方法的性能差异，本文针对５个典型特性检测进行了实验对比，得到的量化结果为开发渐进式设计提供了借鉴。关键词：ＨＴＭＬ５；兼容性检测；性能对比中图分类号：ＴＰ３１１文献标识码：Ａ文章编号：１６７１－４７９２（２０１７）２－００３３．０４
ｃａｌｃｈａｒａｃｔｅｉｒｓｔｉｃｓ．Ｔｈｅｒｅｓｕｌｔｓｏｆｃｏｍｐａｒｉｓｏｎｃａｎｂｅｕｓｅｕｌｆｆｏｒｔｈｅｄｅｖｅｌｏｐｍｅｎｔｏｆｐｒｏｇｒｅｓｓｉｖｅｄｅｓｉｎ．ｇ
ＰｅｒｆｏｒｍａｎｃｅＣｏｍｐａｒｉｓｏｎｏｆＨＴＭＬ５Ｃｏｍｐａｔｉｂｉｌｉｔｙ
ＤｅｔｅｃｔｉｏｎＭｅｔｈｏｄｓ
ＬｉＫｅ
（ＧｕａｎｇｄｏｎｇＰｏｌｙｔｅｃｈｎｉｃＩｎｓｔｉｔｕｔｅ，ＧｕａｎｇｄｏｎｇＧｕａｎｇｚｈｏｕ５１００９１）
Ａｂｓｔｒａｃｔ：ＦｏｒＨＴＭＬ５ｄｅｖｅｌｏｐｅｒｓ，ｔｈｅｂｉｇｇｅｓｔｉｍｐａｃｔｉｓｔｈｅｉｓｓｕｅｏｆｂｒｏｗｓｅｒｃｏｍｐａｔｉｂｉｌｉｔｙ．ＡｓｔｈｅＨＴＭＬ５ｎｏｔｗｅｌｌｓｕｐｐｏｔｅｒｄｂｙｔｈｅｂｒｏｗｓｅｒｓ，ｒｅｓｕｌｔｉｎｇｉｎｐｏｏｒｕｓｅｒｅｘｐｅｉｅｒｎｃｅ．Ｄｅｖｅｌｏｐｅｒｓｗｉｌｌｈａｖｅｔｏｓｏｌｖｅｔｈｅｐｒｏｂｌｅｍｓｏｆｄｉｆｆｅｒｅｎｔｂｒｏｗｓｅｒｓｓｔｅｐｂｙｓｔｅｐ，ａｎｄｅｎｓｕｒｅｔｈａｔｔｈｅｕｓｅｒｓｄｏｎｏｔｓｅｅｔｈｅｐａｇｅｗｈｉｃｈｈａｓｐｒｏｂｌｅｍｓ．Ｄｅｖｅｌｏｐｅｒｓ
ｓｈｏｕｌｄｉｆｒｓｔｄｅｔｅｒｍｉｎｅｗｈａｔａｄｖａｎｃｅｄｆｅａｔｕｒｅｓｃａｎｂｅｕｓｅｄ，ｗｈｉｃｈｒｅｑｕｉｒｅｓｆｕｎｃｔｉｏｎｄｅｔｅｃｔｉｏｎａｎｄｐｒｏｖｉｄｉｎｇｐｒｏｇｒｅｓ — ｓｉｖｅｄｅｓｉｇｎ．Ｔｈｅｒｅａｒｅｔｗｏｗａｙｓｔｏｓｏｌｖｅｔｈｉｓｐｒｏｂｌｅｍ：ｄｅｔｅｃｔｉｏｎｂｙｎａｔｉｖｅｃｏｄｅａｎｄｄｅｔｅｃｔｉｏｎｂｙｆｒａｍｅ．Ｔｈｅｒａｆｍｅｍｅｔｈｏｄｓｉｍｐｌｉｉｆｅｓｔｈｅｆｕｎｃｔｉｏｎｄｅｔｅｃｔｉｏｎ，ｂｕｔａｔｔｈｅｅｘｐｅｎｓｅｏｆｃｅｒｔａｉｎｐｅｒｆｏｍａｒｎｃｅ．Ｉｎｏｒｄｅｒｔｏｃｏｍｐａｒｅｈｅｔｐｅｒｆｏｒ－ｍａｎｃｅｄｉｆｆｅｒｅｎｃｅｂｅｗｅｔｅｎｔｈｅｗｏｔｍｅｔｈｏｄｓ，ｗｅｃｏｍｐａｒｅｔｈｅｅｘｐｅｉｍｅｒｎｔａｌｒｅｓｕｌｔｓｏｆｔｈｅｆｕｎｃｔｉｏｎｄｅｔｅｃｔｉｏｎｏｆ５ｔｙｐｉ —

(整理)检测浏览器支持哪些HTML5新特性的方法

检测浏览器支持哪些HTML5新特性的方法HTML5不能说是一个全新的事物，但是大部分人对HTML5的了解还是比较少的。

（如果你想了解HTML5的话，不妨查看IE9发布的HTML5视频。

）虽然目前新版的主流浏览器，诸如IE9、Firefox4、Chrome10都已经开始支持HTML5特性了，但是目前所有浏览器对HTML5的支持事不完整的，主要是因为HTML5还处在制定过程中。

如果你想检测你的浏览器究竟支持HTML 5 的哪些特性，可以查看下面我们介绍的一种方法。

当浏览器渲染web 页面的时候，它会构造一个文档对象模型（Document Object Model，DOM）。

这是一组用于表现页面上HTML 元素的对象。

每一个元素，例如每一个<p>，每一个<div>，每一个<span> 都有不同的DOM 对象表示。

当然，也有一种全局的对象，例如window 和document，不过它们不是用来表示特定元素的。

所有的DOM 对象都有一些通用属性，也有其自己特有的属性。

支持HTML 5 特性的浏览器就会包含这种独一无二的属性。

因此，我们利用这种技术，就可以检测浏览器究竟支持哪些新特性。

在本节的后面的部分中，我们将从易到难地详细介绍这种技术。

Modernizr —— HTML 5 检测库Modernizr 是一个开源的，基于MIT 协议的JavaScript HTML 5特性检测库。

它能够检测很多HTML 5 和CSS 3 的特性。

你可以在其主页或者这里的地址（modernizr-1.7.min.js，注意修改后缀名）中找到最新版本（当前最新版本是1.7）。

同别的JS 库一样，你应该在head 块中将其引入：<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Dive Into HTML5</title><scrip t src=”modernizr.min.js”></script></head><body>…</body></html>Modernizr 会自动运行，不需要调用类似modernizr_init() 的函数。

如何解决HTML5标签不兼容

一、HTML5标签在浏览器展示存在的问题对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。

当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。

结果1：标签被当作错误处理并被忽略。

那么DOM构建的时候，就会当作这个标签不存在。

结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section 标签依然会在dom中创建一个对应section节点，但是属于行内元素）。

结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。

DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。

有一个具体的例子，大家思考一下下面的代码：<div class="outer"><section><h1>title</h1><p>text</p></section></div>很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。

h1和p元素都是作为section元素的子节点。

因为section在DOM中真实存在，所以也可以修改其样式。

这种情况对应结果2。

IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。

</section>也会被认为是一个错误并直接跳过。

在这些浏览器中实际有效的代码是这样的：<div class="outer"><h1>title</h1><p>text</p></div>那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。

html5兼容性问题.doc

网页设计html+css兼容性问题处理办法汇总标准网页布局的兼容性处理标准网页设计的最大挑战不在于技术本身，而在于浏览器兼容性处理。

所谓浏览器兼容问题，就是当我们使用不同的浏览器（如IE 7、IE 6、Firefox等）访问同一个页面时，可能会出现不一致的情况，出现这种现象的原因有很多种，但根本原因就是浏览器对于技术支持的标准不同造成的。

IE浏览器对于标准技术的支持是很不完善的，这些问题可以分为两种：一种是IE支持某种技术或功能，但是实现该功能的方法和途径与标准技术不同；另一种是IE浏览器自身的解析机制存在很多Bug，导致页面解析效果与标准不同。

本章将兼顾IE 6、IE 7和FF三种主流版本或类型浏览器进行讲解，其中IE 6浏览器用户数最多，IE 7的用户将逐步超越和代替IE 6，而FF浏览器代表了标准浏览器的主流。

1 兼容不同类型浏览器的基本方法不同类型浏览器对于CSS技术的支持是不完全统一的，如果再加上浏览器对于CSS解析时存在各种Bug，CSS兼容性处理就变得异常复杂。

解决浏览器兼容问题的方法，这些方法被称之为Hack （即补丁的意思）。

所谓Hack，就是利用各种过滤方法专门为特定类型浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型浏览器中呈现相同的渲染效果。

过滤器是一种形象的称呼，实际上它就是各种浏览器支持或不支持某种声明或样式的特殊用法。

例如，IE 6以下版本浏览器不支持!important关键字，我们就可以利用这个关键字专门为IE 6及其以上版本浏览器或者非IE浏览器定义样式，从而过滤掉IE 6以下版本浏览器在解析时存在的问题。

21 标准网页布局的兼容性处理1.1 常用过滤器目前全球设计师发现并总结出来的过滤器非常多，要记住这些过滤器是很繁琐的，读者可以参阅/ref/css/filters/31 标准网页布局的兼容性处理1.1 常用过滤器/dithered/css_filters/css_onl y/index.html41 标准网页布局的兼容性处理1.1 常用过滤器IE 7版本浏览器专用过滤器如果专门为IE 7版本浏览器定义样式，则可以使用如下过滤器。

性能报告之HTML5性能测试报告

性能报告之HTML5性能测试报告1. 引⾔1.1. 编写⽬的HTML5 作为当前“最⽕”的跨平台、跨终端(硬件)开发语⾔，越来越受到前端开发者的重视，⽆论是 PC 端还是当前“⽕热”的移动端，其前端开发⼈员的占⽐均越来越⾼。

此消彼长，HTML5 开发者的增加⾃然导致 WPF / Flex / QT 等前端技术开发⼈员的缩减。

为了解决前端“跨平台”的问题，并应对开发⼈员稀缺的窘境，我们迫切的需要选择或更换新的技术路线，⽽ HTML5 当为⾸选。

本次测试⽬的是为了验证使⽤HTML5 作为前端技术路线，能否满⾜⼤屏(⾼分辨率，超过 8K)可视化的展⽰需求。

1.2. 测试背景由于 WPF 技术越来越边缘化，开发⼈员越来越少，成本越来越⾼，为了以后产品的升级换代，我们迫切需要寻找主流前端技术的替代品。

⽬前来看HTML5技术可能是未来前端技术的主流，其对于移动端、桌⾯端、还有三维⽅⾯都具有良好的兼容性。

1.3. 测试⽬标测试各⼤主流浏览器，当图形⼯作站的输出分辨率超过8K时能否正常的显⽰WEB页⾯，并流畅的显⽰动画效果。

测试各⼤主流浏览器对脚本语⾔(JAVASCRIPT)的解析性能。

测试各⼤主流浏览器对HTML5特性的⽀持程度。

综合考虑上述因素选择最佳浏览器进⾏测试，得出结论:能否满⾜⼤屏展⽰需求。

1.4. 专业术语术语具体含义HTML5超⽂本标记语⾔，以下简称 Html5FPS每秒页⾯刷新的帧数，低于 24 帧/秒将⽆法显⽰动画效果2. 测试环境为了保证测试结果的有效性，结合现有的硬件资源，选取三台机器作为本次测试的硬件环境，分别包含⼀台笔记本、⼀台台式机、⼀台图形⼯作站。

2.1. 笔记本配置类型规格内存 16GB显卡 NVIDIA GTX1050 4GBCPU INTEL I7-7700HQ 2.8GHZ 4 核⼼分辨率 1920 x 1080(2K)操作系统 Windows 10 专业版2.2. 台式机配置类型规格内存 32GB显卡 AMD WX5100 8GBCPU INTEL I7-7700 3.6GHZ 4 核⼼分辨率3840 x 2160(4K)操作系统 Windows 10 专业版2.3. 图形⼯作站配置类型规格内存 64GB显卡 AMD FirePro W9000 6GBCPU E5-2643 V4 3.4GHZ 6 核⼼分辨率 7680 x 3240(8K)操作系统 Windows 8.1 专业版3. 浏览器选型选择浏览器最主要的是选择浏览器内核，通常所说的浏览器内核是指渲染引擎 (Rendering Engine)，除此之外，浏览器内核还包含⼀个⾮常重要的部分——脚本(JS) 解析引擎，⼆者共同决定了⽹页加载和显⽰的性能。

下载提示

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML5 标签和属性列表

页数:21
HTML5所有标签汇总及标签意义解释

页数:8
HTML5标签属性备忘大全

页数:18
HTML5标签_和属性手册

页数:21
HTML5 标签和属性列表

页数:32
HTML5终极备忘大全+API配合使用(API中带例子和各标签属性大全)

页数:18
html标签以及属性大全

页数:16
HTML常用标签及属性

页数:4
html5常用标签及注释

页数:7
html标签属性大全总结

页数:20
HTML5标签大全(最终整理版)

页数:3
HTML属性标签大全

页数:33

HTML5兼容性检测方法性能对比

合集下载

(整理)检测浏览器支持哪些HTML5新特性的方法

如何解决HTML5标签不兼容

html5兼容性问题.doc

性能报告之HTML5性能测试报告

文档推荐

最新文档