垃圾回收机制介绍下面这段话引自《JavaScript权威指南（第四版）》： 由于字符串、对象和数组没有固定大小，所以当它们大小已知时，才能对它们进行动态的存储分配。JavaScript程序每次创建字符串、对象或数组时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存。最终都要释放这些内存以便它们能够被再用，否则，JavaScript的解释器将会消耗完系统的内存，造成系统崩溃。 ​ 这段话解释了为什么需要系统垃圾回收，JS不详C语言或者C++，它有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一个对象了，当它确定了一个对象没用了以后，它就会把这个对象占用的内存释放掉。 ​ JS的垃圾回收机制是为了防止内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，造成内存的浪费。垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。C#、Java、JavaScript有自动垃圾回收机制，但c++和c就没有垃圾回收机制，也许是因为垃圾回收机制必须 ...

我们在页面布局的时候，经常会出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ 。。。 归根到底是元素之间的互相影响，导致了预期之外的情况的发生。这里就涉及到了BFC的概念 BFC的概念 BFC（Block formatting context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。 BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。 如果一个元素符合出发BFC的条件，则BFC中的元素布局不受外部影响。 如果浮动元素会创建BFC，则浮动元素内部的子元素都受到该浮动元素的影响，所以浮动元素之间是互不影响的。 BFC的特性 BFC是一个独立的容器，容器内子元素不会影响容器外的元素，反之亦是如此。 盒子从顶端开始垂直的一个一个的排列，盒子之间垂直的间距是由margin决定的。 在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生 ...

介绍​ 异步行为是JavaScript的基础，但以前实现不理想。在早先的JavaScript中，只支持定义回调函数来表明异步函数操作完成。串联多个异步操作是一个常见的问题，通常需要深度嵌套回调函数（俗称“回调地狱”）来解决。 ​ 为了解决地狱回调这个问题，ES6根据Promise/A+规范，实现了一个Promise，可以将异步行为以同步行为的流程表达出来。 Promise/A+规范​ 一个Promise代表一个异步操作的最终结果，主要操作方法是通过调用promise的then方法，它接受的回调函数接受promise成功的结果或失败的原因。 1、术语 promise是一个有符合此标准的then方法的object或function thenable是then方法定义的object或function value是一个JavaScript合法值（包括undefined，thenable，promise） exception是一个throw语句抛出的错误 reason是一个表明promise失败的原因的值 2、要求 Promise状态一个promise ...

最近参与开发了一个新项目，想着新项目就用用自己不熟悉的技术，一边学习一边进步，于是把目光瞄向了TypeScript，话不多说，直接开干。 一、创建项目项目搭建选择的是VueCli搭建的，写的时候试了一下发现Element-ui对vue3还没做支持，于是用的vue2+vue-property-decorator扩展（cli创建项目的时候自动引入了）配合TypeScript写的，css样式用scss写的。 二、项目结构1、挂载全局方法封装Vue的原因是我想把api接口挂载到原型链上 1Vue.prototype.$XXX = XXX; 这样就不用在每个文件里手动引一次了，但是TS会报下面的错： 1Property '$XXX' does not exist on type 'XXX'. 这时候不管这个错误能正常发送请求，能拿到请求的数据，但是打包的时候就GG了，build不成功，因为有代码逻辑有error (￣▽￣)” ，上网查Vue官方的解决方案如下： 1234567891011121314151617181920212223242526272 ...

众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案。下面列出几种最近在网上找到的几种方案。 SSR服务器渲染 静态化 预渲染 prerender-spa-plugin + vue-meta-info 搜索引擎工作原理 爬虫抓取网页内容一般爬虫抓取页面内容是从一个页面出发，从中提取其他页面的链接，然后当作下一个请求的对象，一直重复这个过程。所以要有良好的seo，需要你在各大网站上拥有外链，这样子会提高你的网站被搜索引擎爬虫的几率。 分析网页内容爬虫拿到HTML之后，就会对其内容进行分析。一般要去杂、分词、建立索引数据库等。什么是索引数据库呢？简单的说就是记录一个词在哪些文档中出现、出现次数、出现的位置等等。建立索引数据库可以方便快速查找 搜索和排序搜索会根据你输入的关键字，分别查询其对应的索引数据库，并对结果进行处理和排序。 那么为什么前后端分离不利于SEO呢？ 搜索引擎的基础爬虫原理就是抓取你的url，然后获取你的html源代码并解析。而你的页面通常用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是你的模型页面而不是最终数据的渲染页面， ...

语义化的含义语义化，我的理解是根据内容使用有含义的标签或设置有含义的属性。 语义化的作用 HTML结构更加清晰，有助于阅读和维护 方便机器识别内容，有助于SEO 语义化标签我把语义化标签分为两类，一类是用于构建结构的容器标签，一类是指定具体含义的标签。以下内容摘自MDN。 构建结构的容器标签header用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 使用说明： header 元素不是分段内容，因此不会往 大纲 中引入新的段落。也就是说，header元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。 main呈现应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 使用说明： 这部分内容在文档中应当是独一无二的，不包含在任何一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站 Logo，搜索框（除非搜索框为文档的主要功能）。 main对文档的大纲没有贡献;也就是说，与诸如body之类的元素，诸如h2之 ...

CSS盒模型当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型，将所有的元素表示为一个个矩形的盒子。CSS决定这些盒子的大小、位置以及属性（例如颜色，背景，边框尺寸等）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义： ​ Content 、Padding、Border、Margin CSS术语和概念长度单位:CSS中的长度单位有时间单位（如s，ms），还有角度单位（如deg，rad等），但是最常见的自然还是长度单位（如px，em等）。需要注意的是，诸如2%后面的百分号%不是长度单位，因为2%就是一个完整的值，就是一个整体，就像0.02是一个值那样，2%也是一个值。 1<number> + 长度单位 = <length> 如果细分，长度单位又可以分为相对长度单位和绝对长度单位。 相对长度单位。相对长度又分为相对字体长度单位和相对视区长度单位。 相对字体长度单位，如em，ex，还有CSS3的rem和ch（字符0的宽度） 相对视区长度单位，如vh、vw、vmin和vmax。 绝对长度单位： ...

基本匹配正则表达式只是我们用于在文本中检索字母和数字的模式。例如正则表达式 cat，表示: 字母 c 后面跟着一个字母 a，再后面跟着一个字母 t。 1"cat" => The cat sat on the mat 正则表达式 123 会匹配字符串 “123”。通过将正则表达式中的每个字符逐个与要匹配的字符串中的每个字符进行比较，来完成正则匹配。 正则表达式通常区分大小写，因此正则表达式 Cat 与字符串 “cat” 不匹配。 1"Cat" => The cat sat on the Cat 元字符元字符是正则表达式的基本组成元素。元字符在这里跟它通常表达的意思不一样，而是以某种特殊的含义去解释。有些元字符写在方括号内的时候有特殊含义。 元字符如下: 元字符 描述 . 匹配除换行符以外的任意字符。 [ ] 字符类，匹配方括号中包含的任意字符。 [^ ] 否定字符类。匹配方括号中不包含的任意字符 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式一次或多次 ? 匹配前面的子表达式零次或一次，或指 ...

水平垂直居中包括行内元素居中，以及块级元素居中 行内元素html结构123<div class="outer"> <span class="inner"></span> </div> 块级元素结构123<div class="outer"> <div class="inner"></div> </div> 基础样式123456789101112<style>.outer { width: 400px; height: 400px; border: 1px solid red;}.outer .inner { width: 50px; height: 50px; border: 1px solid blue;}</style> 水平居中行内元素（最简单 text-align: center）123.ou ...