浏览器中的事件主要有两个来源： 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。 目录本文主要综合介绍一下浏览器的事件，首先来看事件的监听 事件监听注册与移除注册事件监听有两种方式：注册 on-event 处理器和使用 addEventListener() 事件监听器： 注册 on-event处理器可以将事件监听函数直接写在 HTML 元素属性内： <button id="btn" onclick="alert('Hello world!')">click&l…
在我们学习 css 的时候就了解样式优先级的排序是：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性，我们看一下它们到底具体是如何定义的。 css 的样式有三种来源，页面开发者，用户（使用浏览器的人设置的样式），和用户代理（浏览器），这些样式表会在一定的范围内重叠，互相影响页面的最终样式。 当然， css 的层叠规则也指定了不同样式的权重，当这几种规则同时存在的时候，优先级高的规则生效。 样式表层叠顺序 在应用样式之前，会根据媒体查询（@media 规则）过滤掉一部分样式。 需要说明…
原文：How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code Couple of weeks ago we started a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be…
原文：How JavaScript works: an overview of the engine, the runtime, and the call stack As JavaScript is getting more and more popular, teams are leveraging its support on many levels in their stack - front-end, back-end, hybrid apps, embedded devices and much more. 随着 JavaScript 越来越受欢迎，许多团队在他们技术栈的多个方…
外边距合并（margin collapsing）在流式布局中，两个或者多个毗邻元素块的外边距（margin）在垂直方向上会被合并为单个的外边距，其大小是两个块中的最大的外边距，这就是外边距合并（margin collapsing） 首先要注意的是，发生合并是元素块之间相互的行为，元素块数量则必须大于一个，单个元素块不存在合并的行为。其次，只有垂直方向上的 margin 会发生合并，水平方向上的并不会合并。 发生外边距合并这要有三种情况： 相邻的兄弟元素两个相邻的兄弟元素会发生边距合并，如： <div class="block"> <h2>相邻的兄弟…
最近在重看一些基础的理论知识，看到了回流（Reflow）和重绘（Repaint）的概念，惭愧的发现，对此竟然说不出太详细的内容，在此参阅一些文章进行一个总结。 在了解这两个概念之前先了解一下 HTML 的渲染过程。 HTML 渲染过程浏览的引擎处理 HTML 的基本流程分为如下四个步骤： 1.解析 HTML 并构建 DOM 树和 CSSOM 树。浏览器对 HTML 进行解析，将 HTML 标记转换成文档对象模型 (DOM)，CSS 标记则被转换成 CSS 对象模型 (CSSOM)，而 DOM 和 CSSOM 是独立的数据结构。在解析过程中，DOM 树包含了所有的 html 标签，包括不展示的…
在CSS的盒模型中，所有的元素除了可以再屏幕上自由摆放外，还可以沿着 z轴 进行摆放，特别是当元素为止互相重叠的时候，了解z轴的摆放顺序非常重要。使用 z-index 可以改变元素在 z轴 的上下层级，但是 z-index 具体是如何影响元素的层级呢？为什么有时候它并不生效。本文详细总结一下这些问题。 层叠上下文（stacking context）元素被绘制到画布上的层级顺序用层叠上下文来描述。当前层叠上下文可以包含子层叠上下文，当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。每个层叠上下文完全独立于它的兄弟元素，在其他层叠环境中的元素不会影响当前层叠环境。 每个盒元素都…
原文：React Internals, Part Five: transactions In this part, we’ll talk about React’s transactions. The series part one: basic rendering part two: componentWillMount and componentDidMount part three: basic updating part four: setState part five: transactions <- you are here 全部译文： 第一部分：基础渲染 第二部分：…
原文：React Internals, Part Four: setState In part four of this series we finally add setState to our little React clone. setState is a beast, so grab your favorite beverage and get comfortable! The series part one: basic rendering part two: componentWillMount and componentDidMount part three: basic …
原文：React Internals, Part Three: basic updating In part one, our small React clone, Feact, was implemented far enough to do basic rendering. But once the render happens, that was it. In this part, we’ll add the ability to make changes to the app with subsequent renders. This part will begin to show…