（因字数限制分为上下文，最后的思惟导图整理在下篇）javascript

系列以下：以为有用要点赞！✨css

二本得到实习阿里 offer 经历-准备篇 | 创做者训练营第二期

二本得到实习阿里 offer 经历-面经篇 | 创做者训练营第二期

二本得到阿里实习 offer 经历-宝藏篇（上）

二本得到阿里实习 offer 经历-宝藏篇（下）

前言

滴滴滴！本身整了一年半载的知识点回顾，又历经了 3 个月的春招实习面试，呜呜呜呜呜（一直呜呜呜），幸运的是本身也最终得到到阿里的 offer。在期间受到了不少小友的帮助，巩固了自身的前端基础知识。平时本身也有记录和整理对应的知识，以此机会，总结这段时间来 "挖掘" 这一些让我成功 “上岸” 的宝藏吧。「笔者真实经历的面试题都含括在内了喔！」html

备注：每一个宝藏的开头都有笔者粗略的思惟导图噢，能够看着思惟导图作自身的查漏补缺（小弟我就是这么作的！）前端

在整理完对应的思惟导图后，因近期一直在准备软考还有其余各类事情，这一篇本身拖了很久很久才写耶。我我的建议是这篇文章能够对本身面试的要点作查漏补缺，而不是详细的知识点字典噢！对某个要点本身过遍脑子，以为必要能够本身整理自身特定的读书笔记！那就开始开始开始！html5

HTML

导入

link 和 @import区别

- 从属关系区别。 
  - @import 是 CSS 提供的语法规则，只有导入样式表的做用；
  - link 是 HTML 提供的标签，不只能够加载 CSS 文件，还能够定义 RSS、rel 链接属性、引入网站图标等。
- 加载顺序区别。加载页面时
  - link 标签引入的 CSS 被同时加载；
  - @import 引入的 CSS 将在页面加载完毕后被加载。
- 兼容性区别。
  - @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
  - link 标签做为 HTML 元素，不存在兼容 性问题。
- DOM 可控性区别。
  - 能够经过 JS 操做 DOM ，插入 link 标签来改变样式；
  - 因为 DOM 方法是基于文档的，没法使用 @import 的方式插入样式。
复制代码

SEO

- 合理的 title、description、keywords
  - 搜索对着三项的权重逐个减少。
  - title 值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面 title 要有所不一样
  - description 把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面 description 有所不一样
  - keywords 列举出重要关键词便可。
- 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
- 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容确定被抓取。
- 重要内容不要用 js 输出：爬虫不会执行 js 获取内容
- 少用 iframe：搜索引擎不会抓取 iframe 中的内容
- 非装饰性图片必须加 alt
- 提升网站速度：网站速度是搜索引擎排序的一个重要指标
复制代码

常见 meta

<meta> 元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词者
<meta name=”author” content=”name, email@gmail.com”/>    网页做
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
复制代码

attribute 和 property 的区别

- attribute 是 dom 元素在文档中做为 html 标签拥有的属性；
- property 就是 dom 元素在 js 中做为对象拥有的属性。
  - 对于 html 的标准属性来讲，attribute 和 property 是同步的，是会自动更新的，可是对于自定义的属性来讲，他们是不一样步的。
复制代码

构建页面

构建页面分为：渐进加强，优雅降级。
复制代码

优化

前端性能优化主要是为了提升页面的加载速度，优化用户的访问体验。

- 页面的内容方面
（1）经过文件合并、css 雪碧图、使用 base64 等方式来减小 HTTP 请求数，避免过多的请求形成等待的状况。
（2）经过 DNS 缓存等机制来减小 DNS 的查询次数。
（3）经过设置缓存策略，对经常使用不变的资源进行缓存。
（4）使用延迟加载的方式，来减小页面首屏加载时须要请求的资源。延迟加载的资源当用户须要访问时，再去请求加载。
（5）经过用户行为，对某些资源使用预加载的方式，来提升用户须要访问资源时的响应速度。

- 服务器方面
（1）使用 CDN 服务，来提升用户对于资源请求时的响应速度。
（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少文件的体积。
（3）尽量减少 cookie 的大小，而且经过将静态资源分配到其余域名下，来避免对静态资源请求时携带没必要要的 cookie

-  CSS 和 JavaScript 方面
（1）把样式表放在页面的 head 标签中，减小页面的首次渲染的时间。
（2）避免使用 @import 标签。
（3）尽可能把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。
（4）经过对 JavaScript 和 CSS 的文件进行压缩，来减少文件的体积。
复制代码

HTML5

新特性

canvascss3
存储nginx

语义化标签web

（1） 用正确的标签作正确的事情。
（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3） 即便在没有样式 CSS 状况下也以一种文档格式显示，而且是容易阅读的;
（4） 搜索引擎的爬虫也依赖于 HTML 标记来肯定上下文和各个关键字的权重，利于 SEO ;
（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解，无障碍。
复制代码

媒体

移除元素

- 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
- 对可用性产生负面影响的元素：frame，frameset，noframes；
复制代码

兼容问题

（1）IE8/IE7/IE6 支持经过 document.createElement 方法产生的标签，能够利用这一特性让这些浏览器，支持 HTML5 新标签，浏览器支持新标签后，还须要添加标签默认的样式。

（2）固然也能够直接使用成熟的框架，好比 html5shiv ;
复制代码

<!--[if lt IE 9]> <script> src="https://cdn.jsdelivr.net/npm/html5shiv/dist/html5shiv.min.js"</script> <![endif]-->
复制代码

[if lte IE 9]……[endif] 判断 IE 的版本，限定只有 IE9 如下浏览器版本须要执行的语句。

元素

HTML4

需熟悉常见的行内元素及块级元素。
- 行内元素
- 块级元素
复制代码

HTML5

- 七类元素
  - Metadata 
  - Flow 
  - Sectioning 
  - Heading 
  - Phrasing 
  - Embedded 
  - Interactive
复制代码

空元素

标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。

常见的空元素有：`br` 、`hr` 、`img`、 `input`、 `link`、 `meta`
复制代码

文档

DOCTYPE

标准模式与兼容模式

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。

文档类型/区别

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是全部电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。

XML 是可扩展标记语言是将来网页语言的发展方向。

- XML 和 HTML 的最大区别就在于 XML 的标签是能够本身建立的，数量无限多，而 HTML 的标签都是固定的并且数量有限。
- XHTML 也是如今基本上全部网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都同样，用法也都同样，就是比 HTML 更严格，好比标签必须都用小写，标签都必须有闭合标签等。
复制代码

CSS

布局方式

两栏布局

两栏布局通常指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。

- 以左边宽度固定为 200px 为例
  - （1）利用浮动，将左边元素宽度设置为 200px，而且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
  - （2）第二种是利用 flex 布局，将左边元素的放大和缩小比例设置为 0，基础大小设置为 200px。将右边的元素的放大比例设置为 1，缩小比例设置为 1，基础大小设置为 auto。
  - （3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，而且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
  - （4）第四种仍是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其他方向定位为 0。
复制代码

三栏布局

三栏布局通常指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。

- 这里以左边宽度固定为 100px，右边宽度固定为 200px 为例。
  - （1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。
  - （2）利用 flex 布局的方式，左右两栏的放大和缩小比例都设置为 0，基础大小设置为固定的大小，中间一栏设置为 auto。
  - （3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin 值，注意这种方式，中间一栏必须放到最后。
  - （4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，所以后面两列都被挤到了下一行，经过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
  - （5）双飞翼布局，双飞翼布局相对于圣杯布局来讲，左右位置的保留是经过中间列的 margin 值来实现的，而不是经过父元素的 padding 来实现的。本质上来讲，也是经过浮动和外边距负值来实现的。
复制代码

静态布局

就静态页面的布局
复制代码

流式布局

页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。
复制代码

自适应布局

自适应布局的特色是分别为不一样的屏幕分辨率定义布局，即建立多个静态布局，每一个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率能够切换不一样的静态局部（页面元素位置发生改变），但在每一个静态布局中，页面元素不随窗口大小的调整发生变化。能够把自适应布局看做是静态布局的一个系列。
复制代码

响应式布局

随着 CSS3 出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在全部终端上（各类尺寸的 PC、手机、手表、冰箱的 Web 浏览器等等）都能显示出使人满意的效果，对 CSS 编写者而言，在实现上不拘泥于具体手法，分别为不一样的屏幕分辨率定义布局，即页面元素宽度随着窗口调整而自动适配。
复制代码

弹性布局

flex！！！！！本身去看教程，哥！
复制代码

CSS3 新特性

伪类 | 伪元素

- css3 中使用单冒号来表示伪类，用双冒号来表示伪元素。
- 伪类通常匹配的是元素的一些特殊状态，如 hover、link 等伪元素通常匹配的特殊的位置，好比 after、before 等。
复制代码

opacity

透明度
复制代码

媒体查询

- 外联式语法
- 内嵌式语法
复制代码

动画

transform
transition
animation

阴影

渐变

优化

加载性能

（1）css 压缩：将写好的 css 进行打包压缩，能够减小不少的体积。    
（2）css 单同样式：当须要下边距和左边距的时候，不少时候选择: margin: top 0 bottom 0;但 margin-bottom: bottom; margin-left:left; 执行的效率更高。    
（3）减小使用 @import ,而建议使用 link，由于后者在页面加载时一块儿加载，前者是等待页面加载完成以后再进行加载。    
（4）雪碧图
复制代码

选择器性能

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历全部子元素来肯定是不是指定的元素等等；    
（2）若是规则拥有 ID 选择器做为其关键选择器，则不要为规则增长标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。    
（3）避免使用通配规则，如 *{} 计算次数惊人！只对须要用到的元素进行选择。    
（4）尽可能少的去对标签进行选择，而是用 class。    
（5）尽可能少的去使用后代选择器，下降选择器的权重值。后代选择器的开销是最高的，尽可能将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每个标签元素。    
（6）了解哪些属性是能够经过继承而来的，而后避免对这些属性重复指定规则。
复制代码

渲染性能

（1）慎重使用高性能属性：浮动、定位。    
（2）尽可能减小页面重排、重绘。    
（3）去除空规则：｛｝。空规则的产生缘由通常来讲是为了预留样式。去除这些空规则无疑能减小 css 文档体积。
（4）属性值为 0 时，不加单位。    
（5）属性值为浮动小数 0.，能够省略小数点以前的0。    
（6）标准化各类浏览器前缀：带浏览器前缀的在前。标准属性在后。    
（7）不使用 @import 前缀，它会影响css的加载速度。    
（8）选择器优化嵌套，尽可能避免层级过深。    
（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减小页面的请求次数，可是同时图片自己会变大，使用时，优劣考虑清楚，再使用。    
（10）正确使用 display 的属性，因为 display 的做用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。    
（11）不滥用 web 字体。对于中文网站来讲 WebFonts 可能很陌生，国外却很流行。web fonts 一般体积庞大，并且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。
复制代码

维护性能

（1）将具备相同属性的样式抽离出来，整合并经过 class 在页面中进行使用，提升 css 的可维护性。    
（2）样式与内容分离：将 css 代码定义到外部 css 中。
复制代码

兼容

各主流内核前缀：
mozilla 内核 ( firefox,flock 等) -moz
webkit 内核( safari,chrome 等) -webkit
opera 内核( opera 浏览器) -o
trident 内核( ie 浏览器) -ms

概念

CSS 加载渲染

- 不阻塞 DOM解析
- 阻塞 DOM 渲染
- 阻塞 JS
复制代码

继承

每个属性在定义中都给出了这个属性是否具备继承性，一个具备继承性的属性会在没有指定值的时候，会使用父元素的同属性的值来做为本身的值。    
通常具备继承性的属性有，字体相关的属性，font-size 和 font-weight 等。文本相关的属性，color 和 text-align等。表格的一些布局属性、列表属性如 list-style 等。还有光标属性 cursor、元素可见性 visibility。        
不是继承属性的时候，咱们也能够经过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。
复制代码

BFC

BFC 指的是块级格式化上下文，一个元素造成了 BFC 以后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到 BFC 中的内部元素。一个 BFC 就像是一个隔离区域，和其余区域互不影响。
通常来讲根元素是一个 BFC 区域，浮动和绝对定位的元素也会造成 BFC，display 属性的值为 inline-block、flex 这些属性时也会建立 BFC。还有就是元素的 overflow 的值不为 visible 时都会建立 BFC。

IFC

IFC 指的是行级格式化上下文，它有这样的一些布局规则：

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。    
（2）当一行不够的时候会自动切换到下一行。    
（3）行级上下文的高度由内部最高的内联盒子的高度决定。
复制代码

替换/非替换元素

选择符

（1）id 选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）
复制代码

优先级

优化

回流/重绘

1. 避免频繁使用 style，而是采用修改 class 的方式。
2. 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
3. 也能够先为元素设置 display: none，操做结束后再把它显示出来。由于在 display 属性为 none 的元素上进行的 DOM 操做不会引起回流和重绘
4. 使用 createDocumentFragment 进行批量的 DOM 操做。
5. 对于 resize、scroll 等进行防抖/节流处理。
6. 避免频繁读取会引起回流/重绘的属性，若是确实须要屡次使用，就用一个变量缓存起来。
7. 利用 CSS3 的transform、opacity、filter 这些属性能够实现合成的效果，也就是 GPU 加速。
复制代码

多端优化

属性

display 值
盒模型
- 如何转换
em/rem

position 值的定点

absolute：生成绝对定位的元素，相对于值不为 static 的第一个父元素的 padding box 进行定位，也能够理解为离本身这一级元素最近的一级 position 设置为 absolute 或者 relative 的父元素的 padding box 的左上角为原点的。
fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其元素自己所在正常位置进行定位。
static：默认值。没有定位，元素出如今正常的流中（忽略 top,bottom,left,right,z-index 声明）。
inherit：规定从父元素继承 position 属性的值。
复制代码

border

（1）border-width 却不支持百分比。
（2）border-style 的默认值是 none，有一部分人可能会误觉得是 solid。这也是单纯设置 border-width 或 border-color 没有边框显示的缘由。
（3）border-style: double 的表现规则：双线宽度永远相等，中间间隔±1。
（4）border-color 默认颜色就是 color 色值。
（5）默认 background 背景图片是相对于 padding box 定位的。
复制代码

line-height

（1）对于非替换元素的纯内联元素，其可视高度彻底由 line-height 决定。对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。
（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height 之因此起做用，就是经过改变“行距”来实现的。在 CSS 中，“行距”分散在当前文字的上方和下方，也就是即便是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，所以，也被称为“半行距”。
（3）行距 = line-height-font-size。
（4）border 以及 line-height 等传统 CSS 属性并无小数像素的概念。若是标注的是文字上边距，则向下取整；若是是文字下边距，则向上取整。
（5）对于纯文本元素，line-height 直接决定了最终的高度。可是，若是同时有替换元素，则 line-height 只能决定最小高度。
（6）对于块级元素，line-height 对其自己是没有任何做用的，咱们平时改变 line-height，块级元素的高度跟着变化其实是经过改变块级元素里面内联级别元素占据的高度实现的。
（7）line-height 的默认值是 normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前 font-size 相乘后的值。为百分比值时，其最终的计算值是和当前 font-size 相乘后的值。为长度值时原意不变。
（8）若是使用数值做为 line-height 的属性值，那么全部的子元素继承的都是这个值；可是，若是使用百分比值或者长度值做为属性值，那么全部的子元素继承的是最终的计算值。
（9）不管内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的。
（10）只要有“内联盒子”在，就必定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。而后，重点来了，在每一个“行框盒子”前面有一个宽度为 0 的具备该元素的字体和行高属性的看不见的“幽灵空白节点”。
复制代码

清除浮动

设置父级

设置 BFC

浮动
overflow
inline-block
复制代码

after 伪类

a 标签伪类

a 标签有四种状态：连接访问前、连接访问后、鼠标滑过、激活，分别对应四种伪类: link、:visited、:hover、:active；
复制代码

垂直居中方法

对于宽高固定的元素
（1）咱们能够利用 margin:0 auto 来实现元素的水平居中。
（2）利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，所以对应方向实现平分，能够实现水平和垂直方向上的居中。
（3）利用绝对定位，先将元素的左上角经过 top:50% 和 left:50% 定位到页面的中心，而后再经过 margin 负值来调整元素的中心点到页面的中心。
（4）利用绝对定位，先将元素的左上角经过 top:50% 和 left:50% 定位到页面的中心，而后再经过 translate 来调整元素的中心点到页面的中心。
（5）使用 flex 布局，经过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，而后它的子元素也能够实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，能够实现元素的垂直和水平的居中。
复制代码

包含块

包含块（containing block）就是元素用来计算和定位的一个框。
（1）根元素（不少场景下能够当作是`<html>`）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其余元素，若是该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 content box边界造成。
（3）若是元素 position:fixed，则“包含块”是“初始包含块”。
（4）若是元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素创建
复制代码

flex

margin 重叠问题

margin 重叠指的是在垂直方向上，两个相邻元素的 margin 发生重叠的状况。

通常来讲能够分为四种情形：

1. 第一种是相邻兄弟元素的 marin-bottom 和 margin-top 的值发生重叠。这种状况下咱们能够经过设置其中一个元素为 BFC 来解决。
2. 第二种是父元素的 margin-top 和子元素的 margin-top 发生重叠。它们发生重叠是由于它们是相邻的，因此咱们能够经过这一点来解决这个问题。咱们能够为父元素设置 border-top、padding-top 值来分隔它们，固然咱们也能够将父元素设置为 BFC 来解决。
3. 第三种是高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。它们发生重叠一个是由于它们相邻，一个是由于父元素的高度不固定。所以咱们能够为父元素设置 border-bottom、padding-bottom 来分隔它们，也能够为父元素设置一个高度，max-height 和 min-height 也能解决这个问题。固然将父元素设置为 BFC 是最简单的方法。
4. 第四种状况，是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。咱们能够经过为其设置 border、padding 或者高度来解决这个问题。
复制代码

隐藏图片会不会加载

（1）元素的背景图片

元素自己设置 display:none，会请求图片 
父级元素设置 display:none，不会请求图片 
样式没有元素使用，不会请求
:hover 样式下，触发时请求
复制代码

（2）img 标签图片任何状况下都会请求图片

省略溢出

单行

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
复制代码

多行

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为须要显示的行数*行高，好比这里咱们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
复制代码

元素隐藏

（1）使用 display:none; 隐藏元素，渲染树不会包含该渲染对象，所以该元素不会在页面中占据位置，也不会响应绑定的监听事件。
（2）使用 visibility:hidden; 隐藏元素。元素在页面中仍占据空间，可是不会响应绑定的监听事件。
（3）使用 opacity:0; 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，而且可以响应元素绑定的监听事件。
（4）经过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
（5）经过 z-index 负值，来使其余元素遮盖住该元素，以此来实现隐藏。
（6）经过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，可是不会响应绑定的监听事件。
（7）经过 transform:scale(0,0) 来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，可是不会响应绑定的监听事件。
复制代码

css reset 和 normalize.css

- css reset 是最先的一种解决浏览器间样式不兼容问题的方案，它的基本思想是将浏览器的全部样式都重置掉，从而达到全部浏览器样式保持一致的效果。可是使用这种方法，可能会带来一些性能上的问题，而且对于一些元素的没必要要的样式的重置，其实反而会形成多此一举的效果。

- 后面出现一种更好的解决浏览器间样式不兼容的方法，就是 normalize.css ，它的思想是尽可能的保留浏览器自带的样式，经过在原有的样式的基础上进行调整，来保持各个浏览器间的样式表现一致。相对与 css reset，normalize.css 的方法保留了有价值的默认值，而且修复了一些浏览器的 bug，并且使用 normalize.css 不会形成元素复杂的继承链。
复制代码

viewport

布局视口

第一个视口是布局视口，在移动端显示网页时，因为移动端的屏幕尺寸比较小，若是网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。因此移动端浏览器提供了一个 layout viewport 布局视口的概念，使用这个视口来对页面进行布局展现，通常 layout viewport 的大小为 980px，所以页面布局不会有太大的变化，咱们能够经过拖动和缩放来查看到这个页面。
复制代码

视觉视口

第二个视口指的是视觉视口，visual viewport 指的是移动设备上咱们可见的区域的视口大小，通常为屏幕的分辨率的大小。visual viewport 和 layout viewport的关系，就像是咱们经过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。
复制代码

理想视口

第三个视口是理想视口，因为 layout viewport 通常比 visual viewport 要大，因此想要看到整个页面必须经过拖动和缩放才能实现。因此又提出了 ideal viewport 的概念，ideal viewport 下用户不用缩放和滚动条就可以查看到整个页面，而且页面在不一样分辨率下显示的内容大小相同。ideal viewport 其实就是经过修改 layout viewport 的大小，让它等于设备的宽度，这个宽度能够理解为是设备独立像素，所以根据 ideal viewport 设计的页面，在不一样分辨率的屏幕下，显示应该相同。
复制代码

JS

数据类型

七大基本数据类型

【语言基础】-大大的红宝书（三）

String
Boolean

Number

以 0X、0x 开头的表示为十六进制。
以 0、0O、0o 开头的表示为八进制。
以 0B、0b 开头的表示为二进制格式
复制代码

isNaN 和 Number.isNaN

函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，所以非数字值传入也会返回 true ，会影响 NaN 的判断。
函数 Number.isNaN 会首先判断传入参数是否为数字，若是是数字再继续判断是否为 NaN ，这种方法对于 NaN 的判断更为准确。
复制代码

Null

Undefined

undefined 与 undeclared 区别
undefined 是已声明，未赋值。
undeclared 是还未声明。

undefined 与 null 区别
undefined 表明的含义是未定义，null 表明的含义是空对象。通常变量声明了但尚未定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，做为初始化。
当咱们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当咱们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。
复制代码

Symbol

表明建立后独一无二且不可变的数据类型
复制代码

BigInt

BigInt 是一种数字类型的数据，它能够表示任意精度格式的整数，使用 BigInt 能够安全地存储和操做大整数，即便这个数已经超出了 Number 可以表示的安全整数范围。
复制代码

引用数据类型

判断数据类型方式

常见三种

typeof

Object.prototype.toString.call()

[[Class]]

全部 typeof 返回值为 "object" 的对象（如数组）都包含一个内部属性 [[Class]]（咱们能够把它看做一个内部的分类，而非传统的面向对象意义上的类）。
这个属性没法直接访问，通常经过Object.prototype.toString(..) 来查看。
复制代码

instanceof

区别/优缺点

内置对象

js 中的内置对象主要指的是在程序执行前存在全局做用域里的由 js 定义的一些全局值属性、函数和用来实例化其余对象的构造函数对象。

标准内置对象的分类

（1）值属性，这些全局属性返回一个简单值，这些值没有本身的属性和方法。
    例如 Infinity、NaN、undefined、null 字面量

（2）函数属性，全局函数能够直接调用，不须要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。
    例如 eval()、parseFloat()、parseInt() 等

（3）基本对象，基本对象是定义或使用其余对象的基础。基本对象包括通常对象、函数对象和错误对象。
    例如 Object、Function、Boolean、Symbol、Error 等

（4）数字和日期对象，用来表示数字、日期和执行数学计算的对象。
    例如 Number、Math、Date

（5）字符串，用来表示和操做字符串的对象。
    例如 String、RegExp

（6）可索引的集合对象，这些对象表示按照索引值来排序的数据集合，包括数组和类型数组，以及类数组结构的对象。
    例如 Array

（7）使用键的集合对象，这些集合对象在存储数据时会使用到键，支持按照插入顺序来迭代元素。
    例如 Map、Set、WeakMap、WeakSet

（8）矢量集合，SIMD 矢量集合中的数据会被组织为一个数据序列。
    例如 SIMD 等

（9）结构化数据，这些对象用来表示和操做结构化的缓冲区数据，或使用 JSON 编码的数据。
    例如 JSON 等

（10）控制抽象对象
    例如 Promise、Generator 等

（11）反射
    例如 Reflect、Proxy

（12）国际化，为了支持多语言处理而加入 ECMAScript 的对象。
    例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其余
    例如 arguments
复制代码

模块化

发展历史

- 第一种是 CommonJS 方案，它经过 require 来引入模块，经过 module.exports 定义模块的输出接口。
    这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，由于在服务端文件都存储在本地磁盘，因此读取很是快，因此以同步的方式加载没有问题。
    但若是是在浏览器端，因为模块的加载是使用网络请求，所以使用异步加载的方式更加合适。
- 第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，全部依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。
- 第三种是 CMD 方案，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和 require.js的区别在于模块定义时对依赖的处理不一样和对依赖模块的执行时机的处理不一样。
- 第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块。这种方案和上面三种方案都不一样。参考 61。
复制代码

CommonJs和ES6模块化区别

- 加载
- 输出
- 导入
- this 指向
复制代码

AMD 和 CMD 规范区别

它们之间的主要区别有两个方面。
（1）第一个方面是在模块定义时对依赖的处理不一样。AMD 推崇依赖前置，在定义模块的时候就要声明其依赖的模块。而 CMD 推崇就近依赖，只有在用到某个模块的时候再去require。    
（2）第二个方面是对依赖模块的执行时机处理不一样。
    首先 AMD 和 CMD 对于模块的加载方式都是异步加载。不过它们的区别在于模块的执行时机，AMD 在依赖模块加载完成后就直接执行依赖模块，依赖模块的执行顺序和咱们书写的顺序不必定一致。
    而 CMD 在依赖模块加载完成后并不执行，只是下载而已，等到全部的依赖模块都加载好后，进入回调函数逻辑，遇到 require 语句的时候才执行对应的模块，这样模块的执行顺序就和咱们书写的顺序保持一致了。
复制代码

ES6 模块区别

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6 模块的运行机制与 CommonJS 不同。遇到模块加载命令 import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

this 的指向不一样

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，而后再从这个对象上面读取方法，这种加载称为“运行时加载”。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

模块加载器实现

事件

事件循环

node10以后
- 与浏览器事件循环一致

node10以前

六大宏任务

script 脚本的执行
setTimeout 
setInterval
setImmediate
I/O 操做
UI 渲染
复制代码

微任务

事件机制

事件代理/委托

冒泡

阻止冒泡：event.stopPropagation() 或者 ie 下的方法 event.cancelBubble = true;
复制代码

捕获

自定义事件

- new Event
- new customEvent
- document.createEvent('CustomEvent')+initEvent()
复制代码

事件监听

- addEventListener
复制代码

事件触发

- dispatchEvent
复制代码

延迟加载

编程

手撕 JS

节流
防抖
Promise
ajax
this
```
- call
- apply
- bind
复制代码
```

Array

- filter
- flat
- map
- reduve
复制代码

Object

- new
- create
- instanceof
- assign
复制代码

深拷贝

递归循环

假深拷贝

JSON 序列化

缺陷
  1. 时间对象 => 时间字符串
  2. RegExp、Error对象 => 空 {}
  3. function、undefined => 丢失
  4. NaN、Infinity、-Infinity => null
  5. 对象是由构造函数生成 => 丢弃对象的 constructor
  6. 没法对象自引用 => 报错
复制代码

Object.assign()

浮点数千位数

// 方法一
function format(number) {
  return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");
}
// 方法二
function format1(number) {
  return Intl.NumberFormat().format(number)
}
// 方法三
function format2(number) {
  return number.toLocaleString('en')
}
复制代码

精度问题

字符串解析编译

- eval
- new Function
- setTimeOut
- setInterval
复制代码

1000000个数据的解决办法

咱们须要思考的问题：该处理是否必须同步完成？数据是否必须按顺序完成？
解决办法：

（1）将数据分页，利用分页的原理，每次服务器端只返回必定数目的数据，浏览器每次只对一部分进行加载。
（2）使用懒加载的方法，每次加载一部分数据，其他数据当须要使用时再去加载。
（3）使用数组分块技术，基本思路是为要处理的项目建立一个队列，而后设置定时器每过一段时间取出一部分数据，而后再使用定时器取出下一个要处理的项目进行处理，接着再设置另外一个定时器。
复制代码

查找一篇英文文章中出现频率最高的单词

四位随机数

简单性能

代码

1.使用位运算代替一些简单的四则运算。
2.避免使用过深的嵌套循环。
3.不要使用未定义的变量。
4.当须要屡次访问数组长度时，能够用变量保存起来，避免每次都会去进行属性查找。
复制代码

移动端点击延迟

移动端点击有 300ms 的延迟是由于移动端会有双击缩放的这个操做，所以浏览器在 click 以后要等待 300ms，看用户有没有下一次点击，来判断此次操做是否是双击。还可能会形成点击穿透问题。
有三种解决办法：

1. 经过 meta 标签禁用网页的缩放。
2. 经过 meta 标签将网页的 viewport 设置为 ideal viewport。
3. 调用一些 js 库，好比 FastClick
复制代码

检测浏览器版本

检测 window.navigator.userAgent 的值，但这种方式很不可靠，由于 userAgent 能够被改写，而且早期的浏览器如 ie，会经过假装本身的 userAgent 的值为 Mozilla 来躲过服务器的检测。
功能检测，根据每一个浏览器独有的特性来进行判断，如 ie 下独有的 ActiveXObject。

V8垃圾回收机制

【变量、做用域与内存】-大大的红宝书（四）

- v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特色，一是新生的对象容易早死，另外一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。

- 新建立的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过屡次垃圾回收的对象被称为老生代。

- 新生代被分为 From 和 To 两个空间，To 通常是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当咱们执行垃圾回收算法的时候应用逻辑将会中止，等垃圾回收结束后再继续执行。
  这个算法分为三步：
  （1）首先检查 From 空间的存活对象，若是对象存活则判断对象是否知足晋升到老生代的条件，若是知足条件则晋升到老生代。若是不知足条件则移动 To 空间。
  （2）若是对象不存活，则释放对象的空间。
  （3）最后将 From 空间和 To 空间角色进行交换。

- 新生代对象晋升到老生代有两个条件：
  （1）第一个是判断是对象否已经通过一次 Scavenge 回收。若经历过，则将对象从 From 空间复制到老生代中；若没有经历，则复制到 To 空间。
  （2）第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，则对象直接晋升到老生代中。设置 25% 的缘由主要是由于算法结束后，两个空间结束后会交换位置，若是 To 空间的内存过小，会影响后续的内存分配。
复制代码

引用计数法

标记清除算法

- 标记阶段
- 清除阶段
复制代码

常见内存泄漏

1. 意外的全局变量
2. 被遗忘的计时器或回调函数
3. 脱离 DOM 的引用
4. 闭包（低版本 IE ）
复制代码

node 寻址

若是 X 是内置模块（好比 require('http')）

1. 返回该模块。
2. 再也不继续执行。
复制代码

若是 X 以 "./" 或者 "/" 或者 "../" 开头

1. 根据 X 所在的父模块，肯定 X 的绝对路径。
2. 将 X 当成文件，依次查找下面文件，只要其中有一个存在，就返回该文件，再也不继续执行。X、 X.js、X.json、X.node
3. 将 X 当成目录，依次查找下面文件，只要其中有一个存在，就返回该文件，再也不继续执行。
复制代码

若是 X 不带路径

1. 根据 X 所在的父模块，肯定 X 可能的安装目录。
2. 依次在每一个目录中，将 X 当成文件名或目录名加载。
复制代码

抛出 "not found"

设计模式

JavaScript 中常见设计模式整理

DOM 操做

documen.write 和 innerHTML 区别

- document.write 的内容会代替整个文档内容，会重写整个页面。
- innerHTML 的内容只是替代指定元素的内容，只会重写页面中的部份内容
复制代码

节点操做

建立

createDocumentFragment(node);
createElement(node);
createTextNode(text);
复制代码

添删改插

appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)
复制代码

查找

getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();
复制代码

属性操做

getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);
复制代码

虚拟 DOM

- 优缺点
- 比较 DOM 树差别
- 转为真实 DOM
复制代码

跨域

缘由

解决

1.经过 jsonp 跨域
2.document.domain + iframe 跨域
3.location.hash + iframe
4.window.name + iframe 跨域
5.postMessage 跨域
6.跨域资源共享（CORS)
7.nginx 代理跨域
8.nodejs 中间件代理跨域
9.WebSocket 协议跨域
复制代码

Ajax

它是 Asynchronous JavaScript and XML 的缩写，指的是经过 JavaScript 的异步通讯，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
复制代码

建立

1. 建立 XMLHttpRequest 对象，也就是建立一个异步调用对象
2. 建立一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新
复制代码

状态码

(0) 未初始化

此阶段确认XMLHttpRequest对象是否建立。
值为0表示对象已经存在。
复制代码

(1)载入

已调用send()方法，正在发送请求
值为1表示正在向服务端发送请求。 
复制代码

(2)载入完成

send()方法执行完成，接收服务器端的响应数据。
值为2表示已经接收彻底部响应数据。 
复制代码

(3)交互

此阶段解析接收到的服务器端响应数据。
状态3表示正在解析数据。 
复制代码

(4)完成

解析已经完成。
值为4表示数据解析完毕。
复制代码

整个XMLHttpRequest对象的生命周期应该包含以下阶段：【建立－初始化请求0－发送请求1－接收数据2－解析数据3－完成4 】

正则表达式

ES6

常见方法

数组

数组和字符串的转换方法：toString() toLocalString()、join() 其中 join() 方法能够指定转换为字符串时的分隔符。
数组尾部操做的方法 pop() 和 push()，push 方法能够传入多个参数。
数组首部操做的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法能够传入一个函数来进行比较，传入先后两个值，若是返回值为正数，则交换两个参数的位置。
数组链接的方法 concat() ，返回的是拼接好的数组，不影响原数组。
数组截取办法 slice()，用于截取数组中的一部分返回，不影响原数组。
数组插入方法 splice()，影响原数组查找特定项的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法
数组归并方法 reduce() 和 reduceRight() 方法
fill 方法用一个固定值填充一个数组中从起始索引到终止索引内的所有元素。
复制代码

常见属性

JS 常见概念

继承

【继承】-大大的红宝书

原型

p.__proto__
p.constructor.prototype
Object.getPrototypeOf(p)
复制代码

原型链

建立对象

ES6: class 类

ES6 前模拟类

工厂模式
  工厂模式的主要工做原理是用函数来封装建立对象的细节，从而经过调用函数来达到复用的目的。可是它有一个很大的问题就是建立出来的对象没法和某个类型联系起来，它只是简单的封装了复用代码，而没有创建起对象和类型间的关系。

构造函数模式

盗用构造函数
  大体基本思路为：在子类构造函数中调用父类构造函数。毕竟函数就是特定上下文中执行代码的简单对象，因此可使用 apply () 和 call() 方法以新建立的对象为上下文执行构造函数。
  盗用构造函数基本上虽然说解决了原型链继承的引用类型的缺陷，但也不能单独使用。

组合继承
  使用原型链继承原型上的属性和方法，而经过盗用构造函数继承实例属性。这样既能够把方法定义在原型上以实现重用，又可让每一个实例都有本身的属性。

原型式继承
  由于每个函数都有一个 prototype 属性，这个属性是一个对象，它包含了经过构造函数建立的全部实例都能共享的属性和方法。所以咱们可使用原型对象来添加公用属性和方法，从而实现代码的复用。
  这种方式相对于构造函数模式来讲，解决了函数对象的复用问题。可是这种模式也存在一些问题，一个是没有办法经过传入参数来初始化值，另外一个是若是存在一个引用类型如 Array 这样的值，那么全部的实例将共享一个对象，一个实例对引用类型值的改变会影响全部的实例。

寄生式继承
  基本思路相似于寄生构造函数和工厂模式：建立一个实现继承的函数，以某种方式加强对象，而后返回这个对象。
  寄生式继承一样适合主要关注对象，而不在意类型的构造函数的场景。Object.create() 函数不是寄生式继承所必需的，任何返回对象的函数均可以在这里使用。

寄生式组合继承
  寄生式组合继承经过盗用结构函数继承属性，且使用混合式原型链继承方法。
  基本思路：使用寄生式继承来继承父类原型，将返回的新对象赋值给子类原型。
复制代码

做用域

【变量、做用域与内存】-大大的红宝书（四）

执行上下文
变量提高
let/const/var
做用域链

this

- 隐式更改
  常见状况
    严格模式
    非严格模式
  箭头函数

- 显式更改
  call/apply/bind
    (手撕)
    (区别)
复制代码

闭包

概念及实现
    闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见的方式就是在一个函数内建立另外一个函数，建立的函数能够访问到当前函数的局部变量。

闭包有两个经常使用的用途。
    1.闭包的第一个用途是使咱们在函数外部可以访问到函数内部的变量。经过使用闭包，咱们能够经过在外部调用闭包函数，从而在外部访问到函数内部的变量，可使用这种方法来建立私有变量。
    2.函数的另外一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，由于闭包函数保留了这个变量对象的引用，因此这个变量对象不会被回收。

其实闭包的本质就是做用域链的一个特殊的应用，只要了解了做用域链的建立过程，就可以理解闭包的实现原理。

- 内存泄漏排查
  chrome开发者工具
    Performance
    memory
复制代码

异步

异步发展史

Promise

理解
静态方法的实现
复制代码

async
- 与promise的区别

hasOwnProperty

全部继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法能够用来检测一个对象是否含有特定的自身属性，和 in 运算符不一样，该方法会忽略掉那些从原型链上继承到的属性。
复制代码

JSON

JSON 是一种基于文本的轻量级的数据交换格式。它能够被任何的编程语言读取和做为数据格式来传递。

在项目开发中，咱们使用 JSON 做为先后端数据交换的方式。在前端咱们经过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，而后将它传递到后端，后端经过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现先后端数据的一个传递。

由于 JSON 的语法是基于 js 的，所以很容易将 JSON 和 js 中的对象弄混，可是咱们应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，好比说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，所以大多数的 js 对象是不符合 JSON 对象的格式的。

在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理。
  JSON.stringify 函数，经过传入一个符合 JSON 格式的数据结构，将其转换为一个 JSON 字符串。若是传入的数据结构不符合 JSON 格式，那么在序列化的时候会对这些值进行对应的特殊处理，使其符合规范。在前端向后端发送数据时，咱们能够调用这个函数将数据对象转化为 JSON 格式的字符串。
  JSON.parse() 函数，这个函数用来将 JSON 格式的字符串转换为一个 js 数据结构，若是传入的字符串不是标准的 JSON 格式的字符串的话，将会抛出错误。当咱们从后端接收到 JSON 格式的字符串时，咱们能够经过这个方法来将其解析为一个 js 数据结构，以此来进行数据的访问。
复制代码

Object.definePropertype() 与 Proxy

延迟加载

- 放入底部
- defer
- async
- 动态建立 DOM
- setTimeout 延迟
复制代码

类数组对象

概念

一个拥有 length 属性和若干索引属性的对象就能够被称为类数组对象，类数组对象和数组相似，可是不能调用数组的方法。
常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也能够被看做是类数组对象，由于它含有 length 属性值，表明可接收的参数个数。
复制代码

转换

Array.prototype.slice.call(arrayLike);
Array.prototype.splice.call(arrayLike, 0);
Array.prototype.concat.apply([], arrayLike);
Array.from(arrayLike);
[...arrayLike]
复制代码

Polyfill

Polyfill 指的是用于实现浏览器并不支持的原生 API 的代码。
复制代码

编码

escape,encodeURL,encodeURLComponent

encodeURI 是对整个 URI 进行转义，将 URI 中的非法字符转换为合法字符，因此对于一些在 URI 中有特殊意义的字符不会进行转义。
encodeURIComponent 是对 URI 的组成部分进行转义，因此一些特殊字符也会获得转义。
escape 和 encodeURI 的做用相同，不过它们对于 unicode 编码为 0xff 以外字符的时候会有区别，escape 是直接在字符的 unicode 编码前加上 %u，而 encodeURI 首先会将字符转换为 UTF-8 的格式，再在每一个字节前加上 %。
复制代码

Unicode 与 UTF-8

Unicode 是一种字符集合，如今可容纳 100 多万个字符。每一个字符对应一个不一样的 Unicode 编码，它只规定了符号的二进制代码，却没有规定这个二进制代码在计算机中如何编码传输。
UTF-8 是一种对 Unicode 的编码方式，它是一种变长的编码方式，能够用 1~4 个字节来表示一个字符。
复制代码

Unicode 是一本字典，UTF-8 是怎么样使用这个字典。

常见问题

点这点这✨
二本得到阿里实习 offer 经历-宝藏篇（下）