JS获取终端类型

var g_sUA = navigator.userAgent.toLowerCase();
var android = g_sUA.match(/(android)\s+([\d.]+)/);
var ios = g_sUA.match(/(ipad|iphone|ipod).*os\s([\d_]+)/);
var isAndroid = !!android;
var isIos = !!ios;

样式化的HTML5.JS

(function () {
    var oHead = document.getElementsByTagName('head')[0];
    var sBlock = 'header,footer,section,aside,article,nav,hgroup,figure,figcaption,details,summary';
    var sInline = 'time,mark,ruby,rt,rp,output,keygen,meter,progress,command,source';
    var sOther = 'video,audio,canvas,datalist';
    var oStyle = document.createElement('style');
    oStyle.type = 'text/css';
    sCSS = sBlock + '{display:block;margin:0;padding:0;border:none}' + sInline + '{text-decoration:none;font-style:normal;font-weight:normal}';

    if (oStyle.styleSheet) {
        var aTags = (sBlock + ',' + sInline + ',' + sOther).split(',');
        for (var i = 0; i & lt; aTags.length; i++) {
            document.createElement(aTags[i]);
        }
        oStyle.styleSheet.cssText = sCSS;
    } else {
        oStyle.innerHTML = sCSS;
    }

    oHead.appendChild(oStyle);
})();

YUIConf 高性能的javascript

PPT:http://lanyrd.com/2010/yuiconf/sqky/
翻译:greengnn

避免加载缓慢javascript

  • js置于底部
  • 尽可能的合并js
  • 选择一个合适的方式加载js
    1. 动态创建js
    2. 延迟js
    3. 异步js

避免执行缓慢的js

  • 不要让js执行超过50ms
  • 分离过长的js进程
    1. Timers
    2. Web Workers

避免长时间的UI更新

  • 小心repaint和reflow
  • 不在文档上展现复杂的DOM运算
    1. 先把DOM移除,更改后重新添加
    2. 把元素display设置为none,更改后再还原display
    3. 使用DocumentFragment元素,把DOM创建后在一次性展示
  • 把所有的样式变化合并到一组,使用className切换代替style,或者cssText
  • 避免意外的reflow,比如offsetTop,多次使用把他们缓存到变量里。

Continue reading