外链 CSS 延迟 DOM 解析和 DOMContentLoaded

CSS DOM JavaScript 事件 DOM解析

绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行。 不管是直接用 DOM API 实现还是使用 jQuery,最终都是DOMContentLoaded事件在起作用。 本文讨论一个我们习以为常却很少了解的问题: 样式文件的载入会延迟脚本执行,以及DOMContentLoaded事件的触发。

DOMContentLoaded事件

页面文档(DOM)完全加载并解析完毕之后,会触发DOMContentLoaded事件, HTML文档不会等待样式文件,图片文件,Iframe页面的加载。 但DOM树已被创建,多数JavaScript已经操作DOM并完成功能了。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

然而在绝大多数场景下,样式文件的载入会延迟DOMContentLoaded事件的触发。 其实这样的行为正是开发者所希望的,为什么呢?

事实上,老版本的IE中DOMContentLoaded事件存在兼容性问题。 参见:兼容所有浏览器的 DOM 载入事件

兼容所有浏览器的 DOM 载入事件

Chrome DOM HTML JavaScript jQuery 事件 Firefox Safari IE

本文就页面载入问题讨论DOMContentLoadedloadreadyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器。 接着介绍jQuery对该问题的实现源码,以及jQuery中$(document).ready()$(window).load()方法的区别。

在讨论页面载入事件之前,首先需要区分的两个概念:DOM就绪和渲染结束。

  • DOM就绪是指浏览器已经接收到整个HTML并且DOM解析完成;
  • 渲染结束是指浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。

overflow 与布局上下文(BFC)

CSS HTML float overflow BFC

HTML 采用流式布局方式,CSS 的float在这种环境下非常重要。 float 常与 overflow 配合使用都是因为 overflow 会创建新的 BFC,进而影响布局。 本文从三个方面介绍 overflow 对浮动的影响:清除环绕,包裹浮动元素,以及独立布局环境。 在此之前先来了解一下什么是 BFC:

BFC(Block Formatting Context,布局上下文) 是 CSS 渲染过程中进行布局的盒子,所有浮动子元素都在盒子内进行布局。 也就是说 BFC 内的浮动元素不会影响到 BFC 外部,BFC 外部的环境也不会影响 BFC 内的布局。 MDN 共列出 8 类可以生成 BFC 的元素,包括浮动和绝对定位元素、行内块,以及 overflow 不为 visible 的元素。 可见,设置 overflow:hidden 可以开启一个 BFC

BFC 很多时候翻译为块级格式化上下文,其实笔者认为布局上下文更为贴切。 本质上讲一个 BFC 就是一个矩形块的独立布局环境。

从MVC数据同步到AngularJS双向绑定

AngularJS MVC Unix WPF 事件 数据绑定 MVVM

MVC恐怕是Web开发中最流行的术语,它是一种设计模式,也是软件架构风格。 MVC也成为一整个系列的设计模式,衍生品包括PAC、HMVC、MVP、MTV、MVVM等。 本文从经典MVC模式谈起,讨论MVC下数据同步策略的设计, 进一步引申出MVVM设计模式,并讨论其数据绑定的优缺点。

MVC

MVC(Model-View-Controller)一词最初在1979年由Trygve Reenskaug提出(Smalltalk-79), 此后Krasner和Pope在Smalltalk-80中再次进行了描述。 最初Krasner和Pope描述的MVC设计是这样工作的:

mvc

跟踪 Github 项目的持续集成状态

持续集成 Github NPM Mocha 测试

不知从什么时候开始,Github项目的README中到处都能看到绿色的小徽章。 通过这些徽章可以获知项目的最新版本号、构建状态、测试覆盖率, 以及依赖软件包的过期情况。请看这个Brick.JS项目的首页:

brick.js

项目标题Brick.JS下是一排徽章,它们分别表示着: 该项目在npm的最新版本是2.0.2,构建和测试状态是通过(还可能是failing), 测试程序的覆盖率为92%,该项目的依赖软件包都处于最新状态。 每次Push一些提交到Github仓库,测试和构建都会自动执行,这些徽章都会更新。

一个简易的 CommonJS 实现

JavaScript CommonJS 模块化

CommonJS规范定义了如何编写JavaScript模块,以及模块间如何相互依赖。 支持模块化的JavaScript开发过程,浏览器端已有RequireJS和Sea.JS等具体实现。 最近Brick.JS也实现了 CommonJS规范来实现客户端JavaScript的模块化。 该实现与Node.js风格兼容,这意味着在不考虑内置package的情况下, 实现了客户端与服务器共用代码。

Brick.JS 是一个基于Node.js的HMVC风格的Web应用开发框架,意图最大化代码复用和项目特性的伸缩性。

本文简要介绍Brick.JS中CommonJS的实现过程。 CommonJS实现起来并不困难,主要精力需要用在错误处理、网络和鲁棒性上。 在此之前先来看一个CommonJS的例子:

// file: foo/client.js
exports.author = 'harttle.land';
exports.log = console.log.bind(console);

// file: bar/client.js
var foo = require('foo');
foo.log(foo.author);        // harttle.land

这两个文件的依赖方式符合CommonJS规范,既可以在Node.js下运行, 现在Brick.JS要让它们在浏览器端运行!请看下文。

上一页 下一页