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 ...