随笔分类 - JavaScript
摘要：发现程序猿写博客前都喜欢吐槽一下，也难怪，平时交流少了，内心积累了不少的骚气，是应该适当发泄一下。哥要发泄了：目前在广州蜂众网效力，这是一家刚创立不久的公司，哥喜欢接触一些新公司，活力充足，发展机会也大。当然有机会去一些知名的大公司（腾讯，百度等），也是非常向往的，这样的镀金公司进去走一趟也学到不少东西。公司目前做前端的就只有两个鸟人，而我就是其中一个，所以任务也挺多的。这也倒是其次，最主要的是在别人留下的烂摊子搅合，真有点心力交瘁。欣慰的是，在这大半年确实进步了不少，代码质量提高不少。===============================================吐槽完毕分割线
阅读全文
摘要：前些天有网友发来一些前端面试的题目，虽然说不是很难，但却是我们开发过程中经常碰到的问题，而且有些公司也喜欢面试这类的题目来考察面试者的能力，所以我觉得有必要收集一下有关这些的题目。题目一：找出字符串中出现次数最多的那一个字符？要解答这道题其实很简单，但怎么答得好才是关键，你写出的方法性能好才能得高分 1 // 方法一(推荐) 2 // 用到了正则，然后剔除了已计算过的字符，减少了循环的次数，所以性能是比较好的 3 function getMostChar1(str){ 4 var mostChar = [], 5 maxLen = 0, 6 oldStr...
阅读全文
摘要：最近在做一个项目，要用到之前比较流行的瀑布流布局，网上搜了一下，发现没有比较合适的插件可用(项目紧急，喜欢用现成的)，不得不自己写一个，也可能是因为需要结合后台来实现的，所以很难写出一个通用的插件给大家用(json格式，html结构都不一样)。偶尔在网上看到的有关瀑布流的文章(更新于2013-06-05)瀑布流布局浅析瀑布流布局（基于多栏列表流体布局实现）各大瀑布流简析与建议插件——jQuery.Waterfall思路： 其实只要了解了整个流程，要实现这个插件也不难，大家都玩过俄罗斯方块吧，原理差不多，找到合适的地方叠上去就好了，在这里，每个块的宽度是必需给定的，然后计算出列数，再维护一个数.
阅读全文
摘要：IE6下position:fixed的Bug应该是个老问题。不过，今天在搞瀑布流插件写返回顶部按钮时(老是闪动)却花了我不少时间，之前也写过一篇文章解决过，但是是用到css表达式解决，而现在的需求是要在js中动态定位，所以之前的办法不是很合适。今天再来总结一下：方法一：纯css*html{height:100%;overflow:hidden;}*html body{height:100%;overflow:auto;}原理：你拖动的滚动条并不是拖动的整个页面，而仅是body的滚动条优点：视觉效果完美，代码量少，不耗性能缺点：不会触发onscroll事件(因为html没有滚动)，可能会影响一些
阅读全文
摘要：用户在使用键盘时会触发键盘事件。目前，对键盘事件的支持主要遵循的是DOM0级。 在英文输入法下，所有浏览器都遵循以下三个事件：keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。keypress: 当用户按下字符键时触发，而且按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件，Safari3.1之前的版本按下非字符键时也触发。keyup: 当用户释放键时触发。 在中文输入法下，浏览器之间则表现得不一致，主要情况如下：IE,Chrome,Safari：触发keydown和keyup， 不触发keypress。Firefox：首次按下按键时触发keydo...
阅读全文
摘要：关于浏览器中DOM操作的性能优化，在上一篇博文《浏览器中DOM操作的性能优化(一)》中已经阐述了访问和修改DOM元素对性能的影响及优化方案。这次我们就来说一下关于页面的重绘和重排版问题。 当浏览器下载完所有的HTML标签和其组件(Javascript，css，图片等)后，浏览器就会解析文件并创建两个内部数据结构： 1、DOM Tree ：表示页面的结构 2、Render Tree ：表示DOM树如何显示 在渲染树仲，每个DOM节点(隐藏的节点除外)都有至少一个相对应的节点。渲染树的节点被称为“盒”，符合CSS定义的盒子模型——一个具有填充(padding)、边框(border)、边...
阅读全文
摘要：频繁地对于DOM进行操作的很是损耗性能，但在富网页应用中我们编写脚本无可避免地要跟DOM打交道，到底怎么才能优化这个性能瓶颈呢，大致从以下三种情况去考虑：访问和修改DOM元素修改DOM样式，会造成页面的重绘和重新排版通过DOM事件处理程序来响应用户 访问和修改DOM元素 在浏览器中，DOM的实现和Javascript的实现通常是保持相互独立的。下面了解一下主流浏览器的渲染引擎和JS引擎： 浏览器 渲染引擎(内核) JS引擎 IE mshtml.dll(Trident) JScriptChrome WebCore(WebKit) V8FireFox Gecko ...
阅读全文
摘要：在javascript中，数据的存储位置对代码的整体性能有着重要的影响。有四种数据访问类型：直接量，局部变量，数组项，对象成员。直接量和局部变量访问的都非常快，数组项和对象成员的访问速度就有待优化了。 局部变量也就可以理解为在函数内部定义的变量，很明显访问局部变量要比域外的变量要快，因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章)。变量在作用域链的位置越深，访问所需要的时间就越长，全局变量总是最慢的，因为它们位于作用域链的最后一个变量对象。 每种数据类型的访问都需要付出点性能代价，对于直接量和局部变量基本都能消费得起，而访问数组项和对象成员则要代价高点。下图显...
阅读全文
摘要：脚本的阻塞特性：把脚本放在底部<script>标签因脚本的加载，解析，运行而暂时整个页面的下载和解析过程。如果把它放在<head>标签里面。通常表现为：页面打开时，首先显示为一副空白的页面。因为脚本阻塞其他页面资源的下载，所以推荐的方法就是：将所有的<script>标签放在尽可能接近<body>标签底部的位置即</body>之前。尽量减少对整个页面下载的影响。减少脚本的数量当页面解析每碰到一个<script>时，紧接着都会有一段时间用于js代码的运行，最小化这些延迟时间可以改善页面的性能。另外，对于外部js文件，会发出ht
阅读全文
摘要：词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。下面通过几个小小的案例，开始深入的了解对理解词法作用域和闭包必不可少的，JS执行时底层的一些概念和理论知识。经典案列重现1、经典案例一1 /*全局（window）域下的一段代码*/2 function a(i) {3 var i;4 alert(i);5 };6 a(10);疑问：上面的代码会输出什么呢？答案：没错，就是弹出10。具体执行过...
阅读全文
摘要：函数在javascript中扮演着一个重要的角色，作用域可以确定哪些变量可以被函数访问，确定this的值，而且也关系到代码的性能，所以理解函数的创建和执行过程及作用域至关重要。首先得了解几个名词(其实有些名词本人也不是很明白)：1.作用域(scope):在javascript没有块级作用域，是由函数来划分的。变量和函数的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域(with和eval除外)。当定义了一个函数，当前的作用域链就保存起来，并且成为函数的内部状态的一部份。在最顶级作用域链仅由全局对象组成，而不和词法作用域相关
阅读全文
摘要：第一种：非正则表达式循环检索--在长的头尾空格字符串中使用效率较低 1 if(!String.prototype.trim){ 2 String.prototype.trim = function(){ 3 var start = 0, 4 end = this.length - 1, 5 //包括ECMAScript5中定义的所有空白字符 6 ws = "\n\r\t\f\x0b\xa0\u1680\u180e 7 \u2000\u2001\u2002\u2003\u2004\...
阅读全文
摘要：//构造参数 new Date(milliseconds)// new Date(year,month,day,hours,minutes,seconds,ms)// PS: month参数范围0-11//重点：Date对象转换成指定格式的字符串，字符串转换成日期//eg: new Date(datestring)// new Date("yyyy-MM-dd hh:mm:ss")// new Date("yyyy/MM/dd hh:mm:ss") 也可以是MM/dd/yyyy// new Date("yyyy MM dd hh:mm:ss&q
阅读全文
摘要：题目如下：1 f = function() { return true; };2 g = function() { return false; }; 3 (function() {4 if (g() && [] == ![]) { 5 f = function f() { return false; }; 6 function g() { return true; }7 } 8 })();9 alert(f()); // true or false ?看IE6、IE7、IE8与其它非IE下的不同?1 var f = function ...
阅读全文
