HTML5页面的作用及应用场景有哪些

HTML5页面的作用

1、令企业发展更开阔：HTML5页面作为新兴的微信推广工具，可以应用各种各样的场景，比如产品展示、购买流程，购物车等，能让客户有更快的速度体验，不再卡顿。

2、令体验更完美：HTML5页面中的各种炫酷创新的场景模拟、动画效果、互动方式，都能给用户带来新鲜独特的完美体验，这是传统手机页面所不能媲美的。

HTML5页面可以运用到哪些应用场景

1、企业宣传：高大上的游戏能帮助企业快速聚集人气，让你的客户订单从游戏开始。

2、企业招聘：令企业走向人才，令人才近距离了解企业、认识企业，令招聘更高效。

3、商业营销：通过HTML5特性，使用大转盘，刮刮卡，满减满增等增加客户粘性，从而达到营销目的。

4、报名预约：旅游线路报名、教育课程报名、餐厅预约等场合都可以，多种表单预设，也可以自己创建新的预约流程，自由选择。

teambition

cloud9

注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。（使用js控制渲染来替换html跳转）

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的 *** 作都在这张页面上完成，都由JavaScript来控制。

因此，对单页面应用来说，模块化的开发和设计显得相当重要。

原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

单页面应用的优缺点：

优点：

1、用户 *** 作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来 *** 作。

2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢

单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好

2、SEO不友好

SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

1、Hash模式：（也就是通过锚点？）

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 " www.baidu.com/#hashhash " ，其中 "#hashhash" 就是我们期望的 hash 值。

hash 值的变化不会导致浏览器像服务器发送请求，而且hash 的改变会触发 hashChange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

2、History模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转。

在 HTML5 的规范中，history 新增了以下几个 API：

hash模式和history模式对比

1、hash 模式相比于 history 模式的优点：

兼容性更好，可以兼容到IE8

无需服务端配合处理非单页的url地址

2、hash 模式相比于 history 模式的缺点：

看起来更丑。

会导致锚点功能失效。

相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。

引用：

https://www.cnblogs.com/ppforever/p/5126640.html

https://www.jianshu.com/p/0c32c85c668b

https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1