摘要：
浏览器的时钟精度Nicholas C. Zakas发表于2011年12月14日上午7：00标签：JavaScript,性能,时钟时钟精度是指时钟更新的频率，大部分情况下，网络浏览器使用诸如setTimeout() 和setInterval()的函数调用系统默认时钟，这意味着浏览器部署代码时只能和系统时钟同步。Internet Explorer的日期对象（Date Object）也把系统时钟作为种子值，因此日期对象的差异也就只能用时钟精度来衡量。历史简介Windows机器默认时钟精度为10-15.6毫秒（大部分情况是15.6毫秒），亦即浏览器采用的系统时钟遵循该时钟精度。当然，以目前CPU处理器 阅读全文
随笔分类 - javascript基础
【javascript基础】之浅析XSS(Cross Site Script)漏洞原理【转】
2013-02-28 16:36 by sniper007, 430 阅读, 收藏, 编辑
摘要：
【IT168 专稿】最近一些人频频在博客里炫耀说黑了某某门户网站，发现了某某大站的漏洞，竟然还要收取发现漏洞的费用，仔细瞧了一瞧，全是一片噼里啪啦alert消息框的截图，只是简单的触发了XSS，心痒难耐，于是写了这篇拙文道出我对跨站脚本漏洞原理的一些理解。 如果你还不知道什么是XSS，我来帮助解释一下，XSS的全称是Cross Site Scripting，意思是跨站脚本.这第一个单词是Cross，为什么缩写成X呢？因为CSS是层叠样式表的缩写（Cascading Style Sheets）的缩写，同时Cross发音和X相似，为了避免混淆用X来代替,缩写成XSS。其实我觉得叫XSS挺合适的，因 阅读全文
【javascript基础】之BigPipe学习研究【转】
2013-02-25 17:36 by sniper007, 212 阅读, 收藏, 编辑
摘要：
1. 技术背景 FaceBook页面加载技术试想这样一个场景，一个经常访问的网站，每次打开它的页面都要要花费6 秒；同时另外一个网站提供了相似的服务，但响应时间只需3 秒，那么你会如何选择呢？数据表明，如果用户打开一个网站，等待3~4 秒还没有任何反应，他们会变得急躁，焦虑，抱怨，甚至关闭网页并且不再访问，这是非常糟糕的情况。所以，网页加载的速度十分重要,尤其对于拥有遍布全球的5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站，有着大量并发请求、海量数据等客观情况，速度就成了必须攻克的难题之一。2010 年初的时候，Facebook 的前端性能研究小组开始了他们的优化项目，经过 阅读全文
【javascript基础】渐进式jpeg(progressive jpeg)图片及其相关【转】
2013-01-08 11:34 by sniper007, 825 阅读, 收藏, 编辑
摘要：
一、基本JPEG(baseline jpeg)和渐进JPEG网络上那些色色的照片都是.jpg格式的（“色色”指的是色彩斑斓的意思）。不知诸位有没有注意到，这些jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)，例如下面的示意（图片来源：http://codinghorror.typepad.com）：一般线性加载（如不能显示点击这里查看）交错/渐进式（若无法显示点击这里查看）你网站的jpg图片是以何种方式呈现的呢？我猜你是“自上而下扫描式”的，擦擦~我在贴吧看海贼火影漫画时候，时不时会发现，其中部分图片就是 阅读全文
【javascript基础】各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试 【转】
2013-01-07 14:30 by sniper007, 440 阅读, 收藏, 编辑
摘要：
Iframe易于嵌套及管理页面，但经常遇到跨域、父子页面访问问题，对于子页面访问父页面可以兼容性地通过window.Top或 window.Parent或window.frameElement等操作，但对于标题中四个对象，一直没有完整测试过，故买个苦力，分享给大家。contentWindowcontentDocument document frames Firefox 11√ √×√Opera 11√√×√Chrome 15/360 极速 5.2√ ××√ Safari 5.1√√×√ Maxthon 3.3√√ ×√IE6√ 阅读全文
【javascript基础】IE6-IE9不支持table.innerHTML的解决方法分享【转】
2013-01-07 11:37 by sniper007, 453 阅读, 收藏, 编辑
摘要：
IE6-IE9不支持table.innerHTML的解决方法分享测试代码：<table id="test"></table><script>var oTable=document.getElementById("test");oTable.innerHTML="<tr><td>innerHTML</td></tr>";</script> 上述代码在IE6-9中无效，直接报错： IE9：Invalid target element for t 阅读全文
【javascript基础】js线程机制【转】
2013-01-04 14:58 by sniper007, 262 阅读, 收藏, 编辑
摘要：
前几日写了一篇文章，介绍了js阻塞页面加载的问题。当时是通过例子来验证的。今天，我介绍一下浏览器内核，从原理上介绍一下js阻塞页面加载的原因。浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。1. javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。2. GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要 阅读全文
【javascript基础】一份JS面试题
2012-12-26 17:53 by sniper007, 335 阅读, 收藏, 编辑
摘要：
★列出display的值 可用值 值的说明block 象块类型元素一样显示。none 缺省值。向行内元素类型一样显示。inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。table-header-group 显示在任何表格行和行组合之前，在头部标题之后。table-footer-group 显示在任何表格行和行组合之后，在底部标题前。★清除浮动与闭合浮动的不同点 (http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html)★如何为元素绑定事件（ 阅读全文
【javascript基础】【转】各浏览器对页面外部资源加载的策略
2012-12-26 17:12 by sniper007, 193 阅读, 收藏, 编辑
摘要：
这个总结来源于一次优化的请求，最初某个页面的加载十分缓慢，load事件迟迟无法触发，因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化，拿得load事件尽可能早地触发。于是我查看了页面的源码，并对外部资源进行了整理，基于下面2个理念画出了一个推测的瀑布图：浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久。javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久。然而，当我看到各浏览器中实际的瀑布图时，我知道自己又犯了一个简单的错误：太过相信所谓的权威和大众的声音，而没有更早地进行实践来检验理论的正确性……本篇文章就使用几种流行的浏览器，针对同一个页面 阅读全文
【javascript基础】【转】javascript模块化、模块加载器初探
2012-12-26 17:05 by sniper007, 157 阅读, 收藏, 编辑
摘要：
最常见网站的javascript架构可能是这样的：一个底层框架文件，如jQuery一个网站业务框架文件，包含整站公用业务模块类(如弹框、ajax封装等)多个业务文件，包含每个具体页面有关系的业务代码 为了减少一个HTTP请求，我们可能将底层框架文件和网站业务框架文件combo成一个文件，作为一个公用文件引入到每个需要使用javascript的页面中，再在具体的页面中引入和当前页相关业务js文件。为了减少页面加载脚本阻塞现象，我们还可以将脚本文件放在html的body底部进行加载。 这看似是一个很好的javascript架构方案。每个页面最多引用两个js文件，打开首页后，后续页面都可以使... 阅读全文
【javascript基础】【转】判断 iframe 是否加载完成的完美方法
2012-12-26 16:29 by sniper007, 224 阅读, 收藏, 编辑
摘要：
很老的东西，记下来下，万一以后要用到一般来说，我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似：var iframe = document.createElement("iframe");iframe.src = "http://www.planabc.net"; if (!/*@cc_on!@*/0) { //if not IE iframe.onload = function(){ alert("Local iframe is now loaded."); };} else 阅读全文
【javascript基础】【转】全面介绍javascript异常处理(try…catch…finally window.onerror)
2012-12-26 14:37 by sniper007, 222 阅读, 收藏, 编辑
摘要：
try catch finally 语句说明try catch finally是javascript语言提供的异常处理机制。语法结构如下 1 try { 2 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 3 4 } 5 catch (e) { 6 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 7 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 8 } 9 finally {10 11 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。12 }t... 阅读全文
【javascript基础】【转】window.onbeforeunload
2012-12-26 13:58 by sniper007, 401 阅读, 收藏, 编辑
摘要：
beforeunload 指在页面卸载前提供的最后一次JS执行的机会。如下1 window.onbeforeunload = function() {2 return '您正在编辑的博客尚未保存，确定要离开此页吗？';3 };可以使用返回值文字来提示用户。但只有Firefox中却不显示该文字。当刷新页面时，各浏览器表现如下IE：Chrome：Firefox12：Mozilla官方说Firefox4之前的版本可以通过事件对象的returnValue修改该值，如下1 window.onbeforeunload = function(e) {2 e = e || window.eve 阅读全文
【javascript基础】document.getElementById
2012-12-25 19:29 by sniper007, 503 阅读, 收藏, 编辑
摘要：
含义：接收一个参数ID，如果能找到，则返回该元素，否则返回null，注意，区分大小写。有个奇怪的问题，IE8以及较低版本的浏览器不区分ID的大小写，因此‘content’, 'Content'会当做相同的元素处理。1 <div id="content">111</div>2 <script>3 var content = document.getElementById("content"); 4 var _content = document.getElementById("Content&q 阅读全文
【javascript基础】Repaint 和 Reflow
2012-12-24 17:08 by sniper007, 342 阅读, 收藏, 编辑
摘要：
Repaint又叫Redraw，重绘，它是指一种不影响当前dom结构的和布局的一种重绘动作。以下的动作都会促发Repaint：不可见或可见（visibility）;颜色和图片改变（background,border-color,color之类的属性）；不改变页面元素大小，形状和位置，但改变其外观的变化。Reflow，又叫重构， 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候，任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时，它的所有父元素和子元素都会发生 Reflow，最后 Reflow 必然会导致 Repa 阅读全文
【javascript基础】script的async属性
2012-12-24 15:29 by sniper007, 282 阅读, 收藏, 编辑
摘要：
script async属性，下载后代码并会立刻执行，onload之前执行，并且不会阻塞其他处理过程，可以并行下载。带有async属性的script标签可以放到页面中的任何位置。经测试，除了IE6,7,8,9，其他浏览器都支持。 阅读全文
【javascript基础】script的defer属性
2012-12-24 15:08 by sniper007, 633 阅读, 收藏, 编辑
摘要：
script defer属性，下载后代码并不会立刻执行，直到dom加载完成，onload之前执行，并且不会阻塞其他处理过程，可以并行下载。带有defer属性的script标签可以放到页面中的任何位置。那么，我们来测试下，在各个浏览器里面是什么反应测试代码： 1 4 7 8 1、firefox后台输出效果如下：总结：firefox是支持defer的，只不过当脚本有src的时候，才起作用，木有的话，按照正常的执行。2、chrome后台输出效果如下：总结：跟firefox一致3、safari后台输出效果如下：总结：跟firefox一致4、opera后台输出效果如下：总结：不支持defer属性5... 阅读全文
【javascript基础】window.length
2012-12-11 12:13 by sniper007, 275 阅读, 收藏, 编辑
摘要：
window.length返回文档中frame的数，各个浏览器都支持DEMO： 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <iframe></iframe>10 <iframe></iframe>11 <iframe></iframe>12 阅读全文
【javascript】标准模式与怪异模式下CSS以及JS的区别
2012-12-03 17:38 by sniper007, 1278 阅读, 收藏, 编辑
摘要：
标准模式与怪异模式下CSS的区别见这篇文章《【css】怪异模式下的盒模型》http://www.cnblogs.com/sniper007/archive/2012/12/03/2799571.html标准模式与怪异模式下JS的区别document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。区别主要体现在两方面：一、获取当前视口大小在IE，firefox,safari,opera,chrome中，document.documentElement.clientWidth和d 阅读全文
【javascript基础】Nicholas C. Zakas如何面试前端工程师
2012-11-29 14:52 by sniper007, 179 阅读, 收藏, 编辑
摘要：
Original Post：Interviewing the front-end engineerNicholas C. Zakas，2010年1月5日翻译完成：2010年1月7日，最后更新：2010年1月10日面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉 阅读全文