摘要: 昨天晚上写了一篇关于浏览器的渲染过程的随笔,但只是通过一小段代码解释了一下,并没有通过浏览器测试,说服力不够,而且还有很多不完善的地方,今天在浏览器中测试了一下,并把测试的结果分享给大家,测试过程可能有点乱,希望大家理解。测试浏览器:Chrome v24.0.1312.52 m,Firefox v18.0,Opera v12.12。在WebKit内核中,网页在显示的时候会有一个解析器(Parser)去解析html文档,然后去生成渲染树(Render Tree),最终渲染出页面。这是在一个线程中进行的,所以两者不会同时进行。我分为了以下两种情况,并分别在不同的浏览器中进行测试。样式文件在head阅读全文
posted @ 2013-01-11 20:55 yuezk 阅读(3179) 评论(4) 编辑
摘要: 最近在学习前端的性能优化,有必要了解一下页面的渲染流程,以便对症下药,找出性能的瓶颈所在。以下是我看到的一些东西,分享给大家。参考:Understanding the renderer页面的渲染有以下特点:单线程事件轮询定义明确、连续、操作有序(HTML5)分词和构建DOM树请求资源并预加载构建渲染树并绘制页面具体来说:当我们从网络上得到HTML的相应字节时,DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时,DOM树的构建会被阻塞:HTML的响应流被阻塞在了网络中有未加载完的脚本遇到了script节点,但是此时还有未加载完的样式文件渲染树构建自DOM树,并且会被样式文件阻塞。阅读全文
posted @ 2013-01-11 01:15 yuezk 阅读(18743) 评论(17) 编辑
摘要: 现在来说应该是昨天晚上了,接到了天猫前端的电话面试,面试者是游侠,主要是对我做一个技术评估,聊了大约有80多分钟。一开始,游侠表名身份之后,便开始按照简历上写的对我进行提问。问了一下以前做的感觉比较好的网站,问了问nodejs,NodeJS这一方面不是很了解,所以应答的也不是特别好。后来又提到领导地图,因为我一直在用ExtJS+ArcGIS的JSAPI来做地图相关的开发。问了我这些API的结构(说不太清楚)。页面方面,提到了页面的性能优化相关的一些东西(说实话,我对这些方面还是有些欠缺,平常做的大都是局域网里的项目,对性能问题关注的少了些,以后这方面要加强了)。还提到了gzip,http协议,阅读全文
posted @ 2012-11-15 01:07 yuezk 阅读(2841) 评论(14) 编辑
摘要: 这个问题是在著名的问答网站——stackoverflow上看到的。之前也看到过JavaScript的这个问题,但是没有深入了解,今天在StackOverflow上看到了答案,感觉不错,记下来分享给大家。问题的描述是这样的:1 console.log(10..toString());//102 3 console.log(10.toString());//SyntaxError: Unexpected token ILLEGAL为什么前者正常,而后者报错呢。原因就是,在JavaScript中,数字后面的"."操作符是的意义是不确定。因为它既可能是一个浮点数的标志,又可能是取一阅读全文
posted @ 2012-11-02 21:29 yuezk 阅读(1623) 评论(10) 编辑
摘要: 原文链接:Javascript OO Without ConstructorsJavaScript中的对象模型(object model)并不广为人知。我曾写过一篇关于他们的博客。之所以不被人所熟知,原因之一就是JavaScript是这些被人广泛使用的语言中唯一一个通过原型(prototype)来实现继承的。但是,我认为另一个原因就是这种对象模型非常复杂,难于解释。它为什么这么复杂并且又令人困惑呢?那是因为JavaScript试图去隐藏它传统的面向对象的特性——最终导致了它的双重人格(译者注:作者意思是JavaScript既有面向过程的特征,又有面向对象的特征)。我认为正是由于JavaScri阅读全文
posted @ 2012-11-01 08:53 yuezk 阅读(1418) 评论(4) 编辑
摘要: 译者注:这是一篇关于JavaScript的面向对象和继承的文章,写于1年前,作者循序渐进,对想学习JavaScript中面向对象的同学来说是很有帮助的,因此试着翻译一下,不妥之处,请指正。原文链接Objects and Inheritance in Javascript虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质,但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪。而不同的JS框架提供了各自的方法来编写类面向对象(class-like)的代码,这使得JS的面向对象更加的难以理解。这样带来的结果是:1、没有一个标准的方法阅读全文
posted @ 2012-10-31 00:15 yuezk 阅读(1685) 评论(1) 编辑
摘要: 对大多数JavaScript的初学者来说,this的取值一直困扰着大家,我曾经为了学习this也看了不少这方面的介绍。现在把我对this的理解写出来,分享给大家,如果我这篇随笔有幸帮到了大家,我会感到非常高兴。好了,废话少说,来点实在的。一句话,函数中的this始终指向调用该函数的对象。这就像一个公式,下面我们套用一下公式看看是不是这样。1 var name = 'hello world';2 function test(){3 alert(this.name);4 alert(this === window);5 }6 test();//等效于window.test(),输出阅读全文
posted @ 2012-10-27 16:14 yuezk 阅读(1451) 评论(8) 编辑
摘要: 注:翻译之中有什么不恰当的地方,欢迎大家指正,祝大家双节快乐!原文链接:http://www.jspatterns.com/shim-sniffing/如果不是有特殊需要而去扩展原生对象和原型(prototype)的做法是不好的1 //不要这样做2 Array.prototype.map = function() {3 // 一些代码4 };除非这样做是值得的,例如,向一些旧的浏览器中添加一些ECMAScript5中的方法。在这种情况下,我们一般这样做:1 if (!Array.prototype.map) {2 Array.prototype.map = function() {3 ...阅读全文
posted @ 2012-09-30 10:18 yuezk 阅读(351) 评论(0) 编辑
摘要: 用ExtJS开发将近一年了,也遇到了很多奇怪的问题,印象最深的要算是ExtJS在ie中显示的问题了。由于开发过程中大多用chrome来调试,很少在ie中调试(现在两者都要兼顾),导致最后在ie中页面不能正常加载,当时那个囧啊,看到ie报的错,我都想哭,连出错的堆栈信息都没有(这一点,ie做的真不好),无从下手啊。尝试过N多方法,最后发现导致出现这种问题的原因(90%以上的可能性)是js的数组中多了一个英文的逗号',',而这种在chrome和火狐中是没有问题的,如下面的代码所示: 1 var win = Ext.create('Ext.window.Window'阅读全文
posted @ 2012-09-25 11:24 yuezk 阅读(3065) 评论(11) 编辑
摘要: JavaScript中的数组是比较常用的类型,今天看到了一些平时不经常使用(也许是我还不太熟悉)的方式,特记录一下。某些场合下很好用。var arr = ['hello', 'world', 'foo', 'bar'];alert(arr[1]); //'world'alert(arr['1']);//'world'alert(1 in arr);//truealert('1' in arr);//truealert(arr['length'])//4阅读全文
posted @ 2012-09-23 21:03 yuezk 阅读(258) 评论(0) 编辑