为什么尝试使用Canvas绘制列表?使用canvas绘制列表的好处在于页面只有一个dom元素,这样对于大量dom元素组成的列表来说,无疑更节省页面内存。

本文将一步一步分析,如何实现一个canvas绘制的长列表。

 

Step1:dom节点映射

首先考虑一个问题,对于我们在页面中常见的dom结点,在Canvas中如何表示?

因此我们的第一步工作就是实现dom结点到Canvas绘制对象的映射

TAT.Cson AEditor快速上手教程
In Web开发 on 2015年07月12日 by view: 4,067
10

本教程演示如何使用AEditor制作一个简单的H5交互页demo:

37

 

交互页demo地址:

点击打开H5交互页demo

 

AEditor访问地址:

http://aeditor.alloyteam.com

TAT.Cson H5交互页编辑器AEditor介绍
In Web开发 on 2015年06月30日 by view: 10,630
27

AEditor是什么?

AEditor是一个方便广大web开发者进行H5动画交互页开发的工具,开发者可以在AEditor上对交互动画以进行编辑,最终导出页面项目。与面向大众的H5交互页编辑平台(如玉兔,易企秀等)不同的是,AEditor面向开发者,在提供预设动画模式的同时,支持对动画进行帧的编辑,事件通知模型,以及可二次开发的特性,从而让开发者能更灵活地实现各种自定义的动画交互需求。

 

访问地址:http://aeditor.alloyteam.com/

浏览器支持:只支持chrome浏览器

 

快速上手教程:http://www.alloyteam.com/2015/07/aeditor-kuai-su-shang-shou-jiao-cheng/

 

概览

AEditor主要由五部分组成,分别是:基础操作栏、时间轴管理栏、元素属性编辑栏、精灵管理栏以及预览区域。

对于传统的页面模型来说,数据的拉取+渲染模型如下:

1

在页面的head部分,使用jsonp预拉取cgi资源,然后在资源加载完成之后,检查预拉取的数据是否已经返回,如果已返回,则直接用该数据渲染(避免了先用缓存数据渲染再用cgi数据渲染导致的二次刷新),否则才用缓存数据渲染。

TAT.Cson 关于node.js的进程管理
In Web开发 on 2014年11月03日 by view: 14,197
5

如果是单纯的运行一个node进程,那会比较简单,例如:

但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一个server服务时,我们就有更多的需求。

例如:

1.服务挂掉的时候自动重启。

2.列出所有服务,包括服务的信息。

3.能够重启/终止某个服务。

4.为服务的运行记录日志。

TAT.Cson browserify运行原理分析
In JavaScript,Node.js,Web开发 on 2014年10月21日 by view: 22,437
10

 

目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的script脚本中引入所用js就可以了。

但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以node作为后端为例):

1.spa的应用,需要同时支持服务端直出页面以及客户端pjax拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。

2.一个通过websocket对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。

这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。

TAT.Cson 更快的异步执行
In Web开发 on 2014年03月03日 by view: 40,202
19

如果要异步执行一个函数,我们最先想到的方法肯定会是setTimeout
例如:setTimeout(function( /* 1s后做点什么 */){},1000}

那如果说要最快速地异步执行一个函数呢?
是否会是:

可惜的是,浏览器为了避免setTimeout嵌套可能出现卡死ui线程的情况,为setTimeout设置了最小的执行时间间隔,不同浏览器的最小执行时间间隔都不一样。chrome下测试 setTimeout 0 的实际执行时间间隔大概在12ms左右。

兼容:IE7 8 9 10 chrome firefox
demo地址

之所以说这是CSS的障眼法,是因为这种效果并不是使用CSS原生的属性进行实现的,并不仅仅是使用一张图片,然后通过特定属性使其翻转,因为我们知道CSS并不提供另图片翻转的接口。要实现这种效果,我们需要的是通过图片和外层div的border的配合,使图片看起来翻转了一定角度。

TAT.Cson canvas动画优化小议
In HTML5,Web 前端优化,Web开发 on 2013年12月01日 by view: 11,158
8

在使用canvas制作动画时,最传统的方式是对 canvas update -> clear -> draw 的过程

e1

但是对于同一个view里的不同的动画,需要的更新频率可能并不一样,所以对于不同类型的动画,我们可以放在不同的canvas层上进行渲染,使用多层canvas分别渲染取代单个canvas

一 .《墙来了》简介

《墙来了》是一款基于HTML5的体感游戏,第三届腾讯创意马拉松的一等奖作品,由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品。《墙来了》 采用 HTML5、Javascript、CSS3 等全新 Web 技术来构建一个在线的体感游戏,只要有一个浏览器和一个摄像头,就可以通过身体的摆动,体验穿墙的刺激与快感。

  • 运行平台:Chrome
  • 语言支持:中英文