TAT.Perlt 前端相关数据监控
In Web 前端优化 on 2014年03月04日 by view: 34,976
19

项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统。

所以我们需要做以下的一些模块:

一、收集脚本执行错误

通过管理后台系统,我们可以看到页面上每次错误的信息,通过这些信息我们可以很快定位并且解决问题。

最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome 开发者工具的 Timeline 分析面板,以及 DOMContentLoaded 事件。一个是强大的令人发指的性能分析工具,一个是重要的性能指标,于是就用 Timeline 对 DOMContentLoaded 事件进行了一番研究。

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

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

e1

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

译自:
A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App

原作者:Kyle leads
译者:  TAT.sheran

注:该文章大约 3000 字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案,用来优化你的网页运行速度。注意不是让你的站点运行的有多快,而是让你的用户感觉有多快。


A Beginner's Guide to Perceived Performance

当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还是自适应式,只要清楚你要做的样式,精心制作一个好看的站点就不是什么问题。

原文:http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/

作者:

译者按:本人第一次翻译外文,言语难免有些晦涩,但尽量表达了作者的原意,未经过多的润色,欢迎批评指正。另本文篇幅较长、信息量大,可能难以消化,欢迎留言探讨细节问题。本文主要关注 V8 的性能优化,部分内容并不适用于所有 JS 引擎。最后,转载请注明出处: )

原文:http://blog.artillery.com/2012/05/realtime-multiplayer-3d-gaming-html5.html

这篇文章国内有些机器译的版本,但实在太难阅读,这里试译了下。
由于译者水平有限,可能会有不少错漏之处,一些不明确是否译准的地方附了原文。
此文涉及挺多框架/库,在翻译过程中 ip 收获还是挺多的,建议大家在阅读时可以同时去了解下文中所提到的相关技术。
【提示:此文不是"跟我学做 HTML5 游戏"之类的教程文章】

 什么是函数节流?

介绍前,先说下背景。在前端开发中,有时会为页面绑定 resize 事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定 mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在一个正常的操作中,都有可能在一个短的时间内触发非常多次事件绑定程序。而大家知道,DOM 操作时很消耗性能的,这个时候,如果你为这些事件绑定一些操作 DOM 节点的操作的话,那就会引发大量的计算,在用户看来,页面可能就一时间没有响应,这个页面一下子变卡了变慢了。甚至在 IE 下,如果你绑定的 resize 事件进行较多 DOM 操作,其高频率可能直接就使得浏览器崩溃。

Web 无障碍设计(Accessibility in Web design,也叫网站可及性 )是要让所创建的网站对所有用户都可用/可访问,不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

 

为什么无障碍如此重要(帮助残障人士)

为什么不是所有网站都能无障碍访问?你可能也会问自己为什么存在 “无障碍” 的问题,为什么不是所有网站都能让所有用户无障碍访问?要进行无障碍设计有许多不同原因,其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。

Application cache 是 HTML5 中在规范完整性上比较糟糕的特性之一,规范上的不到位导致浏览器厂商在实现上也存在些许差异,而产生本文档的目的即让开发者们知晓那些潜规则,摆脱问题的困惑与束缚,正确的使用离线缓存真正让 Web 加速。

使用事件代理

有时候我们会感觉到页面反应迟钝,这是因为 DOM 树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个 div 中有 10 个按钮,你只需要在 div 上附加一次事件句柄就可以了,而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。