原文地址：Tasks, microtasks, queues and schedules
同类文章 这一次，彻底弄懂 JavaScript 执行机制

鉴于上篇文章有提到过 微任务与宏任务，所以，在此做个细致补充： 话不多说，直接进入正文：

• [1] 本文主要根据网上资源总结而来，如有不对，请斧正。
• [2] 需要知道的专业名词术语：synchronous：同步任务、asynchronous：异步任务、task queue/callback queue：任务队列、execution context stack：执行栈、heap：堆、stack：栈、macro-task：宏任务、micro-task：微任务

【背景】

如果你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；
如果你是做了两三年web产品前端研发，迷茫找不着提高之路，看这篇文章吧；
如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体 系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触web前端研发至今 已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚辛甚！

web 缓存

web 缓存是可以通过自动保存常见文档副本的 HTTP 设备。当 Web 请求抵达缓存时,如果本地有以缓存的副本,就可以从本地存储设备而不是原始服务器中提取这个文档。

1. 为什么需要缓存

• 冗余的数据传输

有很多客户端访问一个流行的原始服务器页面时,服务器会多次传输同一份文档,每次传送给一个客户端,一些相同的字节会在网络中一遍遍的传输。这些冗余的数据传输会耗尽昂贵的网络带宽。而通过缓存我们可以保留第一家服务器响应的副本,后继请求就可以由缓存的副本来应对

• 带宽瓶颈

前言

在浏览器中输入url到显示网页主要包含两个部分： 网络通信和页面渲染

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走

常见的浏览器内核有哪些?

写在前面

在讨论回流与重绘之前，我们要知道：

1. 浏览器使用流式布局模型 (Flow Based Layout)。
2. 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
3. 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

一句话：回流必将引起重绘，重绘不一定会引起回流。

1.语义化标签

语义化标签 为页面提供了更好的页面结构。

前言

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

title（网站标题）

title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到（搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。）title一般不超过80个字符，而且词语间要用英文“-”隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。

用法：<title>网站标题</title>

摘要

hexo是一款快速、简洁且高效的博客框架。
中文文档https://hexo.io/zh-cn/docs/

1
2
3
4
5

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server