使用 rem 提供一致的字体大小

CSS Chrome 字体 font-size

猴子都知道在 Web 页面中可以用 px (1/100英寸) 来做字体或宽高的单位, 虽然 px 的字面含义是像素但它早已不是指物理像素,而是跨操作系统的、跨浏览器的长度单位。 比如在 2x 像素密度的Ritina 屏上 1px 会自动占据两倍的长度。

pt 常被用于打印字体,为 1/72 英寸,类似的还有in, cm, mm, pc。 这类绝对像素因渲染不一致且无法被 UA 缩放而 很少在 Web 中应用。当然浏览器并没有那么笨,下文有对此更详细的讨论。

而 px 的问题在于我们想让整个页面字体变大一些的时候需要更改所有的字体。 于是我们开始使用相对于父元素的像素单位em, 在标签嵌套时这样层级的继承(compounding problem)会令人相当困惑。 为此建议使用rem作为像素单位,该像素单位只相对于根元素<html>。 这样一来问题的关键便是控制根元素的字体大小

CSS/JS 阻塞 DOM 解析和渲染

CSS DOM JavaScript 性能

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

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

TL;DR

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

异步渲染的下载和阻塞行为

CSS Chrome DOM 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等文件服务。这使你可以在不登录的情况下进行配置。

上一页 下一页