CSS/JS对DOM渲染的影响

CSS DOM HTML JavaScript DOM渲染

我们知道页面样式一般写在HTML头部,而页面脚本放在HTML尾部。 这是因为脚本和样式会阻塞DOM渲染。 本文具体分析了包括脚本和样式在内的资源元素对DOM渲染的影响, 并给出具体的示例代码。

本文只讨论服务器端渲染的DOM(以下称为同步渲染)资源载入时机。 关于动态插入HTML标签(异步渲染)的阻塞情况请参考 异步渲染DOM元素的加载时机一文。

TL;DR

  • CSS(外链或内联)会阻塞整个DOM的渲染(Rendering),然而DOM解析(Parsing)会正常进行
  • 很多浏览器中,CSS会延迟脚本执行和DOMContentLoaded事件
  • JS(外链或内联)会阻塞后续DOM的解析(Parsing),后续DOM的渲染(Rendering)也将被阻塞
  • JS前的DOM可以正常解析(Parsing)和渲染(Rendering)
继续阅读

异步渲染DOM元素的加载时机

CSS Chrome DOM IE 事件 DOM渲染 异步 Firefox

CSS/JS对DOM渲染的影响一文 探讨了静态页面中的JavaScript/CSS的载入和解析对DOM渲染的影响。 本文接着讨论异步渲染场景下JavaScript/CSS对DOM解析(Parsing)和渲染(Rendering)的影响。

TL;DR

  • 动态插入的外部样式表或脚本不阻塞DOM解析或渲染。
  • 动态插入的内联样式表或脚本会阻塞DOM解析和渲染。
  • 未连接到DOM树的样式表或脚本(外部或内联)不会被下载、解析或执行。
  • 可以通过onloadonerror监听HTML资源标签载入结果,兼容IE需要onreadystatechange
继续阅读

jQuery获取元素内容

DOM HTML iframe jQuery

所有人都知道使用.html()可以获得元素内容,.find()可以获得子元素。 但这两个方法不是万能的,在很多场景我们需要其他的API。例如:

  • 获得所有内容节点(包括文本、注释、元素)
  • 获得iframe或frame内的document
  • 获得所有直接子元素

下文中整理的jQuery获取元素内容的各种方法及其区别, 包括.html(), .text(), .children(), .contents()

继续阅读

什么时候应该使用依赖注入

AMD AngularJS JavaScript 接口 测试 依赖注入

依赖注入(Dependency Indection, DI)是IoC思想的一种实现,用来解决模块间的依赖关系。 该设计模式的基本思想是集中式的模块管理,模块需要的依赖由DI框架统一注入, 模块自身不去主动发现和构建依赖。

JavaScript长期以来缺乏模块依赖机制,近年来随着前端的变重社区中出现了非常多的模块化标准和方案。 包括AMD标准、CommonJS规范、ES6 Import等等。 而DI不仅仅是一种模块化工具,而是通过控制反转的思想来解决可测试性和复用性问题。

继续阅读

没有Root权限Oh My Zsh使用攻略

Bash Linux Mac Zsh SSH Shell Unix

有些Linux环境中我们没有管理员权限,但这并不能阻止Harttle使用Zsh。 为此我们需要本地安装Zsh,应用Oh My Zsh配置, 再设置启动Shell来使我们登录即进入Zsh

如果你还不知道什么是Zsh,请看下图:

zsh command line

安装和配置Shell的过程很可能会使你无法再次登录Shell, 请确保你有其他的方式访问该机器,这样发生状况时可以重置Shell配置。 比如:

  • 你有桌面系统!可以直接进入Gnome或者KDE。
  • 可用的scp,如果你与主机之间没有代理等中间人的话,scp应该是好使的。
  • Samba等文件服务。这使你可以在不登录的情况下进行配置。
继续阅读

在 Vim 中进行文件目录操作

Vim 剪切板 寄存器 快捷键

很多时候我们希望在Vim中可以操作文件和目录,例如备份当前文件、 重命名当前文件、创建和删除旧文件、创建和删除目录等。 这些操作在Bash中当然可以很好地完成,但退出Vim会丢失光标位置、Buffer等信息, Harttle当然希望在Vim中完成这些操作。

本文介绍文件和目录的增删改查,同时编辑多个文件请参考这几篇文章:

继续阅读