摘要：前几日写了一篇文章，介绍了js阻塞页面加载的问题。当时是通过例子来验证的。今天，我介绍一下浏览器内核，从原理上介绍一下js阻塞页面加载的原因。浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。1. javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。2. GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要 阅读全文
【javascript基础】一份JS面试题
2012-12-26 17:53 by sniper007, 343 阅读, 0 推荐, 收藏, 编辑
摘要：★列出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, 194 阅读, 0 推荐, 收藏, 编辑
摘要：这个总结来源于一次优化的请求，最初某个页面的加载十分缓慢，load事件迟迟无法触发，因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化，拿得load事件尽可能早地触发。于是我查看了页面的源码，并对外部资源进行了整理，基于下面2个理念画出了一个推测的瀑布图：浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久。javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久。然而，当我看到各浏览器中实际的瀑布图时，我知道自己又犯了一个简单的错误：太过相信所谓的权威和大众的声音，而没有更早地进行实践来检验理论的正确性……本篇文章就使用几种流行的浏览器，针对同一个页面 阅读全文
【javascript基础】【转】javascript模块化、模块加载器初探
2012-12-26 17:05 by sniper007, 160 阅读, 0 推荐, 收藏, 编辑
摘要：最常见网站的javascript架构可能是这样的：一个底层框架文件，如jQuery一个网站业务框架文件，包含整站公用业务模块类(如弹框、ajax封装等)多个业务文件，包含每个具体页面有关系的业务代码 为了减少一个HTTP请求，我们可能将底层框架文件和网站业务框架文件combo成一个文件，作为一个公用文件引入到每个需要使用javascript的页面中，再在具体的页面中引入和当前页相关业务js文件。为了减少页面加载脚本阻塞现象，我们还可以将脚本文件放在html的body底部进行加载。 这看似是一个很好的javascript架构方案。每个页面最多引用两个js文件，打开首页后，后续页面都可以使... 阅读全文
【javascript基础】【转】判断 iframe 是否加载完成的完美方法
2012-12-26 16:29 by sniper007, 234 阅读, 0 推荐, 收藏, 编辑
摘要：很老的东西，记下来下，万一以后要用到一般来说，我们判断 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, 224 阅读, 0 推荐, 收藏, 编辑
摘要：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, 417 阅读, 0 推荐, 收藏, 编辑
摘要：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 阅读全文
【css】【转】那些年我们一起清除过的浮动
2012-12-26 13:42 by sniper007, 166 阅读, 0 推荐, 收藏, 编辑
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1 阅读全文
【css】display 属性
2012-12-26 13:12 by sniper007, 202 阅读, 0 推荐, 收藏, 编辑
摘要：定义和用法display 属性规定元素应该生成的框的类型。说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。默认值：inline继承性：no版本：CSS1JavaScript 语法：object.style.display="inline"实例使段落生出行 阅读全文
【css】display:inline-block
2012-12-26 13:05 by sniper007, 283 阅读, 0 推荐, 收藏, 编辑
摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：IE8,IE9,IE10,Firefox,Safari,Chrome,Opera。不支持的浏览器：IE6,7或许有朋友会对上面所说的IE6,7 也不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 阅读全文