oxox.io 2014-05-11T03:30:54-07:00 ccf.developer@gmail.com Clipboard API实现截图粘贴到网页 2013-11-24T03:16:59-08:00 oxox.io /notes/clipboard-api-and-events Clipboard API and events 里面描述了剪切板事件onpaste，通过onpaste可以访问剪切板数据，然后使用blob、和FileReader方法将剪切板数据转为dataurl即可。

类似QQ截图，然后直接粘贴到网页上传。非常方便。

相关代码片段：http://jsfiddle.net/baofen14787/8yxc5/

/**
 * 通过reader方式生成dataurl图片
 * @param event
 */
function handlePaste(event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    var blob = items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function(event){
        console.log(event.target.result)}; // data url!
    reader.readAsDataURL(blob);
}

/**
 * createObjectURL方式，创建图片文件
 * @param e
 */
function handlePaste2(e) {
    var items = e.originalEvent.clipboardData.items;

    for (var i = 0; i < items.length; ++i) {
        console.log(items[i].type);
        if (items[i].kind == 'file' && items[i].type == 'image/png') {
            var blob = items[i].getAsFile();
            var img = document.createElement('img');
            img.src = window.URL? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
            $("#js_editor").html(img);
        }
    }
};
]]> javascript异步编程之setTimeOut 2013-11-23T13:56:59-08:00 oxox.io /notes/javascript-synchronous-settimeout javascript的执行引擎是单线程的，正常情况下是同步编程的模式，即是程序按照代码的顺序从上到下依次顺序执行。只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），那么在执行期间任何UI更新都会被阻塞，界面事件处理也会停止响应。导致整个页面卡在这个地方，其他任务无法执行。

特别是在for循环语句里，如果for循环的处理逻辑比较复杂，并且循环次数过多，超过1000次时，javascript的执行会阻塞浏览器处理起来会有明显的假死状态。原因就是浏览器在调用javascript的时候，主界面是停止响应的，因为cpu交给js执行了，没有时间去处理界面消息。

为了解决卡死的问题，很多人提出了异步编程的解决方案，这也是性能优化的其中一个方式，在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应。现在很火的nodejs就是异步编程，比如路由派发，IO操作，都是异步的。

在前端页面实现中，最常见的异步就是ajax操作，请求一个ajax无需等待ajax返回，则可继续操作页面。

其他的还有通过setTimeout,setInterval,image.onload, postMessage,webwork等方式进行异步编程实现。

网上也有很多库实现了异步编程如：do.js. step.js, async.js, flow.js，就不详细阐述了，有兴趣的自行google了解。

setTimeOut

这里主要讲setTimeOut实现异步编程的方式。

先看一段代码，http://jsfiddle.net/RPQgj/189/

<!DOCTYPE html>
<html>
<head>
    <title>DEMO</title>
</head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    var updateSync = function() {
        for (var i = 0; i < 10000; i++) {
            $('#js_output').text(i);
        }
    }
    var updateAsync = function() {
        var i = 0;
        function updateLater() {
            $('#js_output').text(i++);
            if (i < 10000) {
                setTimeout(updateLater, 0);
            }
        }
        updateLater();
    }
</script>
<body>
<button onclick="updateSync()">同步DEMO</button>
<button onclick="updateAsync()">异步DEMO</button>
<div id="js_output"></div>
</body>
</html>

点击同步DEMO：你会感觉按钮按下去的时候卡了一下，然后看到一个最终结果99999，而没有中间过程，这就是因为在updateSync函数运行过程中UI更新被阻塞，只有当它结束退出后才会更新UI。

点击异步DEMO：你会看到UI界面上从0到999快速地更新过程，这就是异步执行的结果。 函数里先声明了一个局部变量i和嵌套函数updateLater，然后调用了updateLater，在这个函数中先是更新output结点的内容为i， 然后通过setTimeout让updateLater函数异步执行。这实际是一种递归调用。任何for循环都可以改造成递归调用的形式。

为什么用了setTimeOut(fn,0)后，还是能看到快速的更新呢？

这是因为虽然他的delay设置为0，几乎是即时触发，但还是被添加到了执行队列后面，但就是这个过程，渲染已经完成了，当他回调函数执行时，输出来的已经是更新后的值了。

以上结果很显然，异步操作不会阻塞UI，你可以继续执行浏览器其他操作。让UI操作更流畅，但异步编程也有坏处，如上面代码，使用setTimeout的异步方式，在代码整体执行效率来看，要比同步执行耗时更长时间。同时由于是异步执行，打断了原有代码的执行顺序，造成嵌套的函数调用，破坏了原有的简单逻辑，让代码难以读懂。

在判断是否执行完毕时，在同步编程中很方便实现，代码写在for循环后面就行了。而异步的话，则需要做一些判断。

还是以上的例子，如何在循环结束后执行回调？可以使用Jquery的$.when，和$.Deferred方法，当然也可以自己写回调函数，但是看起来没那么优雅。

   var wait = function(){
        var dtd = $.Deferred();
        var i = 0;
        function updateLater() {
            $('#js_output').text(i++);
            if (i < 1000) {
                setTimeout(updateLater, 0);
            }
            if(i == 1000){
                dtd.resolve(); // 改变Deferred对象的执行状态
            }
        }
        updateLater();
        return dtd.promise(); // 返回promise对象
    }
    var updateAsyncBack = function(){
        $.when(wait()).done(function(){
            alert('done!');
        })
    }

扩展阅读

]]> 如何用xdemo开发一个复杂的线上原型应用 2013-11-21T15:08:12-08:00 oxox.io /notes/make-a-complicated-online-demo-via-xdemo 想法 
攻城掠池之余

作为最接近线上用户的web前端工程师，能够应接各种前端需求，切页面、p图、写js、懂标签语义、整兼容性。。。别太高兴，这仅为及格而已；追求优秀，除却十八般技能，你需求严谨追求细节，善于思考和总结，会利用先天的技术优势发现线上产品的优缺点，具有时常保持改善线上产品用户体验的意识和觉悟；追求牛逼，你还得学会将想法切实落地，最终将它转变成线上可体验的，有正向数据支撑的产品迭代！

然而在术业有专攻的年代，码农就是码农，有好的产品思维顶多说明你是个进化的码农，想法从拍板到落地的不是我们自己说了算的，和食物链类似，具有先决影响力的角色是我们的上游--产品经理。所以，如何向产品经理有力地传达我们独到的想法，引起他们的共鸣，最后达到联手改善产品体验的共同目标？这才是我们码农攻城师攻城掠池之余应该关注考量的问题。

XDEMO

道听途说，不如亲眼所见

它是一个chrome插件，它是前面问题答案的一部分，它能给指定线上页面注入远程的js和css，它随时让你的产品体验优化想法做成线上可以体验的原型，而不再是空洞的文档，也不再是没有真实数据、操作体验的静态页面！

XDEMO应用 -- Helloword

下面演示如何向易迅网注入一段简单的测试脚本。

1.下载和安装xdemo chrome插件

下载地址：xdemo-latest

安装办法：

  A. 在chrome浏览器地址栏输入chrome://extensions，按回车打开插件扩展面板，勾上开发者模式（Developer mode）
  B. 将xdemo插件拖到A打开的面板，完成安装

2.新建demo

在chrome://extensions面板中找到XDEMO,点击选项(Options)，打开XDEMO的配置界面如下：

XDEMO Options

3.录入demo的配置文件

一个demo对应一个配置文件，用来告诉XDEMO当前demo的相关信息，配置文件各字段解释如下：

    {
        /* demo名称 */
        "name": "XDEMO-Helloword",
        /* demo英文编号 */
        "ename": "ecd.yixun.xdemohello",
        /* demo描述 */
        "descrition": "XDEMO测试演示脚本",
        /* demo版本 */
        "version": "1.0.0",
        /* demo演示的页面（正则表达式） */
        "matches": ["http://*.yixun.com/*"],
        /* 注入到页面的css*/
        "css": ["http://oxox.io/demos/xdemo-hello/style.css"],
        /* 注入到页面的js */
        "js": ["http://oxox.io/demos/xdemo-hello/app.js"],
        /* demo作者 */
        "author": "levinhuang"
    }

4.随意编写demo

第三步点击读取成功后，打开上面matches匹配的任意网页，F12看下源码，bingo，app.js和style.css成功注入进去。 接下来你要做的就是在app.js和style.css里面随意编写你的demo了。

我们XDEMO-hello这个示例非常的简单哦，取页面所有的图片并集中显示出来，打开app.js看看

    $(function(){
        var $imgs = $('img'),
            $body = $('body'),
            heredoc = function(fn){return (fn.toString().split('\n').slice(1,-1).join('\n') + '\n');},
            tpl = heredoc(function(){/*
                <div id="xdemoHello" class="xdemo-hello">
                    <div class="xdemo-hello-bg"></div>
                    <div class="xdemo-hello-bd">
                        <div class="xdemo-hello-hd"><h3>Hello from XDEMO!</h3></div>
                        <div id="xdemoHelloInner" class="xdemo-hello-inner"></div>
                    </div>
                </div>
            */}),
            imgHtml = [];

        $imgs.each(function(i,o){
            var src = o.getAttribute('src')||o.getAttribute('_src');
            if(!src) return;
            imgHtml.push('<img src="$"/>'.replace('$',src));
        });

        $body.append(tpl);
        $('#xdemoHelloInner').html(imgHtml.join(''));
    });

XDEMO的更多信息，请移步XDEMO官网。

关于本地调试

Don't repeat yourself!

在上面的XDEMO例子中你会发现，所有的资源文件都在远程服务器上，XDEMO仅仅是负责将它们注入到页面而已。 这里涉及一个问题：如何将远程文件映射到本地磁盘的文件，方便频繁的开发调试？总不能"改一下，上传到服务器，刷新页面看效果"无休止符的循环吧，至少我是无法忍受。

映射远程文件至本地一般都用fiddler，你可以使用willow插件，我个人则喜欢用它自带的AutoResponder，利用正则表达式进行目录映射。

举个例子，将http://oxox.io/demos/下的文件映射到E:\Camp\Documents\GitHub\oxox\demos\，可以这样写：

If request matches... then respond with...
regex:http:\/\/oxox\.io\/demos\/(.*) E:\Camp\Documents\GitHub\oxox\demos\$1

很酷吧^^

关于代码的组织和模块化

要是所有的业务逻辑都像hello word那般简单该多好...

当原型的业务逻辑足够复杂，要往页面注入一大坨的html代码和css代码的时候，如果不想在持续的迭代中痛苦地穿越在乱糟糟密麻麻的代码中，甚至迷失方向，我们就得学会合理的组织代码，划分功能模块。

例如，从app.js中拆分功能模块：

app.js
  |
  |-----app.foo.js
  |-----app.bar.js

代码进行模块拆分之后，维护起来确实会方便很多，但同时也会附带一些新的问题：

1.代码引用和加载变得复杂

原来只需要引用一个app.js，现在得引用多个文件(app.foo.js、app.bar.js)

2.模块之间的依赖该如何处理？

3.模块之间如何通讯？

模块的加载和依赖管理

TODO：seajs、requirejs示例

模块之间的通讯

TODO：事件

关于HTML模板引擎

Hogan

关于数据的持久化

Xlog

Firebase

快捷的CRUD

AngularJs

]]> javascript的几种使用多行字符串的方式 2013-09-05T10:08:12-07:00 oxox.io /notes/ways-of-concatting-string-in-js 注：这篇文章摘录自http://jser.me/

JS里并没有标准的多行字符串的表示方法，但是在用模板的时候，为了保证模板的可阅读性，我们又不可避免的使用多行字符串，所以出现了各种搞法，这里以一段jade的模板作为示例，简单总结和对比一下。

字符串相加

这是最容易理解也很常用的一种形式，如下

var tmpl =''+
    '!!! 5' +
    'html' +
    '  include header' +
    '  body' +
    '    //if IE 6' +
    '        .alert.alert-error' +
    '            center 对不起，我们不支持IE6，请升级你的浏览器' +
    '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' +
    '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' +
    '    include head' +
    '    .container' +
    '        .row-fluid' +
    '            .span8' +
    '                block main' +
    '                include pagerbar' +
    '            .span4' +
    '                include sidebar' +
    '    include footer' +
    '    include script'

优点:

  • 易理解，简单，可靠
  • 足够灵活，可以在单个字符串中添加js逻辑

缺点 :

  • 并不是真正意义上的多行字符串, 如果想要真正的多行，需要自己加\n
  • 大量的+号看上去满天星,大量的'和", 丑陋

反斜线

这个叫续行符, 这个并非一种很常见的方式, 但是一旦用上了，还是很容易上瘾，只需要加一个字符

var tmpl ='\
    !!! 5\
    html\
      include header\
      body\
        //if IE 6\
            .alert.alert-error\
                center 对不起，我们不支持IE6，请升级你的浏览器\
                    a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载\
                    a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载\
        include head\
        .container\
            .row-fluid\
                .span8\
                    block main\
                    include pagerbar\
                .span4\
                    include sidebar\
        include footer\
        include script'

优点:

  • 简单,每一行只需要有多一个\
  • 高效！在大部分的浏览器上，这种方式都是最快的，看这个效率对比

缺点 :

  • 致命缺陷，每一行的\必须不可以有空格，否则直接脚本错误
  • 并不是真正意义上的多行字符串, 如果想要真正的多行，需要自己加\n
  • 尽管绝大部分的js引擎都支持它，但是它并不是ECMAScript的一部分(我并没有研究规范，这句话是从google的编码规范翻译过来的)

字符串数组join

var tmpl = [
    '!!! 5' ,
    'html' ,
    '  include header' ,
    '  body' ,
    '    //if IE 6' ,
    '        .alert.alert-error' ,
    '            center 对不起，我们不支持IE6，请升级你的浏览器' ,
    '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
    '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
    '    include head' ,
    '    .container' ,
    '        .row-fluid' ,
    '            .span8' ,
    '                block main' ,
    '                include pagerbar' ,
    '            .span4' ,
    '                include sidebar' ,
    '    include footer' ,
    '    include script'].join('\n');

优点:

  • 真正意义上的多行字符串
  • 易理解，简单，可靠
  • 足够灵活，可以在单个字符串中添加js逻辑

缺点 :

  • 大量的,号和'、", 丑陋

String.prototype.concat

var tmpl = String.prototype.concat.call(
    '!!! 5' ,
    'html' ,
    '  include header' ,
    '  body' ,
    '    //if IE 6' ,
    '        .alert.alert-error' ,
    '            center 对不起，我们不支持IE6，请升级你的浏览器' ,
    '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
    '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
    '    include head' ,
    '    .container' ,
    '        .row-fluid' ,
    '            .span8' ,
    '                block main' ,
    '                include pagerbar' ,
    '            .span4' ,
    '                include sidebar' ,
    '    include footer' ,
    '    include script');

优点:

  • 不常用，事实上字符串的concat方法远没有+号常见
  • 易理解，简单，可靠
  • 足够灵活，可以在单个字符串中添加js逻辑

缺点 :

  • 并不是真正意义上的多行字符串
  • 大量的,号和'、", 丑陋

heredoc

这是一种很有技巧的解决办法, 利用了function的toString方法

function heredoc(fn) {
    return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}

var tmpl = heredoc(function(){/*
    !!! 5
    html
      include header
      body
        //if IE 6
            .alert.alert-error
                center 对不起，我们不支持IE6，请升级你的浏览器
                    a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
                    a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script
 */});

优点:

  • 模板字符串内不必写多余的任何字符，干净，简单
  • 真正意义上的多行字符串, 有\n哦

缺点 :

  • 不可以在单个字符串中添加js逻辑
  • 容易被压缩器压缩掉，yui compressor可以通过/*!来避免被压缩掉，uglifyjs和gcc也可以通过选项配置不删除特定的注释，这个不是大问题

coffeescript

相当于换了一个语言，其实这种语言上缺少的功能，通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。

var tmpl = """ 
    !!! 5
    html
      include header
      body
        //if IE 6
            .alert.alert-error
                center 对不起，我们不支持IE6，请升级你的浏览器
                    a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
                    a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script
    """

优点:

  • 易理解，简单，可靠

缺点 :

  • 需要了解coffeescript
  • 整个文件都需要用coffeescript来写

ES6

ES6的有一个新的特性，Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性，另外typescript也会支持这种方式

var tmpl = 
   `!!! 5
    html
      include header
      body
        //if IE 6
            .alert.alert-error
                center 对不起，我们不支持IE6，请升级你的浏览器
                    a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
                    a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
        include head
        .container
            .row-fluid
                .span8
                    block main
                    include pagerbar
                .span4
                    include sidebar
        include footer
        include script`

优点:

  • 易理解，原生支持
  • 真正的多行字符串

缺点 :

  • JS引擎支持有限

总结

看了这么些写法，如何选择？如果你用的是coffeescript，放心大胆的使用它支持的多行字符串写法；如果是在客户端，同时你解决了你的压缩器去掉注释的问题，推荐使用heredoc；如果你无法解决压缩器的问题，使用反斜线连接吧，每行只需要加一个字符。

]]> 配置iis7.5显示php脚本错误 2013-08-27T03:43:12-07:00 oxox.io /notes/iis-php-display-detail-errors-instead-of-500 如何配置IIS7.5显示PHP错误信息而非莫名其妙简单的500错误代码呢？

步骤1 - 配置IIS PHP Manager

打开“IIS管理器”
-->点击“服务器”节点
    -->点击“PHP管理器(IIS Manager)”
        -->点击“Configure Error Reporting”,选中“Development Machine”。

注：如果你没看到PHP管理器，可以通过WPI(Web Platform Installer)进行安装。

步骤2 - IIS配置编辑器 （IIS Configuration Editor）

system.WebServer/httpErrors
errorMode - "DetailedLocalOnly" Change To: "Detailed"
existingResponse - "Auto" Change To: "PassThrough"

步骤3 - php.ini配置

display_errors = On
log_errors = On
error_reporting = E_ALL | E_STRICT

然后重启iis。

配置错误日志目录权限

注：如果上面步骤1-3还不行，则进行步骤4的操作。

默认情况下windows iis安装php模块的话，错误日志会在Windows/Temp目录下，所以需要给该目录开IUSER、IIS_IUSERS、Network Service的修改权限。

参考文章

Enabling IIS 7.5 and PHP Errors on Windows 2008 Server R2

]]> 易迅网Web性能优化思考 2013-08-26T07:53:12-07:00 oxox.io /notes/on-yixun-web-performance

结合2013Velocity中国大会，对易迅网的前端性能优化进行了些许思考。 公司越大团队越大，一些好的方案和想法执行和贯彻起来就会越困难。 无论如何，学会在日常coding中了解和保持性能优化的意识你才真正算得上酷的码农。

详细内容请移步下面Web slide。

Web slide 地址

《易迅网Web性能优化思考》

]]> 2013中国Velocity-Web性能与运维大会-Day2 2013-08-22T16:04:09-07:00 oxox.io /notes/oreilly-velocity-cn2013-day2 第二天上午的主题全是老外的，可都有点水，特别是那个才做前端三年不到的“二世哥”。。。仅仅剩下的安慰是：唯一一个css主题是本次大会唯一一个美女妹子Nicole Sullivan演讲的o(∩_∩)o,另外下午的三个前端主题还算给力。

Day2日程及对应演讲稿地址

导读：
1. 日期标绿 - 表示本人选择参与过
2. 中划线斜体 - 表示坑爹
3. 标红 - 表示推荐
08:00 来宾登记（酒店二层）
09:30
主题发言 预处理器时代的CSS性能
Nicole Sullivan (Stubbornella)
10:00
主题发言 浏览器中的JavaScript性能
Charlie Fiskeaux II (OmniTI)
10:30 上午茶歇
10:50
主题发言 坚持用户驱动的性能优化
Buddy Brewer (SOASTA)
11:05
走自己的路——有时候Web架构一定是不同的
Geir Magnusson Jr. (AppNexus)
12:00 自助午餐（宜客乐咖啡厅）
会厅A 会厅B 会厅C
13:30
监控真正的问题
Theo Schlossnagle (OmniTI)
13:30
百度前端性能优化基础服务
牛尧 (百度)
13:30
阿里集团高效数据库服务平台——iDB
叶正盛 (阿里巴巴)
14:30
淘宝高访问量优化的那些事儿
许令波 (阿里巴巴)
14:30
残酷KPI下的极致优化——淘宝和天猫网首页优化实践
杜欢 (阿里巴巴), 吴天豪 (阿里巴巴)
14:30
阿里HBase的自动化运维及容灾方案
朱金清 (阿里巴巴)
15:30 下午茶歇
15:50
如何进行多终端Web前端优化——QQ互联中的优化经验分享
任旻 (腾讯)
15:50
存储与性能
韩拓 (七牛)
15:50
数据复制中心架构与实践
刘杰 (阿里巴巴)
16:50
NoOps in XIAOMI
伏晔 (小米)
16:50
16毫秒的优化——Web前端性能优化的微观分析
陈子舜 (腾讯)
16:50
大规模Hadoop集群运维经验谈
柯旻 (阿里巴巴)

Day2 推荐的4个演讲

Nicole Sullivan- 预处理器时代的CSS性能

尽管Nicole说的内容很基础，但作为本届velocity上唯一 一个css的主题演讲，还是要推荐下！下面是一些个人觉得有价值的点。

1，oocss

这个不多说了。直接到她oocss github上看下吧。

2，unused css

分析css代码的覆盖率。以前不是很在意，但是在苛刻的极致的性能优化面前，可以一试，也有很多的工具辅助。

  1. chrome dev tool - audit 利用audit的功能，简单方便

  2. deadweight，目前仅支持32bit的机器

$ gem install deadweight
$ deadweight -s styles.css -s ie.css index.html about.html
$ deadweight -s http://www.tigerbloodwins.com/index.css http://www.tigerbloodwins.com/
$ deadweight --root http://kottke.org/ -s '/templates/2009/css.php?p=mac' / /everfresh /about

  1. Dust-Me Selectors ，一个ff的插件

  2. helium-css , 一个js写的扫描页面无用css代码的东东

3，尽量避免使用!important

扰乱了本来的样式权重顺序，对于后续开发维护的人有时候是个噩梦。

更多可参考文章：!important CSS Declarations: How and When to Use Them、如何和何时使用CSS的!important

4，sass

这个也不多说了，团队里都在用less，大同小异。关于嵌套(nested)，提到了一个很重要的原则，希望用sass和less的同学注意下，不要为了代码美观便利的目的而盲目的用嵌套。

Never go more than 3 level deep...
选择器的层级不要超过3级...

sass编译出来的css代码，如果选择器超过3级就应该考虑下怎么重构了。

5，hologram

一个利用css注释生成css文档的东东。

百度-牛尧-百度前端性能优化基础服务

正在做或计划做网页性能优化的同学都非常值得去看看这个演讲主题的内容，包括但不限于

  1. 性能优化的核心指标
  2. 性能优化的数据采集
  3. 性能优化分析的工具（DynaTrace、Google Web Tracing Framework） Google Web Tracing Framework，看上去好强大
  4. 百度的PageCheck
  5. 百度的PageTimeline

详细请猛击这里下载PPT！

阿里巴巴-杜欢、吴天豪-残酷KPI下的极致优化——淘宝和天猫网首页优化实践

网页的性能优化单靠一个角色是很难完成得彻底的，
阿里是汇集了各个角色专门成立了一个小组做为全年KPI来搞。
易迅、网购你们什么时候上路呢？

对于页面综合加载速度的优化，如果你想知道淘宝的5s、天猫的3s是如何做到的，可以看看杜欢和吴天豪这两哥们“理论少，实操多”的总结和分享。

目前这个ppt还没放出来，先上几个摘录：

  1. 从视觉感受和数据同时分析问题，设定具体的优化目标。
  2. 准备稳定可靠的长效数据监控机制（系统）。
  3. 规划页面下载大小，尽量让首屏可视内容等于Onload内容。
  4. 根据业务优先级决定模块加载时机
  5. 重点优化默认不可见区域的内容的加载
  6. 移除所有用不到的资源
  7. 与数据敏感的业务方提前接触，从设计优化方案到优化上线全程邀请他们一起参与。准备好应急回滚方案！

腾讯-陈子舜-16毫秒的优化——Web前端性能优化的微观分析

PJ的这次演讲绝对是这届Velocity前端主题中的Top1了。以下的若干个问题，如果你有回答是NO，就下载翻看PPT去吧o(∩_∩)o！

  1. 你有网络层请求优化的经验，有脚本执行计算优化的经验，是否有渲染性能优化的经验？
  2. 你知道浏览器渲染性能好坏的标准么？
  3. 你是否知道浏览器干了啥米事情才能把你制作的网页呈现出来？
  4. 你会看chrome/safari DevTools的Timeline数据么？
  5. 你知道浏览器渲染丢帧的现象么？
  6. 什么情况下会引起Reflow(Redering)?
  7. 什么情况下会引起Repaint(Painting)?
  8. 知道为什么说setTimeout和setInterval是邪恶的东西不?
  9. 了解RAF(requestAnimationFrame)怎么用么？
  10. 知道classList属性不？
  11. 知道GPU在浏览器中是如何工作的么？
  12. 知道如何为元素启用GPU加速，即在GPU中创建Layout缓存么？
  13. 如何合理利用GPU?

案例地址：github.com/puterjam/speed_render

详细请猛击这里下载PPT！

]]> 2013中国Velocity-Web性能与运维大会-Day1 2013-08-22T14:02:12-07:00 oxox.io /notes/oreilly-velocity-cn2013-day1 一路颠簸，下午总算平安回到了深圳，结束了为期两天的北京Velocity大会之旅。 深圳最近的天气也不知道怎么了，印象中已半月不见阳光，19号出发去北京时是大风暴雨，今儿回来时是全城雾霾，雾里之间还略泛紫光，这算啥米征兆嘛？！

这届的Velocity，亲见亲闻再加上随行同事在微信群里的各种说法和吐槽，整体上来说3个字——嘛嘛地。广告多，老外们集体水，差点儿以为走错会场。前端方向的主题演讲，幸好还有几个救场撑面的（已在下面日程表格中标红），推荐前端的同学参阅下他们的PPT，特别是最后一天PJ的《16毫秒的优化——Web前端性能优化的微观分析》，估计好多同学听完都膜拜到跪了o(∩_∩)o。

Day1日程及对应演讲稿地址

导读：
1. 日期标绿 - 表示本人选择参与过
2. 中划线斜体 - 表示坑爹
3. 标红 - 表示推荐
08:00 来宾登记（酒店二层）
09:30
主题发言 简单、通用的性能技巧
Theo Schlossnagle (OmniTI)
10:00
主题发言 印象笔记在中国
肖贺 (印象笔记)
10:30
主题发言 网站性能，贏在用户体验
琚伟 (Compuware)
10:45 上午茶歇
11:05
主题发言 HTML5 的速度与激情
王咏刚 (Google)
11:20
Chrome资源调度
陈智昌 (Google)
12:00 自助午餐（宜客乐咖啡厅）
会厅A 会厅B 会厅C
13:30
Java Web应用诊断利器——Serviceability Agent
梅路峣 (阿里巴巴)
13:30
Taobao移动网页性能优化之路
曹仁 (阿里巴巴)
13:30
淘宝数据采集分析工具——Tsar
李克 (阿里巴巴)
14:30
大型JavaScript应用开发与维护
Charlie Fiskeaux II (OmniTI)
14:30
Android高性能实践
冯斌 (正点科技)
14:30
应用交付链的测量和优化
刘晓晋 (Compuware)
15:30 下午茶歇
15:50
Web APP的性能优化——Qzone touch海量服务性能优化实战
石玉磊 (腾讯)
15:50
JavaScript引擎的性能优化
任寰 (奇虎360)
15:50
58统一监管平台系统分析与设计
姜中明 (58同城)
16:50
结构化、用户驱动的Web性能优化
Buddy Brewer (SOASTA)
16:50
挑战与机遇共存——超大规模网络应用的运维
刘元 (雅虎北京研发中心)
16:50
携程客户端网站性能及用户行为数据采集
储诚栋 (携程旅行网)
17:50
贴吧性能优化实战
雷志兴 (百度)

Day1 推荐的3个演讲

Google-王永刚- HTML5的速度与激情

从HTML5诞生时开始，Google一如既往地站在Web前端技术的最前沿，不但在几乎所有产品线中实践和探索相关技术，还在Google主页涂鸦中创新性地使用HTML5技术构建不同凡响的交互式Doodle体验。作为交互式Doodle研发团队的一员，演讲者将以几个最受用户喜爱的交互式Doodle的研发细节为例，展示性能优化、交互式动画、游戏逻辑、图像渲染、多媒体等技术在创造最佳前端用户体验时的巨大潜力。

HTML5 Doodles = Performance + Experience
Google Doodle是98年开始的文化，从08年开始是个转折点，开始应用h5的技术
（思考：yixun的前端文化？）

1，背景图叠加（视差滚动）与H5的结合应用

Jules Verne Doodle

背景与介绍：http://www.google.com/doodles/jules-vernes-183rd-birthday

2，Canvas-based

Roswell Doodle

背景与介绍：http://www.google.com/doodles/roswells-66th-anniversary

实现方法：
The Animation - Sprited Images
Canvas-based Sprite Animation : doodle.CanvasSprite类库

腾讯-石玉磊-Web APP的性能优化——Qzone touch海量服务性能优化实战

@Yuni这次在Velocity的演讲内容够干，会场座不虚席，推荐在做webapp或对webapp开发感兴趣的同学看下，可以藉此了解：

  1. qzone webapp的页面管理方式
  2. 测速方式
  3. 各种优化方法（包括nodejs的应用）
  4. 异步渲染与nodejs直出的性能差别
  5. 拍照上传功能的实现、问题与解决办法
  6. hybrid app中js与宿主通讯的实现方案

详细请猛击这里下载PPT！

百度-雷志兴-贴吧性能优化实战

提起@berg，我依稀记得在百度知道的时候他在隔壁组做百度的js库tangram，没想到转去弄贴吧了。相对于别的互联网公司来说，百度的前端文化在我脑海里的整体印象一直都是“底子厚、流程化、规范化、系统化”，tangram、火麒麟、fis。。。有不少的例子可以举，但唯有亲自在百度工作过你才能真切体会到其中的差异。

因为流程化、规范化、系统化，百度在最大程度上提升了前端工程师的效率，不过也正因为这“三化”，他们的开发模式较难被别的公司沿袭或吸收。流程化和系统化往往依赖于开发环境，而不同公司开发环境多少不同甚至迥异。fis想在业界产生影响估计有点悬。

言归正传，@berg在这次的演讲主题中，对于性能优化，

有方法论，

1. “监控=〉分析=〉优化=〉监控”，性能优化需要全过程性的、系统性的进行
2. 分析结果的直观表达：分数>图表，性能分数的计算公式
3. 关键性能指标：白屏、首屏时间

也有具体的实践方式，

1. 数据分析工具: DynaTrace、Chrome Devtools
2. 异步、并行加载 - 提升首屏时间
3. 重要功能提前 - 提升可操作失焦
4. 无线设备的优化
...

详细请猛击这里下载PPT！

]]> 用git和jekyll来发表文章,并同步到github 2013-08-15T00:00:00-07:00 oxox.io /notes/post-via-github-and-jekyll 可以使用下面的命令来创建文章

创建一篇日志

发布日志前,先在配置文件_config.yml中设置URL格式

本站的格式为:
permalink: /:categories/:title/
其他格式参考: https://github.com/mojombo/jekyll/wiki/Permalinks

然后运行命令：

$rake post title="about this blog" 
##这个名字将会在url中呈现，所以尽量短些好
##Creating new post: ./_posts/2012-12-05-about-this-blog.md

到_post目录下找到刚才建立的文件，然后编辑文件。设置title,description,category,tags等，再就是用markdown来写文章了。

创建一个页面

$rake page name="about.md"
##Creating new page: ./about.md

创建一个嵌套的页面

$rake page name="pages/about.md"
##Creating new page: ./pages/about.md

创建一个路径页面

$rake page name="pages/about"
##Creating new page: ./pages/about/index.html

Jekyll也提供了许多预设的页面例子,以供参考.你可以学习和按自己的需要自定义它. 注意：如果用notpad++来编辑时，要设置文件的格式为 “以UTF-8无BOM格式编码” 否则提交会出现乱码情况

编辑完成后要先在本地预览一下，再提交到github。一般使用jekyll内置的服务器，运行一下代码：

$jekyll serve --watch

然后浏览器打开http://localhost:4000，看下页面没有问题后可以提交：

$git add .
$git commit -m "post a article about how to post a article"
$git push origin master

如果在目录下删除了某个文件，得用git删除才能够在github上看到删除的结果，否则只是本地删除了，github上没有删除。删除文件后要提交，代码如下：

$git rm -rf XXX.md
$git commit -m "comment"
$git push origin master

过程中出现的问题

1.GBK编码错误

运行 jekyll serve –-watch 在本地测试时出现错误:

Liquid error: invalid byte sequence in GBK

这个问题是在 Windows 下出现的，英文博文没问题，中文博文就会报错，原因是你所使用的控制台并不能工作 UTF-8。

临时办法：

在执行 jekyll 命令前，将当前控制台的代码格式转为 UTF-8:

$export LC_ALL=en_US.UTF-8
$export LANG=en_US.UTF-8
$jekyll serve --watch

永久办法：

添加两对用户自定义的环境变量，LC_ALL=en_US.UTF-8 和 LANG=en_US.UTF-8。
然后在git安装目录Git\etc\profile文件里加入以下内容

$export LC_ALL=en_US.UTF-8
$export LANG=en_US.UTF-8

2.运行jekyll serve --watch时出现的编码问题

"Ruby193/lib/ruby/gems/1.9.1/gems/jekyll-0.11.2/lib/jekyll/convertible.rb:29:in ‘read_yaml’: 
invalid byte sequence in GBK (ArgumentError)"

解决办法：

找到ruby目录下gems/jekyll-0.11.0/lib/jekyll/convertible.rb29行修改为下面的内容：
self.content = File.read(File.join(base, name), :encoding => "utf-8")
]]> CSS3复选框样式 2013-08-13T07:33:12-07:00 oxox.io /notes/css-checkbox-styles 直接看效果，代码辛苦右键查看

兼容性：支持css3的浏览器如IE10+、Safari、Chrome、FF、Opera
]]>