博客园_web前端征途

function声明函数在浏览器中这么一个问题

2012-02-02T09:13:00Z

先看这么一段代码

(function(){

alert( myname() );

function myname(){

return "nick"

}

})();

上面代码在各个浏览器里的运行结果是一致的，这是因为在javascript里面，用function 声明的函数

是会在函数执行环境初期便构造完函数体，也可以说是一种预解析吧，于是，即便myname的声明代码

在myname的执行后面，也是可以正确的执行的。

但是我们这样修改下

(function(){

alert( myname() );

if (true) {

function myname(){

return "nick"

}

})();

然后会发现浏览器的解析出现了差异。

最新版本的firefox和ie8 会抛出错误异常 ReferenError: myname is not defined

是的，其他浏览器均正常。

也就是说，上面的匿名函数的执行环境初始化的时候，其内部活动对象Active Object里面，没有myname这个属性

也就是说，这可能是firefox等做的一些引擎上的优化，加快引擎的效率，块级作用域屏蔽了匿名函数作用域链对该块作用域的初始化。

最后，也想在这里疾呼，虽然js很灵活，有他自己的脾性，但是在真正的项目应用里面，还是要有良好的书写规范，最好是按照c的经典

先声明后实现的规范来编程。

本文链接

new FunctionName() 运行机制浅析

2012-01-30T10:10:00Z

测试代码：

function Dog(name) {
    this.name = name;
    Dog.prototype = {
        shout: function() { alert("I am " + this.name); }
    };
}
var dog1 = new Dog("Dog 1");
dog1.shout();

上面的代码看起来很“优美”，可一运行，却报错：“Object doesn’t support this property or method”.

对于代码：

Fn() {};
var fn = new Fn();

new Fn() 的实际构造过程可以等价为以下伪代码：

var o = {__proto__: Fn.prototype};
Fn.apply(o);
return o;

理解了 new 的构造过程，我们可以分析上面的实例了。

首先，JS引擎在遇到函数声明 function Dog(…) 时，会给函数对象添加 prototype 属性，伪代码如下：

Dog.prototype = {constructor: Dog};

当运行到 var dog1 = new Dog(”Dog 1″) 时，内部操作：

var o = {__proto__: Dog.prototype};
Dog.apply(o);
return o;

也许你已经知道问题所在了。为了更清楚，添加点注释：

// Dog.prototype = {constructor: Dog};
var o = {__proto__: Dog.prototype};
// 此时，o = {__proto__: {constructor: Dog}}
Dog.apply(o);
// 此时，Dog.prototype = {shout: function(){...}}
return o;

显然，运行 dog1.shout() 时，dog1 的确没有 shout 方法。

本文链接

2012我们需要什么样的前的工程师

2012-01-21T08:52:00Z

2011还两天就要过去了，2012都来了，如果地球依然还适合人类居住，我想，我依然还会编我的代码，依然做我的前端工程师，那么，2012，我们需要什么样的前端工程师！

一直在想这么一个问题，一个前端工程师，要如果才能不断的提高自己的职业竞争力？

在每一年过去，不是简单的增加了一年的工作经验。

记得有这么一个段子，一个工作10年的前端工程师去面试，老板给他5k的工资，他问老板说“我有10年的工作经验为什么给这两年的工作经验级别的待遇”，老板说，“你那

两年的工作经验你一直用了10年哇”。最怕的就是，在自己的世界里游刃有余，可是在现实的社会里惊心动魄，前端的世界，变化太快，不学习很快就会被淘汰，这个很悲催，

c工程师的环境十年不变，多么羡慕，那么，如何在这个日新月异快速发展的领域能跟上脚步！！！！！

2011，项目一直很紧张，极度缺人，奉命寻觅战友，未果，都2012了，还没找到个合适的人，前端招聘难，，，

面试过不少人，有毕业生，有高手，有平平的同学，却始终没找到合适的。招一个合适的人难，前端工程师在整个项目角色里，在一个枢纽位置，要和几乎的项目每个角色打

交道，要整合几乎所有的项目资源，美术，策划需求，server逻辑，测试...... 额，其实，和计算机打交道是容易的，难的是和人打交道，那么注定，前端工程师是个不是那么轻易的

岗位。

有几个技术蛮好的工程师来面试，技术上确实不错，却被后面的经理或者hr给拍了，给我流程里的回复是不善沟通或者不愿意过多沟通，骨子里透露着一股自己js很不错的牛逼和孤傲

前端业内确实有这么个现象，js的门槛比较低，会js 的同学很多，但是了解深入者甚少，于是，会有少数了解深入者开始傲慢甚至“不愿意和不懂的人沟通”。

工程师文化！到底应该是产品驱动还是技术驱动？

我还是觉的，其实，不仅仅是技术，对工作的态度也是一种能力。

现在的整个行业，已经不在是当年一个大佬一个大侠抗霸子打天下的时候了，一个产品要赢得市场，不能在简单的有个产品就行，细致的用户体验符合产品灵魂的ui和强有力的server

支持却一不可，一个默契敏捷的高效团队缺一不可，一个善于沟通整合的前端工程师，会对整个团队对项目进度有这不错的粘合作用。

nodejs，经过了这段时间短暂而快速的发展，已经很强大，社区开发人员也在不断的增长，很多年前的asp年代，一个web开发人员需要掌握html , asp,sql,js（vbs）等一些的技术

后面，web快速发展，出现前后端分离，前端工程师出现，前端专注js,html,css, 分久必合合久必分，nodejs的出现，又有了web开发人员需要重新掌握前后端技术的趋势，只是，这

的统一，是由前往后，大批的前端工程师整天的被各个类型的浏览器差异特性折腾的已经愤怒了，我们咆哮，我们用js这把剑，却始终只能犁脚下的一亩三分田，而且要对不同的浏览器

做不同的兼容，搞烦了，我们需要过多的土地和权利，nodejs的出现，让前端工程师心里窃喜，既然又杀回了后端，既然又有的权限，那么，就可以为所欲为了，突破了浏览器宿主的

权限范围，我们又了更加广阔的天地。。。。。。。。

好吧，2012，我需要善于沟通和学习了解各类前端以及相关技术的同学，我们可以不用太牛，但是我们要有积极的心态。

本文链接

iframe的子页面调用父页面的相关记录

2012-01-12T10:01:00Z

从一个element对象如何回溯到window的scope

非ie下有

element.view

ie下面没有view，只能曲线救国

用event.srcElement.document.frames

也就是说从event对象先引到一个element上面，而element身上有个document属性可以回溯到dom的document对象

最后通过document.frames 找到window。

这类似从北京回云南，可以选择直飞云南，也可以如果直飞走不通，可以选择北京--曼谷然后曼谷--云南。。。

当然，在非ie下面也可以有这么一条曲线救国的路线

event.target.ownerDocument.defaultView

呃，浏览器的差异还是比较大，这条路上

本文链接

如何减少浏览器的repaint和reflow? [转]

2012-01-06T09:27:00Z

文本内容主要包括以下几点：
1. 什么是repaint/reflow?
2. 什么情况下会触发浏览器的repaint/reflow?
3. 浏览器自身所作的优化
4. 如何优化你的脚本来减少repaint/reflow?

一、什么是repaint/reflow?
页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。

另外，关于浏览器渲染的更为详细的资料可以参考以下，涵盖了IE以及Firefox：

Understanding Internet Explorer Rendering Behaviour
Notes on HTML Reflow

二、什么情况下会触发浏览器的repaint/reflow?
除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
* DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
* 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
* 应用新的样式或者修改任何影响元素外观的属性
* Resize浏览器窗口、滚动页面
* 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

在继续下面的文章之前，先介绍一款强大的性能分析工具-dynaTrace，借助该功能能够清晰的得到页面中的资源消耗情况，从而对症下药。另外，更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。

DOM元素的增删改

先看代码

[隐藏代码]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
    <body>
        <divid="test1"onclick="addNode()">这里是第1个节点</div>
        <divid="test2"onclick="modNode()">这里是第2个节点</div>
        <divid="test3"onclick="delNode()">这里是第3个节点</div>
    </body>
    <scripttype="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function addNode(){
            var n = document.createElement('div');
            n.innerHTML ='New Node';
            $('test1').appendChild(n);
        }
        function modNode(){
            $('test2').innerHTML ='hello';
        }
        function delNode(){
            $('test3').parentNode.removeChild($('test3'));
        }
    </script>
</html>

在依次点击完每一个按钮后，我们来看看dynaTrace的情况，首先是一目了然的点击事件分布

放大之后来看一下每个事件的repaint/reflow情况：

增加节点：

修改节点：

删除节点：

图中的绿色部分表示的是reflow和repaint过程，其中比较短的绿条标示的reflow过程，后面长条部分表示的是repaint过程。从图中可以看出，对DOM节点的增删改都会造成reflow和repaint，由于改动小所以reflow消耗的时间很短，但是由于repaint是全局的，因此消耗的时间都比较长。

修改DOM元素前景色

[隐藏代码]

var n = $('colorNode');
n.style.color ='red';

从上图中可以看到修改字体颜色后，浏览器只有repaint而没有reflow。接下来试试修改背景色：

[隐藏代码]

var n = $('colorNode');
n.style.backgroundColor ='red';

由图中可以看出，修改背景色也会造成reflow和repaint。另外，经过测试发现，只要是修改元素的cssText属性，不论它的值是什么，都会导致浏览器reflow和repaint，因此在某些时候选择特定的样式属性赋值会有更好的效果。

Resize浏览器窗口以及拖动滚动条

测试中的操作如下：缩小浏览器窗口->放大浏览器窗口->拖动页面滚动条至页面底部。从图中可以看到Resize浏览器窗口以及拖动滚动条都会造成浏览器的repaint，而且CPU的消耗也比较大，尤其是拖动滚动条的时候。

读取Layout属性
根据各种参考资料中的描述，在用Javascript读取DOM节点的Layout属性（offsetLeft、offsetTop、 offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left /Width/Height、getComputedStyle()、currentStyle(in IE)) 的时候也会触发repaint，不过在以下的测试例子中并没有发现这一点。

[隐藏代码]

var n = $('colorNode');
var temp = document.documentElement.currentStyle;
temp = n.offsetTop;
temp = n.offsetLeft;
temp = n.offsetWidth;
temp = n.offsetHeight;
temp = n.scrollTop;
temp = n.scrollHeight;
alert(temp);

三、浏览器优化
浏览器对于每一个渲染动作并不是立即执行，而是维护了一个渲染任务队列，浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外，脚本中的某些操作会导致浏览器立即执行渲染任务，例如读取元素的Layout属性。

[隐藏代码]

var bodystyle = document.body.style;
var computed;
if(document.body.currentStyle){
  computed = document.body.currentStyle;
}else{
  computed = document.defaultView.getComputedStyle(document.body,'');
}

//每次都读取

bodystyle.color ='red';
bodystyle.padding ='1px';
tmp = computed.backgroundColor;
bodystyle.color ='white';
bodystyle.padding ='2px';
tmp = computed.backgroundImage;
bodystyle.color ='green';
bodystyle.padding ='3px';
tmp = computed.backgroundAttachment;

//最后再读取

bodystyle.color ='yellow';
bodystyle.padding ='4px';
bodystyle.color ='pink';
bodystyle.padding ='5px';
bodystyle.color ='blue';
bodystyle.padding ='6px';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;

每次读取的渲染图：

最后读取的渲染图：

四、如何优化你的脚本来减少reflow/repaint?
1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：
(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

[隐藏代码]

function appendEveryTime(){
    for(var i =5000; i--;){
        var n = document.createElement('div');
        n.innerHTML ='node '+ i;
        document.body.appendChild(n);/*每次创建的新节点都append到文档*/
    }
}

function appendLast(){
     var frag = document.createDocumentFragment();
     for(var i =5000; i--;){
         var n = document.createElement('div');
         n.innerHTML ='node '+ i;
         frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/
     }
     document.body.appendChild(frag);
}

用dynaTrace观察的结果如下，appendLast的性能无论是在Javascript的执行时间以及浏览器渲染时间方面都优于appendEveryTime。
appendEveryTime:

appendLast:

2. 集中修改样式
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值

如下的代码中，每一次赋值都会造成浏览器重新渲染，可以采用cssText或者className的方式

[隐藏代码]

el.style.color ='red;
el.style.height = '100px';
el.style.fontSize = '12px';
el.style.backgroundColor = 'white';

3. 缓存Layout属性值

对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。

[隐藏代码]

var width = el.offsetWidth;
var scrollLeft = el.scrollLeft;

4. 设置元素的position为absolute或fixed

在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。

[隐藏代码]

<bodystyle="position:relative">
        <divid="test"style="background-color:red;width:100px;position:relative;">Animation Here</div>
</body>
<scripttype="text/javascript">
        function $(id){
                return document.getElementById(id);
        }
        window.onload =function(){
                var t = $('test');

                ~function(){
                        t.style.left = t.offsetLeft +5+'px';
                        t.style.height = t.offsetHeight +5+'px';
                        setTimeout(arguments.callee,500);
                }();
        }
</script>

通过修改#test元素的postion为relative和postion分别得到如下两个测试结果

position: relative

position: absolute

在postion:relative的测试当中，浏览器在重新渲染时做的工作比position:absolute多了不少。

本文链接

nodejs 遍历文件夹获取文件夹下所有文件列表

2012-01-04T11:22:00Z

一直关注node.js的发展，但是没有动手写过东西，前面同事帮忙用python写了个工具，

获取一个文件夹下面的所有文件名的列表，python真的是强大，俺决定用node来写一个。

使用方法，把下面代码保存为一个js文件比如xxoo.js ，然后打开命令行工具，进入xxoo.js

所在目录，输入：

node xxoo.js '这里为你要统计的目标文件夹的目录'

然后你会在 xxoo.js所在目录，发现一个res.lst的文件名，这个文件名由你自己决定，见

代码第三行，这个文件里面就包含了你要统计目录的所有子文件列表。

 1 var fs = require('fs');
 2 var root_path=process.argv[2];
 3 var w_file='res.lst';
 4 function getAllFiles(root){
 5   var res = [] , files = fs.readdirSync(root);
 6   files.forEach(function(file){
 7     var pathname = root+'/'+file
 8     , stat = fs.lstatSync(pathname);
 9 
10     if (!stat.isDirectory()){
11        res.push(pathname.replace(root_path,'.'));
12     } else {
13        res = res.concat(getAllFiles(pathname));
14     }
15   });
16   return res
17 }
18 var w_content=getAllFiles(root_path).join('\n');
19 fs.readFile(root_path+w_file,function(err , data){
20    if(err && err.errno==33){
21      fs.open(w_file,"w",0666,function(e,fd){
22        if(e) throw e;
23        fs.write(fd,w_content,0,'utf8',function(e){
24         if(e) throw e;
25         fs.closeSync(fd);
26        })
27      });
28    } else{
29      fs.writeFile(root_path+w_file,w_content,function(e){
30         if(e) throw e
31      })
32    }
33 })

本文链接

js object 视图猜想

2011-12-06T10:20:00Z

某天突然想知道 Object 和 Function的关系，在网上找到了这张图，看完后思路清晰了很多，在那图的基础上，我加上了Number,Boolean,String等三个系统提供的类型构造器和Object Function的关系图如上。

他们中只有 Function的prototype和__proto__是相同的。

其他的构造器不无都是 Function 构造出来的对象，也叫是Function的实例是因为Object,Number,Boolean,String 甚至自定义的Foo 的__proto__无不都指向

Function.prototype 也就是function Empty .

而Function同时也是自己的构造函数 Function.constructor === Function

所以，js的对象系统里，可以说所有的构造函数都是由Function构造而来

函数里最特别的一个就是 Function.prototype 也就是 Empty

Function.prototype.hasOwnProperty("prototype") //false

typeof Function.prototype;//function

也就是说这是唯一一个没有Prototype的函数

它是所有构造函数作为对象存在的原型 Object.__proto__ , Function.__proto__,Number.__proto__ 设置是所有自定义构造函数比如Foo的原型 Foo.__proto__

而Empty 虽然没有 prototype但是作为一个对象依然还是有__proto__,也就是 Object.prototype了。于是这就吻合了那句定义。。 Object.prototype是js里所有对象原型链的顶端。。。。。（undefined除外)

最后有个特例，就是那么undefined应该放在哪里呢，在这个js object 的关系视图里

JavaScript Object layout

本文链接

JS事件模型小结

2009-10-09T10:27:00Z

翻出了JS权威指南(V4)又复习了一下JS事件模型，简单作一小结。 JS权威指南中将JS事件模型分为四种 1、原始事件模型:属性事件处理模式 2、标准事件模型:DOM2对其作了标准化 3、IE事件模型(IE5.5\IE6) 4、 Netscape事件模型原始事件模型也就是基本事件处理，其实我们大多数人使用的JS事件处理模式都是这种代码方式。其事件类型:分为"输入事件(如onclicki)"和...

个人小型ui组件（未完整版,用ie看这贴肯定看不到的）

2009-09-21T04:43:00Z

jquery.myui　插件 jquery.myui ui插件库介绍: 这是之前想写的基于jquery的一系列个人网站里面可以用到的一些ui组件的jquery插件，由于那时候刚看jquery，所以以，代码肯定还是很臃肿那是不用说的了，因为最近比较忙，所以也就没继续写，不过过断时间有点时间了还是会继续写完，过段时间自己准备和同学做个小站放点自己喜欢的东西。这些 ui组件也决定都自己写了（貌似确实有...

javascript简洁高性能的tab

2009-09-10T02:38:00Z

web2.0的世界里，保持页面的整洁干净保持脚本样式的分离，编写无侵入式脚本渐为无数前端开发者追逐的前端设计的艺术，选项卡，目前市面上各样的实现方式有很多很多种，大部分的会有<a href="javascript:void(0);" onclick="showproject(1);" >1</a><a href="javascript:void(0);" oncli...

博客园_web前端征途

function声明函数在浏览器中这么一个问题

new FunctionName() 运行机制浅析

2012我们需要什么样的前的工程师

iframe的 子页面调用父页面的相关记录

如何减少浏览器的repaint和reflow? [转]

nodejs 遍历文件夹 获取 文件夹下所有文件列表

js object 视图猜想

JS事件模型小结

个人小型ui组件（未完整版,用ie看这贴肯定看不到的）

javascript简洁高性能的tab

iframe的子页面调用父页面的相关记录

nodejs 遍历文件夹获取文件夹下所有文件列表