你不知道的ChromeDevTools玩法
开发者工具函数copycopy 函数可以让你在 console 里拿到任意的资源，甚至包括一些变量，在复制一些特别冗长的数据时特别有用，当复制完成后，直接使用 ctrl + v 即可。
copy 接受一个变量作为参数，如果有多个参数，则忽略第一个后面的所有参数，当需要复制不存在变量名的数据时，可以配合 Store As Global 来使用。
Store As Global当我们从控制台获取一些数据却没有变量名时（在开发时特别常见），可以通过右键点击数据旁的小三角形，通过其来储存为全局变量，变量名为 temp1 一直延续下去，就可以配合 copy 获取变量名打印了，该功能对 HTML 元素同样适用。
$这个 $ 和 jQuery 中的 $ 有部分相似之处，均可以作为选择器来使用，这里依次介绍其用法。
首先是 $0 ~ $4 可以获取点击的 HTML 元素，其中 $0 对应着最后一次点击的元素，$1 次之，依序排列直到$4 。
根据这个操作可以很轻易的复制一个元素，并对其执行一些 DOM 操作。
还可以作为选择器使用，其中 有两种用法，分别是单 $ 和双 $，需要注意的是，双 $ ...
React事件机制-v16.13.1
概览所谓事件机制，无非就是注册事件与分发事件两个步骤，程序员通过代码来注册事件到react对应的节点上，用户与浏览器发生交互，触发浏览器的原生事件，原生事件被react捕获，从原生事件中拿到原生节点，然后根据原生节点拿到react设计的fiber节点，然后从fiber节点中取出相应的回调来执行它，简单流程就是如此，所以我们这次讨论react事件机制，就是如何注册，以及如何分发。
取出事件react初始化过程，简单来讲就是我们的jsx被babel转成一串json，我们将这串json叫做react元素的树，react再将这串json转成fiber树（fiber树主要用来做diff），生成fiber树的过程其实就是，我们对react元素的树进行一个深度优先的遍历，遍历的过程中，对于每个节点，我们所绑定的事件其实是作为一个属性绑定在上面的，遍历完成后，我们需要生成一颗真实DOM的树，生成的时候，每个真实DOM节点都会和fiber节点关联起来（通过一个key值internalInstanceKey）
注册事件在我们生成真实DOM树的时候，需要将fiber树的一些属性（比如样式）映射到真实DO ...
前端模块化详解
前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无味的概念，希望诸君阅读后，对模块化编程有个全新的认识和理解！
建议下载本文源代码，自己动手敲一遍，请猛戳GitHub个人博客(全集)
一、模块化的理解1.什么是模块?
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
2.模块化的进化过程
全局function模式 : 将不同的功能封装成不同的全局函数
编码: 将不同的功能封装成不同的全局函数
问题: 污染全局命名空间, 容 ...
强大的CSS布局——Grid布局
Grid 布局是什么？Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址
Grid 布局和 flex 布局讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
Grid 布局远比 flex 布局强大！
flex布局示例:
Grid 布局示例：
Grid 的一些基础概念我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址
<div class="wrapper&qu ...
「Webpack进阶」Webpack打包后的代码是怎样的？
webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。
那么webpack 打包后的代码是怎样的呢？是怎么将各个 bundle连接在一起的？模块与模块之间的关系是怎么处理的？动态 import() 的时候又是怎样的呢？
本文让我们一步步来揭开 webpack 打包后代码的神秘面纱
准备工作创建一个文件，并初始化
mkdir learn-webpack-outputcd learn-webpack-outputnpm init -y yarn add webpack webpack-cli -D复制代码
根目录中新建一个文件 webpack.config.js，这个是 webpack 默认的配置文件
const path = require('path');module.exports = { mode: 'development', // 可以设置为 production // 执行的入口文件 ent ...
你真的了解回流和重绘吗
回流和重绘可以说是每一个web开发者都经常听到的两个词语，可是可能有很多人不是很清楚这两步具体做了什么事情。最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。
阅读时间大约15~18min
浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，优化性能，可以跳到后面。（这个渲染过程来自MDN）
从上面这个图上，我们可以看到，浏览器渲染过程如下：
解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里我们不展开，之后有机会会写一篇博客）
...
Windows如何右键添加markdown文件
1.win+r------->regedit
2.找到.md文件夹，双击该文件夹后修改数据的值为“.md”
3.在.md文件夹右键新建“项”------>ShellNew，创建“字符串值”-------->NullFile，数据值为空
运行npm_run_build的时候发生了什么？
事情是这样的，直接开讲面试官：npm run xxx的时候，发生了什么？讲的越详细越好。
我（心想，简单啊）： 首先，DNS 解析,将域名解析成 IP 地址，然后 TCP 连接,TCP 三次握手…
面试官：停停，我问的不是从URL输入到页面展现到底发生什么？，是npm run xxx的时候，发生了什么。
我（尴尬，条件反射地以为是问的八股文）：emmmm，我记得 npm run xxx的时候，首先会去项目的package.json文件里找scripts 里找对应的xxx，然后执行 xxx的命令，例如启动vue项目 npm run serve的时候，实际上就是执行了vue-cli-service serve 这条命令。(好险，幸好这点常识我还是懂的)
package.json文件
{ "name": "h5", "version": "1.0.7", "private": true, "scripts": { "serve ...
可能是最好的BFC解析了..
BFC（Block Formatting Contexts），块级格式化上下文，是 CSS 中一个比较晦涩难懂的概念，下面我们尝试以通俗易懂的语言彻底地理解它。
盒模型CSS 盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型 所生成的矩形盒子。简单来说，盒模型定义了一个 矩形盒子，当我们需要对文档进行布局时，浏览器的渲染引擎就会根据盒模型，将所有元素表示为一个个矩形的盒子，盒子的外观由 CSS 决定。
一个标准的盒子由四个部分组成，由内向外分别为：内容，内边距，边框，外边距：
标准的盒模型中，内容区域的大小可以明确地通过 width，min-width，max-width，height，min-height，max-height 控制，也就是说，通过 CSS 设置的元素宽高只是包含内容区域。你可能听说过 怪异盒模型，这种盒模型最早在 IE 浏览器中出现，也叫 IE盒模型，box-sizing 属性值为 border-box 时，元素会呈现怪异盒模型，此时，元素的宽高包含了内容，内边距和边框。
视觉格式化模型CSS 视觉格式化模型描述了盒子是怎样生成的，简单来说，它定义了盒 ...
什么是微前端
微前端的出现的背景和意义微前端是什么：微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
微前端诞生在两个大的背景下，在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷，并且随着 Web 标准的演进，前端应用已经具备更好的性能、更快的开发效率。但随着而来的是应用的复杂程度更高、涉及的团队规模更广、更高的性能要求，应用复杂度已经成为阻塞业务发展的重要瓶颈。
微前端就是诞生于 Web 应用日益复杂化的场景中，因为随着网络速度、计算机硬件水平的提升和 Web 标准的演进，过去 Web 应用用户体验远不如传统的应用软件时代已逐渐远去，两者之间在用户体验上的差距不断缩减，并且由于 Web 应用开发速度快、用完即走等特性，导致的一个最终结果就是「能用 Web 技术实现的应用，最终都会通过 Web 来实现」。在近几年涌现了一大批之前只能在传统 PC 软件中才能看到的优秀产品，例如：Photoshop、Web Office、Web IDE。尽管随着 Web 标准 ...
