• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5的性能不输原生app 可以用拼积木的方式做HTML5产品

html5的性能不输原生app 可以用拼积木的方式做HTML5产品

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5等相关知识,匿名希望在学习及工作中可以帮助到您
 可能你已经发现了,一个好玩有趣的 HTML5 页面在微信朋友圈里获得的用户关注度会远超过那些普通的独立应用。在移动应用越来越多,推广越来越难做的情况下,你的产品是不是也应该有一个 HTML5 页面?

2063.jpg

  如果答案是肯定的,那么或许可以试试 Amaze UI 这套开源的 HTML5 前端框架,利用它提供的 Web 组件、JS 插件和层叠样式表(CSS),你可以快速的搭建出一款 HTML5 产品。

  对于那些经常在移动设备上访问 Web 页面的用户来说,你可能已经注意到了,一个 Web 页面基本可以分为菜单、标题栏、图片画廊、内容列表、分割线这几大块。在 Amaze UI 里面,官方提供了各种各样的 Web 组件,你甚至可以像拼积木那样来搭建 HTML5 产品。

  除了上面提到的那几个主要网页组件之外,像折叠面板、页头、页脚、图片轮播、选项卡、简介、段落这些都是 Amaze UI 中开发者可以直接使用的 Web 组件。由于 Amaze UI 是一款开源产品,所以一些第三方的开发者也在不断向其贡献特色化的组件。比如来说,在涉及到地理位置的时候,用户可能会需要一个地图指引,这时你就可以集 成“百度地图”的组件;在文章下面你可能需要评论体系,这时又可以用“多说”的组件;一些服务性的网页又可能需要客服,这时“美洽客服”组件自然也就派上 用场了。

  当然,可能有些开发者会说,这些元素只是 Web 站点的一部分,当你真正来做一个 Web 站点时,你可能还需要各种各样的交互效果和文字排班样式。这时 Amaze UI 的 JS 组件和 CSS 组件的用处就显现出来了。

  通过 JS 组件,开发者可以获得一系列的 UI 增强效果,比如,警告框、平滑滚动、加载进度条、弹出框、模态窗口、下拉组件、按钮交互等等。通过 CSS 组件,开发者既可以直接集成像按钮、表单、表格这样的 HTML 元素,又可以使用小徽章、面包屑导航、按钮组这样的页面组件。

  目前,Amaze UI 总共有近 20 个 CSS 组件、10 个 JS 组件和 17 款包含近 60 个主题的 Web 组件,按照 CEO 陈本峰的说法,和国外的一些 Web 前端框架相比,Amaze UI 会更多的考虑中文用户的需求。比如在字体排版上,Bootstrap 这套前端框架就没有定义中文字体,这样你的网页在不同的系统和浏览器下的展示效果可能都是不一样的,但 Amaze UI 中由于定义了中文字体而且针对国内市场份额比较高的浏览器做了优化,所以就可以避免出现这样的情况。

  对于那些正在尝试做 HTML5 产品的公司来说,你可能还停留在 Facebook、LinkedIn 等大公司从 HTML5 app“叛逃”到原生 app 的阴影中,因为即使到了今天,一些人在谈到 HTML5 时还会举上面的例子。不过一位曾经在 Chrome 团队工作的工程师 Shinji Ikari 告诉 PingWest,Facebook 当初之所以会把 HTML5 app 做的那么慢,这更多的是 Facebook 自身的原因,而不是由于 HTML5 不行。因为从技术上来说,HTML5 的缺陷不是慢,而是不能 Scale。当时,Facebook 的 HTML app 还在用 XML,所以可以说他们的技术是相当落后的。

  为了证明 HTML5 app 的性能不输给原生应用,Google 的两位工程师专门做了一个 Fastbook 的 HTML5 app 来表明 Facebook 的“叛逃”并不是 HTML5 的错。按照 Shinji Ikari 说法,两年前 HTML5 app 的性能就可以赶上原生 app 了,何况现在!

  那么你或许会好奇,既然 HTML5 的性能不输给原生 app,那么我们平时看到的优质 HTML5 app 为什么这么少呢?对于这一点陈本峰觉得这更多的还是这一领域开发人员的技术积累不足。

  Shinji Ikari 也表示,对于很多应用来讲,写成原生 app 几乎是必然的,如果你在写一个 3D 游戏,而不需要任何的 DOM(文档对象模型),那么根本没有任何理由使用 HTML。使用 JavaScript 不仅不会简化你的工作,还会让你的项目推进变得更糟糕。但是,像 Facebook 的这样手机应用,就是一个列表,没有什么可以超出 HTML5 的范围的内容,使用 HTML5 应该会得心应手,所以很多时候大公司对于技术的选择没有太大的借鉴价值。

  好了,在解释了 HTML5 并不像人们想象的那么弱之后,也许你会觉得 Amaze UI 里的这些组件还不足于做出自己想要的产品,这也是 Amaze UI 选择开源的原因之一—让社区为其贡献更多的内容。如果你现在正在打算做 HTML5 产品,那么即便不选择 Amaze UI 框架,也不要让 Facebook、LinkedIn 这样的案例成为你的绊脚石。

您可能想查找下面的文章:

相关文章

  • 2018-12-03使用HTML5 Canvas绘制直线或折线等线条的方法讲解_html5教程技巧
  • 2018-12-03三分钟HTML5画布(Canvas)动画教程 - CSDN博客
  • 2017-08-06HTML5教程之html 5 本地数据库(Web Sql Database)
  • 2018-12-03HTML5 Canvas实现火焰效果像火球发射一样的示例代码
  • 2017-08-06Bootstrap 学习分享
  • 2018-12-03HTML5 Web Workers
  • 2018-12-038个最新炫酷的HTML5动画应用的图文详解
  • 2017-08-06html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
  • 2018-12-03微信html5页面如何调用第三方位置导航
  • 2018-12-03H5页面在iPhoneX显示的适配问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 具体解析HTML5文件读取FileReader及文件读取模块的封装
    • phonegap使用方法介绍(五)本地存储的实现方法
    • 有关H5中轮播图的制作方法
    • H5单页面手势滑屏切换原理
    • 混合移动开发框架详解
    • Html5 Canvas初探学习笔记(2) -绘制深入
    • HTML5 是一门编程语言吗?
    • 利用HTML5的一个特性- DeviceOrientation来实现手机上摇一摇功能
    • HTML5单页面手势滑屏切换原理分析
    • HTML5 表单验证失败的提示语问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有