html5应用性能优化

着前端技术的不断发展，html5不仅应用于传统的web页面开发，而且还能用于移动APP、桌面应用开发，甚至各大互联网平台推出的小程序也是借鉴了html5技术。

h5应用相比原生应用来说，用户体验上会有一些差异，因此，性能调优非常重要。

对html5的调优可以从以下几个方面入手:

1.网络调优

网络调优又有以下几种处理方式:

首先，减小请求体积，对代码进行压缩处理，启用服务端的GZIP配置等，能有效减小数据传输的体积。

其次，减少请求次数，适当的使用一些缓存技术，将数据缓存到本地，这样就不需要频繁向服务端请求数据。增加一些防抖、节流的措施，防止用户不必要的重复操作，重复请求。

第三，优化网络链路，使用CDN技术，让客户端从最近的网络节点请求资源，减少网络开销。

最后，还有分页加载、延时加载、差量加载等可用于不同场景的优化。

2.架构优化

搭建h5应用，最好采用单页面应用架构，这样可以减小浏览器切换带了的额外性能开销，目前有很多优秀的框架帮我们搭建H5应用，例如:Vue等。另外，Vue等框架的虚拟dom技术，也会大大减少实体dom的操作次数，减小性能开销。

当然，在具体的开发过程中，数据结构、算法的优化也很重要，这个就跟具体业务场景有关，无法一一列举。

3.渲染优化

需要对浏览器渲染的原理有一定的研究，页面渲染大致四个过程: dom树解析、渲染树解析、写入显存、图形绘制。

dom树的解析，是对整个文档的html、css结构进行解析，因此html、css的结构越简洁，嵌套的层级越少，解析效率就会越高。

渲染树的解析，是根据html与css解析结果,计算出每个元素的实际显示效果。而写入显存，则是将计算好的渲染树，写入到显示器的内存。这2个过程，需要减少重绘的发生，否则很影响性能。简单的说一下重绘，改变一个元素的宽高，会影响整个布局重新排版，这就是重绘，如果改变背景色则不会影响其它布局。因此尽量避免重绘操作，例如，给图片设置固定大小，就不会因为网络加载过程中，图片尺寸变化，导致整个页面布局排版变化。

最后是图形绘制，显示器根据刷新频率，将内存中的图像，绘制到屏幕的像素点上。这里我们需要尽量避免一些性能消耗较大的显示效果，如:阴影、圆角，另外如果需要动画效果的话，则尽量使用css3实现，css3动画会启用硬件加速。

、XHTML与HTML的区别

文档结构

XHTML DOCTYPE 是强制性的

<html>中的 XML namespace 属性是强制性的

<html>、<head>、<title>以及 <body>也是强制性的

元素语法

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

二、HTML5中一些新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

   /*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

三、HTML5web存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

四、HTML5 应用程序缓存

HTML5 -应用程序缓存=>使用文章链接跳转点这里

五、HTML5 服务器发送事件（Server-Sent Events）

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。

<h1>获取服务端更新数据</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

详情和代码示例：.

七、HTTP状态消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客户端错误

5xx: 服务器错误

详情

八、HTTP 方法：GET 对比 POST

两种最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.php?name1=value1&name2=value2

有关 GET 请求的其他一些注释：

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

有关 POST 请求的其他一些注释：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

其他 HTTP 请求方法

下面的表格列出了其他一些 HTTP 请求方法：

原文链接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

架提供集成环境，用于开发和设计网站以加快交付速度。有很多集成开发环境（IDE）让我们看看最顶级的框架。

HTML 5包含了各种先进的元素和新的元素，易于实现并增强了许多功能。这种标记语言对Web服务器和脚本语言非常友好。响应式设计通过HTML 5变得简单和互动。许多框架被发布以有效和高效地支持和实现HTML 5。框架提供集成环境，用于开发和设计网站以加快交付速度。有很多集成开发环境（IDE）让我们看看最顶级的框架。

1.JO

JO是简单的Web应用程序开发框架。这也支持javascript和css3。编码的交互区域使您可以更快更轻松地实现和编辑代码。此集成开发系统支持与各种浏览器（如Chrome，IE，iOS等）兼容。非常支持开发各种移动和Web应用程序。

2.iio Engine

iio Engine是一个基于HTML5的Web应用程序开发系统。这提供了一个环境，不仅有助于开发Web应用程序，而且还提供响应式应用程序。该框架包含许多强大的功能和一个调试系统，可帮助提供错误免费应用程序。它被设计为轻量级，可以在系统上更快地安装。

3.Gridless

Gridless是未来的HTML5和CSS3框架。这个开发系统支持各种排版，并协助提供一个适用于任何地方的响应式网站，如旧手机到最新手机或平板电脑。该系统适用于更新的技术，如CSS标准化，IE错误修复等等。

4.LimeJs

LimeJs是为基于超文本标记语言5创建应用程序而开发的。可用于最新技术的浏览器，如触摸屏手机和平板电脑。在这里，你只需要在开发游戏的时候做更少的代码就可以更快更轻松地完成响应和充分的交互。

5.Reverie

Reverie是基于最新HTML版本的WordPress框架。这提供了一个响应式搜索引擎友好的应用程序它支持各种令人惊叹的布局，并有助于增强业务。

6.Montage

Montage是先进的Web应用程序开发系统，支持设计应用程序的可扩展性和易于维护。它带有拖放属性。在这里，您可以开发可重用的用户界面组件和模块，可以在组件和控制器之间绑定属性，并使用文档对象模型和更新来确保用户交互的顺利进行。

7.Joshfire

Joshfire，一个杰出的基于HTML 5的框架。该IDE允许开发人员简单快速地创建支持各种屏幕的Web应用程序，如平板电脑，超级图书和智能电视。开发系统的结构增强了内容优化。

8.Lungo

Lungo提供基于趋势HTML系列的可扩展性和响应式Web应用程序开发框架。这是帮助创建Web应用程序的轻量级标准集成环境。Lungo提供对JavaScript编码的完全控制。

结论

希望这份清单能够拓宽视野，并催生使用这些框架开发网站的潜力。上述大多数框架都是免费提供的，只需点击几下即可轻松下载和安装。如果您在下载或列表中提供的信息中发现任何框架问题，请与下面给出的评论部分分享。

在线咨询

上一篇：仅需 5 步，用 JavaScript 直接通过前端发送电子邮件
下一篇：关于CENT百分浏览器mhtml html文件图标变白的bug解决办法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html5应用性能优化

8.Lungo

结论

您的项目需求