写在前面
本文摘自 «CSS 世界»(附加部分个人见解)
前端模块化的前世今生
Posted on
写在前面
本文主要参考前端模块化详解
模块化就是将一个复杂的系统按照一定的规范分解成多一个个独立的模块的代码组织方式。最早前端是没有模块化的概念的，只是通过一个个 script 标签引入，但随着前端代码的日益膨胀，会出现很多问题，比如多个 script 之间的依赖关系很难掌控，容易不清楚他们之间的依赖关系而导致加载顺序出错，然后也需要引入多个js，代码难以维护，所以 js 就必须使用和其它语言一样的模块化去管理了，因此前端就出现了一系列的模块化解决方案，并不断的发展完善。本文带你从石器时代开始一步步了解一下模块化的前世今生。
重绘和回流
Posted on
写在前面
浏览器内核是指支持浏览器运行的最核心的程序，分为两个部分，一个是渲染引擎，一个是 JS 引擎，渲染引擎在不同内核的浏览器中也不是都相同的。下面来介绍下浏览器渲染过程：
- 解析html/css/js： 浏览器会把 HTML 解析成1个 DOM Tree，把 CSS 解析成 CSSOM,也就是 CSS 规则树，类似于 DOM 结构，加载 js 后来操作 DOM Tree和 CSS Rule Tree。
- 构造 Render Tree： 解析完成后，渲染引擎会通过 DOM Tree 和 Css Rule Tree 来构造 Render Tree（不包括 display: none、head，包括 visibility: hidden）。渲染树只有需要显示的节点和这些节点的样式信息。如遇到 js 会停止渲染，控制权交给 js 引擎执行 js 代码（js 的加载和解析与执行会阻塞 DOM 的构建），因为浏览器渲染和 js 执行共用一个线程。
- 布局：生成渲染树后，浏览器就会根据渲染树来布局（也可以叫回流），这个阶段浏览器会弄清楚每个节点在页面中确切的位置和大小。布局流程会输出一个盒模型，包括每个元素在视口确切的位置和尺寸，所有相对测量值都会转换为屏幕上的绝对元素。
- 绘制： 布局完成后，浏览器会立即发出 ”Paint Setup“ 和 ”Paint“ 事件，将渲染树转换为屏幕上的像素。
在这里不对浏览器渲染过程做过多的赘述，具体更深入过程可见 你不知道的浏览器页面渲染机制。
Hello World
Posted on
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick Start
Create a new post
1 | $ hexo new "My New Post" |
More info: Writing
Run server
1 | $ hexo server |
More info: Server
Generate static files
1 | $ hexo generate |
More info: Generating
Deploy to remote sites
1 | $ hexo deploy |
More info: Deployment