HTML5在线教程和技术博客

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中一部分高性能应用可以使用wasm来进行替代,比如React小组就准备用Wasm来重写其Reconciler部分(该部分用来管理组件加载和刷新),这些变动对React的使用者不可见...

    阅读全文 收藏 评论 (1) 阅读 (279) 2017-03-07 15:13:03  
  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来达到非矩形设计的界面效果。使用透明图片遮盖[TD_Editor] data-height=450 data-theme=embed data-slug-id=33381 data-default-tab=result class=tdwow[/TD_Edito...

    阅读全文 收藏 评论 (0) 阅读 (229) 2017-03-01 17:07:11  
  • WebGL、Asm.js和WebAssembly概念简介

    随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技术的原因。什么是WebGLWebGL是为了给Web添加类似桌面(或移动)系统上的OpenGL的特性支持,从而实现强大的3D图形渲染效果。什么是Asm.jsAsm.js是一个JavaScript...

    阅读全文 收藏 评论 (1) 阅读 (330) 2017-02-27 13:00:56  
  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独的属性,比如[type],或者可以是一个属性和取值的组合,比如[type=checkbox] 或 [for="email"]。我们也可以用属性选择器来匹配属性存在与否以及子字符...

    阅读全文 收藏 评论 (0) 阅读 (196) 2017-02-21 18:15:59  
  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in their Chrome browser (meaning that the Unity Web Player will no longer work there) which is pushing a lot of Unity developers to try out WebGL as an alte...

    阅读全文 收藏 评论 (0) 阅读 (230) 2017-02-08 20:12:09  
  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。这样CSS看起来更像一门样式“语言”了。在这之前,我们得使用SASS(SCSS)预编译方式来支持变量,现在你可以直接在CSS代码中使用变量。该特性的规范描述在

    阅读全文 收藏 评论 (0) 阅读 (225) 2017-02-07 12:35:59  
  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Query)来检测屏幕尺寸,从而实现响应式界面设计。
    而特性查询则用来查询用户代理(如桌面浏览器)是否支持某个CSS3的特性,这个功能除了IE之外,已被其他浏览...

    阅读全文 收藏 评论 (0) 阅读 (196) 2017-02-06 12:01:46  
  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式,代码看起来更象一个UI组件。每个标签,比如 &View /foo='hello',或者使用大括号包含起来的内嵌JS表达式,比如 bar={baz},baz将引用变量baz。标签可以...

    阅读全文 收藏 评论 (0) 阅读 (270) 2017-01-17 16:44:19  
  • ES6小知识:动态对象键(Dynamic Object Keys)语法简介

    在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const>chosenAnimal>=>'cat' const>animals>=>{ >>[`animal${chosenAnimal}`]:>true, } console.log(animals.animalcat)>//>true如上animal${chosenAnimal}被动态解释成animalcat键。
    这是一个很强大...

    阅读全文 收藏 评论 (0) 阅读 (303) 2017-01-17 15:39:27  
  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当我们需要用计算机来模拟人类这个最简单的动作时,通过观察和分析,我们可以把步行简化为下面这样的一个过程:(1)中分:(也称作:contact 接触点)这是我们人为...

    阅读全文 收藏 评论 (0) 阅读 (405) 2017-01-15 22:59:39