Web 前端优化 | AlloyTeam

前端相关数据监控

In 未分类 on 2014年03月04日 by TAT.Perlt view: 35,733

19

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

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

一、收集脚本执行错误

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function error(msg,url,line){

var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息

var m =[msg, url, line, navigator.userAgent, +new Date];// 收集错误信息，发生错误的脚本文件网络地址，用户代理信息，时间

var url = REPORT_URL + m.join('||');// 组装错误上报信息内容URL

var img = new Image;

img.onload = img.onerror = function(){

img = null;

};

img.src = url;// 发送数据到后台cgi

}

// 监听错误上报

window.onerror = function(msg,url,line){

error(msg,url,line);

}

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

JS、CSS 以及 img 对 DOMContentLoaded 事件的影响

In 未分类 on 2014年03月03日 by TAT.kerry95 view: 27,853

14

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

canvas 动画优化小议

In 未分类 on 2013年12月01日 by TAT.Cson view: 14,280

8

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

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

交互体验优化：4 步让移动网站看起来像本地应用

In 未分类 on 2013年10月31日 by TAT.sheran view: 49,388

34

译自：
A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
原作者：Kyle leads
译者： TAT.sheran

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

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

【译】编写高性能 JavaScript

In 未分类 on 2012年11月20日 by TAT.Johnny view: 89,887

21

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

作者：Addy Osmani

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

【译】HTML5 实现多人实时 3D 游戏

In 未分类 on 2012年11月14日 by TAT.iptton view: 19,145

9

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

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

浅谈 javascript 的函数节流

In 未分类 on 2012年11月02日 by TAT.老教授 view: 151,473

29

什么是函数节流？

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

如何开发无障碍的 Web 网页应用详细手册教程指南

In 未分类 on 2012年10月19日 by TAT.Kinvix view: 26,861

3

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

为什么无障碍如此重要（帮助残障人士）

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

【高性能前端 4】Appcache Facts 中译版

In 未分类 on 2012年10月16日 by TAT.yuanyan view: 10,792

9

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

【高性能前端 3】高性能 JavaScript

In 未分类 on 2012年10月10日 by TAT.yuanyan view: 24,744

10

使用事件代理

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