rel=nofollow属性
nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值，告诉机器(爬虫)无需追踪目标页，为了对抗blogspam(博客垃圾留言信息)，Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pagerank传递到目标页。但是如果你是通过sitemap直接提交该页面，爬虫还是会爬取，这里的nofollow只是当前页对目标页的一种态度，并不代表其他页对目标页的态度。
nofollow的使用nofollow有两种用法：
用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。nofollow的作用
nofollow主要有三个作用：
防止不可信的内容，最常见的是博客上的垃圾留 ...
video新版本 Chrome自动播放报错
解决新版本 Chrome 提示 DOMException: The play() request was interrupted
解决新版本 Chrome 提示DOMException: The play() request was interrupted大概在一些新版本的浏览器中，我们是用 audio 或者 video 进行媒体资源播放的时候，可能会在控制台看到这个输出:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Or
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
如何触发？<video id="video" preload="none" src="https://example.com/file.mp4"></ ...
音视频自动播放问题
不同浏览器下 autoplay 的限制策略和方案的整理
一、Chrome 浏览器2018 年 4 月份发布的 Chrome 66 正式关掉了声音自动播放
静音自动播放总是允许的。
在下列情况下允许使用声音自动播放：
用户已经与域进行了交互（点击，tap 等）。在桌面上，用户的**媒体参与指数阈值**(MEI)已被越过，这意味着用户以前播放带有声音的视频。在移动设备上，用户已将该网站添加到主屏幕。顶部框架可以将自动播放权限授予其 iframe 以允许自动播放声音。
MEI 是一个评估用户对于当前站点的媒体参与程度的指数，它取决于
用户在媒体上停留时间超过了 7 秒以上
音频必须是展示出来，并且没有静音
与 video 之间有过交互
媒体的尺寸不小于 200x140
Chrome-应对方案
不要假设视频会播放，并且在视频不是真正播放时不要显示暂停按钮。
根据 promise 结果，判断当前媒体是否支持 autoplay
var promise = document.querySelector("video").play();if (pr ...
使用pushState()改变url而不刷新
HTML5提供history接口，把URL以state的形式添加或者替换到浏览器中，其实现函数正是 pushState 和 replaceState。
pushState 例子pushState() 的基本参数是：
window.history.pushState(state, title, url);
其中state和title都可以为空，但是推荐不为空，应当创建state来配合popstate监听。例如，我们通过pushState现改变URL而不刷新页面。
//code from http://caibaojian.com/book/var state = ({ url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE});window.history.pushState(state, ~title, ~href);
其中带有“”符号的是自定义内容。就可以把这个href（URL）推送到浏览器的历史里。如果想要改变网页的标题，应该：
document.title= ~newTitle;
注意只 ...
CSS 与 JS 阻塞 DOM 解析和渲染的
link 标签放在头部性能会高一点，少一点人知道如果 script 与 link 同时在头部的话， script 在上可能会更好
CSS不会阻塞 DOM 的解析<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { width: 100px; height: 100px; background: lightgreen; } </style> </head> <body> <div></div> </body> </html>
注意哦！这里说的是 DOM 解析，证明的例子如下，首先在头部插入
<script def ...
pushState、replaceState、popstate 事件阻塞 DOM 解析和渲染的
HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。
MDN
使用 history.pushState() 可以改变referrer，它在用户发送 XMLHttpRequest 请求时在HTTP头部使用，改变state后创建的 XMLHttpRequest 对象的referrer都会被改变。因为referrer是标识创建 XMLHttpRequest 对象时 this 所代表的window对象中document的URL。
pushState() 方法的例子假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码:
var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");
这将使浏览器地址栏显示为 ...
通过rel="preload"进行内容预加载
link 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 head元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的
对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。
基础部分link 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：
<link rel="stylesheet" href="styles/main.css">
但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。一个简单的例子可能看起来像下面这样 （在这里可以查看示例的JS和CSS源代码 ...
vue生命周期
从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！
beforecreated
el 和 data 并未初始化
created
完成了 data 数据的初始化，el没有
beforeMount
完成了 el 和 data 初始化
mounted
完成挂载
另外在标红处，我们能发现el还是 ，这里就是应用的 Virtual DOM （虚拟Dom）技术，先把坑占住了。到后面 mounted 挂载的时候再把值渲染进去。
update 相关这里我们在 chrome console里执行以下命令app.message= 'yes !! I do';
下面就能看到data里的值被修改后，将会触发update的操作。
*destroy相关有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy ...
Vue中的nextTick
MutationObserver是HTML5中的新API，是个用来监视DOM变动的接口
nextTick的主要应用的场景及原因在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。具体原因在Vue的官方文档中详细解释：
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非 ...
CORS settings attributes
在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如<img>和 <video>均有一个跨域属性 (crossOriginproperty)，它允许你配置元素获取数据的 CORS 请求。
默认情况下 （即未指定crossOrigin属性时）, CORS 根本不会使用。如Terminology section of the CORS specification中的描述，“anonymous” 关键字说明不会通过 cookies，客户端 SSL 证书或 HTTP 认证交换用户凭据。即使是无效的关键字和空字符串也会被当作anonymous关键字使用。
示例: 使用 crossorigin 的 script 元素你可以使用下面的<script>元素告诉一个浏览器执行来自https://example.com/example-framework.js的脚本而不发送用户凭据。
<script src="https://example.com/example-framework.js" crossorigin=&qu ...
前端开发中的 MVC/MVP/MVVM 模式
MVC，MVP和MVVM都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。
原文地址参考：MVC、MVP 和 MVVM 架构模式从Script到Code Blocks、Code Behind到MVC、MVP、MVVM
要了解MVC、MVP和MVVM，就要知道它们的相同点和不同点。不同部分是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分则是MV(Model-View)。
Model&View这里有一个可以对数值进行加减操作的组件：上面显示数值，两个按钮可以对数值进行加减操作，操作后的数值会更新显示。
我们将依照这个“栗子”，尝试用JavaScript实现简单的具有MVC/MVP/MVVM模式的Web应用。
ModelModel层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。这里我们把需要用到的数值变量封装在Model中，并定义了add、sub、getVal三种操作数值方法。
var myapp = {}; // 创建这个应用对象my ...
MySQL 版本发布历史总结
在2000 年的时候，MySQL 公布了自己的源代码，并采用GPL（GNU General Public License）许可协议，正式进入开源世界。
2000年4月，MySQL对旧的存储引擎进行了整理，命名为MyISAM。
2001年，Heikiki Tuuri向MySQL提出建议，希望能集成他们的存储引擎InnoDB，这个引擎同样支持事务处理，还支持行级锁。所以在2001年发布的3.23 版本的时候，该版本已经支持大多数的基本的SQL 操作，而且还集成了MyISAM和InnoDB 存储引擎。MySQL与InnoDB的正式结合版本是4.0。
2003年12月，MySQL 5.0版本发布，提供了视图、存储过程等功能
2008年11月，MySQL 5.1发布，它提供了分区、事件管理，以及基于行的复制和基于磁盘的NDB集群系统，同时修复了大量的Bug。
2010年04月22 发布MySQL 5.5, MySQLcluster 7.1，其主要新特性包括半同步的复制及对SIGNAL/RESIGNAL的异常处理功能的支持，最重要的是InnoDB存储引擎终于变为当前MySQL的默认存储 ...
CommonJS,AMD,CMD,ES6
模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统
一、CommonJSNode.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。
// 定义模块math.jsvar basicNum = 0;function add(a, b) { return a + b;}module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum}// 引用自定义的模块时，参数包含路径，可省略.jsvar math = require('./math');math.add(2, 5); ...
express-session之数据保存mongodb
session数据存储空间一般是在内存中开辟的，那么在内存中的session显然是存在极大的数据丢失的隐患的，比如系统掉电，所有的会话数据就会丢失，这里主要介绍session持久化保存到mongoDB的工具connect-mongo。
express-session中间件将会话数据存储在服务器上；它仅将会话标识（而非会话数据）保存在 cookie 中。从1.5.0版本开始, express-session不再依赖cookie-parser,直接通过req/res读取/写入;默认存储位置内存存储(服务器端),
npm install express-session connect-mongo app .use ( session ({ secret: secret , name: 'session_id' , saveUninitialized: false , // 在存储一些新数据之前，不创建session resave: false , // 如果没有发生任何修改不储存sessi ...
nuxt的运行原理
通过查看nuxt.js工程目录下的package.json文件，我们可以看到下列几条指令：
"scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate"}
结合官网的介绍，我们可以知道不同的指令对应着不同的功能：指令描述nuxt开启一个监听3000端口的服务器，同时提供hot-reloading功能nuxt build构建整个应用，压缩合并JS和CSS文件（用于生产环境）nuxt start开启一个生产模式的服务器（必须先运行nuxt build命令）nuxt generate构建整个应用，并为每一个路由生成一个静态页面（用于静态服务器）以上几条指令，也就是本文将要分析的重点：究竟这些指令的背后，nuxt都做了一些什么样的工 ...
React 生命周期
React生命周期主要包括三个阶段：初始化阶段、运行中阶段和销毁阶段
组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWil ...
CentOS 7上安装和配置MongoDB
数据库以及 Node/Express 应用的数据库集成(Mongoose)
MongoDB是提供高性能，高可用性和自动缩放的NoSQL数据库。 NoSQL数据库意味着，与MySQL或PostgreSQL不同，它不支持SQL（结构化查询语言）来检索或操纵存储的数据。 MongoDB不会将数据存储在表中，而是将数据存储在类似于JSON的“文档”结构中（在MongoDB中称为BSON）
在CentOS中添加MongoDB资源库使用ssh root帐户连接到CentOS 7服务器：
ssh root@107.182.28.215 -p 29420
创建文件cd /etc/yum.repos.d/vi mongodb-org-4.0.repo
填入如下内容：
[mongodb-org-4.0]name=MongoDB Repositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/gpgcheck=1enabled=1
gpgkey=https://www.mongodb.o ...
MariaDB 与MySQL
MariaDB是MySQL关系数据库管理系统的一个复刻，由社区开发，有商业支持，旨在继续保持在GNU GPL下开源。MariaDB的开发是由MySQL的一些原始开发者领导的，他们担心甲骨文公司收购MySQL后会有一些隐患。
MariaDB打算保持与MySQL的高度兼容性，确保具有库二进制奇偶校验的直接替换功能，以及与MySQL API和命令的精确匹配。 MariaDB自带了一个新的<a href=”https://zh.wikipedia.org/w/index.php?title=%E5%AD%98%E5%82%A8%E5%BC%95%E6%93%8E&action=edit&redlink=1" original-title"存储引擎（页面不存在）”>存储引擎Aria，它可以替代MyISAM，成为默认的事务和非事务引擎。[7] 它最初使用XtraDB作为默认存储引擎， 并从10.2版本切换回InnoDB。
MariaDB直到5.5版本，均依照MySQL的版本。因此，使用MariaDB5.5的人会从MySQL 5.5中了解到Mari ...
数据库的备份、还原、导入及导出
mongodb 备份、还原、导入、导出简单操作
一般来说，进行整库导出导入时使用mongodump和mongorestore，这一对组合操作的数据是BSON格式，进行大量dump和restore时效率较高
进行单个集合导出导入时使用
mongoexport（备份)
mongoimport（还原）
这一对组合操作的数据是JSON格式，可读性较高。
mongodump（备份)说明：
mongodump是一个用于导出二进制数据库内容的实用工具，它导出的bson文档中只会包含着集合文档等信息，不包括索引信息（索引信息会单独导出），所以还原后，索引必须重建（这个不用担心，使用mongorestore会自动重建mongodump生成的索引信息）。3.4版本中添加了对只读视图的支持。
参数：| 命令 |全称 | 默认值 |参考释义 || —- | —– | ——- | —– || —- | –help | ——- | 查看mongodump命令的使用帮助 || ...
Mongoose Populate 基本使用
在使用 mongoose 时，通过一个外键与另一张表建立关联
mongoose官网地址
Mongoose 之 Population 使用语法
Query.populate(path, [select], [model], [match], [options])
path ： String或Object。
String类型的时， 指定要填充的关联字段，要填充多个关联字段可以以空格分隔。
Object类型的时，就是把 populate 的参数封装到一个对象里。当然也可以是个数组。下面的例子中将会实现。
select：Object或String，可选，指定填充 document 中的哪些字段。
Object类型的时，格式如: {name: 1, _id: 0}，为0表示不填充，为1时表示填充。
String类型的时，格式如: “name -_id”，用空格分隔字段，在字段名前加上-表示不填充。详细语法介绍 query-select
尝试中发现 select 默认会填充 _id。
model: Model，可选，指定关联字段的 model，如果没有指定就会使用Schem ...
MySQL 事务相关以及索引查询
事务相关以及索引查询
一、事务相关事务是逻辑上的一组操作，要么都执行，要么都不执行。假如：小明要给小红转账1000元，这个转账会涉及到两个关键操作就是：将小明的余额减少1000元，将小红的余额增加1000元。万一在这两个操作之间突然出现错误比如银行系统崩溃，导致小明余额减少而小红的余额没有增加，这样就不对了。事务就是保证这两个关键操作要么都成功，要么都要失败。
事物的四大特性(ACID)
原子性： 事务是最小的执行单位，不允许分割。事务的原子性确保动作要么全部完成，要么完全不起作用；
一致性： 执行事务前后，数据保持一致，多个事务对同一个数据读取的结果是相同的；
隔离性： 并发访问数据库时，一个用户的事务不被其他事务所干扰，各并发事务之间数据库是独立的；
持久性： 一个事务被提交之后。它对数据库中数据的改变是持久的，即使数据库发生故障也不应该对其有任何影响。
## 并发事务带来哪些问题？
在典型的应用程序中，多个事务并发运行，经常会操作相同的数据来完成各自的任务（多个用户对统一数据进行操作）。并发虽然是必须的，但可能会导致以下的问题：
脏读（Dirty read）: 当一个事 ...
InnoDB数据页结构
ySQL服务器上负责对表中的数据的读取和写入的工作的部分是存储引擎，而关于服务器会支持不同类型的服务器，如：InnoDB、MyISAM、Memory……
前言不同的存储引擎都是为了实现不同的特性进行开发的，真实数据的存储在不同的存储引擎中存放的格式一般是不同的，有的存储引擎比如Memory都不用磁盘来存储数据，就跟NoSQL一样，服务器关闭后数据就不见了。InnoDB是MySQL的默认储存引擎，也是我们大家常用的存储引擎。
Mysql把页作为管理存储空间的基本单位，一个页的大小一般是16KB
InnoDB页简介InnoDB是一个将表中的数据存储到磁盘上的存储引擎，所以即使关机后重启我们的数据还是存在的。而真正处理数据的过程是发生在内存中的，所以需要把磁盘中的数据加载到内存中，如果是处理写入或修改请求的话，还需要把内存中的内容刷新到磁盘上。而我们知道读写磁盘的速度非常慢，和内存读写之间的差距就不再多说，所以当我们想从表中获取某些记录时，InnoDB存储引擎需要一条一条的把记录从磁盘上读出来么？不，那样会慢死，InnoDB采取的方式是：将数据划分为若干个页，以页作为磁盘和内存之间交互 ...
CSS中的BFC
BFC（Block Formatting Context）直译为“块级格式化范围
文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC``是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文
触发BFC满足下列条件之一就可触发BFC
根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
BFC布局规则：1.内部的Box会在垂直方向，一个接一个地放置。2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4.BFC的区域不会与f ...
CSS盒模型以及外边距合并
盒模型的四要素是border、margin、padding、content
盒模型基本概念所有HTML元素，在页面的呈现过程中，都遵循CSS制定的盒模型。盒模型的几个要素是 border 、 margin 、 padding 、 content ，如下图，
盒模型
content：真正包含元素内容的区域
padding(内边距)：内容和边框之间的一段间距，属于标签内部
border(边框)：包含边框的区域，扩展了内边距区域。它位于边框边界内部。大小为border-box宽和border-box高
margin(外边距)：该标签和其他标签之间的间距，设置此内容，不会影响标签的大小
当一个元素既有margin,又有padding,还有边框时，在普通流中所占的空间就是这些值的总和。
即横向空间为：marginLeft + borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth + marginRight，纵向的同理。
盒模型的分类及不同盒模型之间的区别盒模型分为*IE盒模型**和W3C标准***的盒 ...
opacity、visibility、display
opacity 用来设置透明度
display 定义建立布局时元素生成的显示框类型
visibility 用来设置元素是否可见。
opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。
注意：
使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来。
回流当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。
每个页面至少需要一次回流，就是在页面第一次加载的时候。dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。
重绘当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的 ...
Flex 布局教程
6个属性设置在容器上:
flex-direction: row （默认 row |row-reverse |column |column-reverse;
flex-wrap nowrap （默认 nowrap | wrap | wrap-reverse;
flex-flow: 前两个只和，默认row nowrap`` <flex-direction> || <flex-wrap>
justify-content flex-start （默认 flex-start | flex-end |center\nspace-between | space-around;
align-items stretch （默认 flex-start |flex-end |center\nbaseline | stretch;
align-content stretch （默认 flex-start |flex-end |center\nspace-between |space-around |stretch;
6个属性设置在项目上。
order 属性定义项目的排列顺序。 ...
css图层
在 DOM 树中每个节点都会对应一个 LayoutObject，当他们的 LayoutObject 处于相同的坐标空间时，就会形成一个 RenderLayers ，也就是渲染层
某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
合成层创建标准什么情况下能使元素获得自己的层？虽然 Chrome的启发式方法(heuristic)随着时间在不断发展进步，但是从目前来说，满足以下任意情况便会创建层：
3D 或透视变换(perspective transform) CSS 属性
使用加速视频解码的 <video> 元素 拥有 3D
(WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
混合插件(如 Flash)
对自己的 opacity 做 CSS动画或使用一个动画变换的元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的 ...
css图层
浏览器层合成与页面渲染优化
渲染对象（RenderObject）一个 DOM 节点对应了一个渲染对象，渲染对象依然维持着 DOM 树的树形结构。一个渲染对象知道如何绘制一个 DOM 节点的内容，它通过向一个绘图上下文（GraphicsContext）发出必要的绘制调用来绘制 DOM 节点。
渲染层（RenderLayer）这是浏览器渲染期间构建的第一个层模型，处于相同坐标空间（z轴空间）的渲染对象，都将归并到同一个渲染层中，因此根据层叠上下文，不同坐标空间的的渲染对象将形成多个渲染层，以体现它们的层叠关系。所以，对于满足形成层叠上下文条件的渲染对象，浏览器会自动为其创建新的渲染层。能够导致浏览器为其创建新的渲染层的，包括以下几类常见的情况：
根元素 document
有明确的定位属性（relative、fixed、sticky、absolute）
opacity < 1
有 CSS fliter 属性
有 CSS mask 属性
有 CSS mix-blend-mode 属性且值不为 normal
有 CSS transform 属性且值不为 none
backface-vis ...
浏览器的缓存机制
浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的
一：缓存规则解析
1、强制缓存主要有三种(暂不分析协商缓存过程)，如下：
不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）
存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存(暂不分析)
存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果那么强制缓存的缓存规则是什么？
当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
ExpiresExpires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
Expires是HTTP/1.0的字段，但是现在浏览器默认使用的是HTTP/1.1，那么在HTTP/1.1中网页缓 ...
浏览器的缓存机制
浏览器缓存最主要的作用是减少网络传输的损耗以及降低服务器压力。
接下来我将通过以下几个部分来探讨浏览器缓存机制：
缓存位置
缓存策略
缓存位置浏览器缓存位置分为四种，其优先级顺序如下：
Service Worker
Memory Cache
Disk Cache
Push Cache
当上述四个缓存位置中的缓存都没有命中时，则会向服务器发起请求。
Service WorkerService Worker 是一个注册在指定源和路径下的事件驱动 worker。它采用 JavaScript 控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。
我们可以通过谷歌开发者工具中的 Application -> Service Workers 查看当前缓存的资源。
Memory CacheMemory Cache 即内存中的缓存，其特点是容量小、读取高效、持续性短，会随着进程的释放而释放。
所以，在内存使用率低、缓存小尺寸资源时，会以 Memory Cache 为优先，否则使用 Disk Cache。
Disk CacheDisk Cache 即磁盘中的缓存，其特点 ...
Cache-Control
浏览器缓存里, Cache-Control是金字塔顶尖的规则, 它藐视一切其他设置, 只要其他设置与其抵触, 一律覆盖之.
语法为: “Cache-Control : cache-directive”.Cache-directive共有如下12种(其中请求中指令7种, 响应中指令 9 种):
cache-directive描述 存储策略 过期策略 请求 响应 Public 资源将被客户端和代理服务器缓存yes yes Private 资源将被客户端缓存、代理服务器不缓存yes yes no-sore 请求和相应都不缓存 yes yes yes no-cache 客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定 yes yes yes yes max-age 客户端可以接收生存期不大于指定时间（以秒为单位）的响应
yes yes yes yes s-maxage 覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。 yes yes yes max-stale 指示客户端可以接收超出超时期间的响应 ...
浏览器的回流与重绘 (Reflow & Repaint)
客户端渲染页面的过程
1、处理 HTML 标记并构建 DOM 树。
2、处理 CSS 标记并构建 CSSOM 树。
3、将 DOM 与 CSSOM 合并成一个渲染树。
4、根据渲染树来布局，以计算每个节点的几何信息。
5、将各个节点绘制到屏幕上。
这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM，下面就来看看它们的影响方式。
阻塞渲染：CSS 与 JavaScript谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。同时，由于下面两点：
1、默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。
2、JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。
存在阻塞的 C ...
