关于javascript:前端必会面试题总结

1.0 协定缺点:

无奈复用链接，实现即断开，从新慢启动和 TCP 3次握手
head of line blocking: 线头阻塞，导致申请之间相互影响

1.1 改良:

长连贯(默认 keep-alive)，复用
host 字段指定对应的虚构站点
新增性能:
- 断点续传
- 身份认证
- 状态治理
- cache 缓存
  - Cache-Control
  - Expires
  - Last-Modified
  - Etag

2.0:

多路复用
二进制分帧层: 应用层和传输层之间
首部压缩
服务端推送

https: 较为平安的网络传输协定

证书(公钥)
SSL 加密
端口 443

TCP:

三次握手
四次挥手
滑动窗口: 流量管制
拥塞解决
- 慢开始
- 拥塞防止
- 疾速重传
- 疾速复原

缓存策略: 可分为强缓存和协商缓存

Cache-Control/Expires: 浏览器判断缓存是否过期，未过期时，间接应用强缓存，Cache-Control的 max-age 优先级高于 Expires
当缓存曾经过期时，应用协商缓存
- 惟一标识计划: Etag(response 携带) & If-None-Match(request携带，上一次返回的 Etag): 服务器判断资源是否被批改
- 最初一次批改工夫: Last-Modified(response) & If-Modified-Since(request，上一次返回的Last-Modified)
  - 如果统一，则间接返回 304 告诉浏览器应用缓存
  - 如不统一，则服务端返回新的资源
Last-Modified 毛病：
- 周期性批改，但内容未变时，会导致缓存生效
- 最小粒度只到 s，s 以内的改变无奈检测到
Etag 的优先级高于Last-Modified

HTTP Request Header 常见的申请头：

Accept: 浏览器可能解决的内容类型
Accept-Charset: 浏览器可能显示的字符集
Accept-Encoding：浏览器可能解决的压缩编码
Accept-Language：浏览器以后设置的语言
Connection：浏览器与服务器之间连贯的类型
Cookie：以后页面设置的任何 Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的 URL
User-Agent：浏览器的用户代理字符串

HTTP Responses Header 常见的响应头：

Date：示意音讯发送的工夫，工夫的形容格局由 rfc822 定义
server: 服务器名称
Connection：浏览器与服务器之间连贯的类型
Cache-Control：管制 HTTP 缓存
content-type: 示意前面的文档属于什么 MIME 类型

常见的 Content-Type 属性值有以下四种：

（1）application/x-www-form-urlencoded：浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 形式提交数据。该种形式提交的数据放在 body 外面，数据依照 key1=val1&key2=val2 的形式进行编码，key 和 val 都进行了 URL 转码。

（2）multipart/form-data：该种形式也是一个常见的 POST 提交形式，通常表单上传文件时应用该种形式。

（3）application/json：服务器音讯主体是序列化后的 JSON 字符串。

（4）text/xml：该种形式次要用来提交 XML 格局的数据。

罕用的布局单位包含像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的根底，一个像素示意终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS 像素和物理像素：

CSS 像素：为 web 开发者提供，在 CSS 中应用的一个形象单位；
物理像素：只与设施的硬件密度无关，任何设施的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位能够使得浏览器中的组件的宽和高随着浏览器的变动而变动，从而实现响应式的成果。个别认为子元素的百分比绝对于间接父元素。

（3）em 和 rem绝对于 px 更具灵活性，它们都是绝对长度单位，它们之间的区别：em 绝对于父元素，rem 绝对于根元素。

em： 文本绝对长度单位。绝对于以后对象内文本的字体尺寸。如果以后行内文本的字体尺寸未被人为设置，则绝对于浏览器的默认字体尺寸(默认 16px)。(绝对父元素的字体大小倍数)。
rem： rem 是 CSS3 新增的一个绝对单位，绝对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 能够实现简略的响应式布局，能够利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变动时让元素也随之变动。

（4）vw/vh是与视图窗口无关的单位，vw 示意绝对于视图窗口的宽度，vh 示意绝对于视图窗口高度，除了 vw 和 vh 外，还有 vmin 和 vmax 两个相干的单位。

vw：绝对于视窗的宽度，视窗宽度是 100vw；
vh：绝对于视窗的高度，视窗高度是 100vh；
vmin：vw 和 vh 中的较小值；
vmax：vw 和 vh 中的较大值；

vw/vh 和百分比很相似，两者的区别：

百分比（%）：大部分绝对于先人元素，也有绝对于本身的状况比方（border-radius、translate 等)
vw/vm：绝对于视窗的尺寸

利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 translate 来调整元素的中心点到页面的核心。该办法须要 思考浏览器兼容问题。

.parent {position: relative;} .child {position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

利用相对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，因而对应方向实现平分，能够实现程度和垂直方向上的居中。该办法实用于 盒子有宽高 的状况：

.parent {position: relative;}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 margin 负值来调整元素的中心点到页面的核心。该办法实用于 盒子宽高已知 的状况

.parent {position: relative;}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 本身 height 的一半 */
    margin-left: -50px;    /* 本身 width 的一半 */
}

应用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和程度方向上为居中对齐，而后它的子元素也能够实现垂直和程度的居中。该办法要 思考兼容的问题，该办法在挪动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

挪动端适配次要有两个维度：

适配不同像素密度， 针对不同的像素密度，应用 CSS 媒体查问，抉择不同精度的图片，以保障图片不会失真；
适配不同屏幕大小， 因为不同的屏幕有着不同的逻辑像素大小，所以如果间接应用 px 作为开发单位，会使得开发的页面在某一款手机上能够精确显示，然而在另一款手机上就会失真。为了适配不同屏幕的大小，应依照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，能够应用 rem，em，vw，vh 等绝对单位。

CSSSprites（精灵图），将一个页面波及到的所有图片都蕴含到一张大图中去，而后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位。

长处：

利用 CSS Sprites 能很好地缩小网页的 http 申请，从而大大提高了页面的性能，这是 CSS Sprites 最大的长处；
CSS Sprites能缩小图片的字节，把 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。

毛病：

在图片合并时，要把多张图片有序的、正当的合并成一张图片，还要留好足够的空间，避免板块内呈现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易呈现背景断裂；
CSSSprites在开发的时候相对来说有点麻烦，须要借助 photoshop 或其余工具来对每个背景单元测量其精确的地位。
保护方面：CSS Sprites在保护的时候比拟麻烦，页面背景有少许改变时，就要改这张合并的图片，无需改的中央尽量不要动，这样防止改变更多的CSS，如果在原来的中央放不下，又只能（最好）往下加图片，这样图片的字节就减少了，还要改变CSS。

参考前端进阶面试题具体解答

新增各种 CSS 选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
暗影和反射（Shadoweflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性突变（gradient）
旋转（transform）
减少了旋转, 缩放, 定位, 歪斜, 动画, 多背景

CSS 工程化是为了解决以下问题：

宏观设计：CSS 代码如何组织、如何拆分、模块构造怎么设计？
编码优化：怎么写出更好的 CSS？
构建：如何解决我的 CSS，能力让它的打包后果最优？
可维护性：代码写完了，如何最小化它后续的变更老本？如何确保任何一个共事都能轻松接手？

以下三个方向都是时下比拟风行的、普适性十分好的 CSS 工程化实际：

预处理器：Less、Sass 等；
重要的工程化插件：PostCss；
Webpack loader 等。

基于这三个方向，能够衍生出一些具备典型意义的子问题，这里咱们一一来看：

（1）预处理器：为什么要用预处理器？它的呈现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器反对咱们写一种相似 CSS、但理论并不是 CSS 的语言，而后把它编译成 CSS 代码：那为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？这就和原本用 JS 也能够实现所有性能，但最初却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽！要想晓得有了预处理器有多爽，首先要晓得的是传统 CSS 有多不爽。随着前端业务复杂度的进步，前端工程中对 CSS 提出了以下的诉求：

宏观设计上：咱们心愿能优化 CSS 文件的目录构造，对现有的 CSS 文件实现复用；
编码优化上：咱们心愿能写出构造清晰、扼要易懂的 CSS，须要它具备高深莫测的嵌套层级关系，而不是无差别的一铺到底写法；咱们心愿它具备变量特色、计算能力、循环能力等等更强的可编程性，这样咱们能够少写一些无用的代码；
可维护性上：更强的可编程性意味着更优质的代码构造，实现复用意味着更简略的目录构造和更强的拓展能力，这两点如果能做到，天然会带来更强的可维护性。

这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器广泛会具备这样的个性：

嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系；
反对定义 css 变量；
提供计算函数；
容许对代码片段进行 extend 和 mixin；
反对循环语句的应用；
反对将 CSS 文件模块化，实现复用。

（2）PostCss：PostCss 是如何工作的？咱们在什么场景下会应用 PostCss？

它和预处理器的不同就在于，预处理器解决的是类 CSS，而 PostCss 解决的就是 CSS 自身。Babel 能够将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是相似的事件：它能够编译尚未被浏览器广泛支持的先进的 CSS 语法，还能够主动为一些须要额定兼容的语法减少前缀。更强的是，因为 PostCss 有着弱小的插件机制，反对各种各样的扩大，极大地强化了 CSS 的能力。

PostCss 在业务中的应用场景十分多：

进步 CSS 代码的可读性：PostCss 其实能够做相似预处理器能做的工作；
当咱们的 CSS 代码须要适配低版本浏览器时，PostCss 的 Autoprefixer 插件能够帮忙咱们主动减少浏览器前缀；
容许咱们编写面向未来的 CSS：PostCss 可能帮忙咱们编译 CSS next 代码；

（3）Webpack 能解决 CSS 吗？如何实现？ Webpack 能解决 CSS 吗：

Webpack 在裸奔的状态下，是不能解决 CSS 的，Webpack 自身是一个面向 JavaScript 且只能解决 JavaScript 代码的模块化打包工具；
Webpack 在 loader 的辅助下，是能够解决 CSS 的。

如何用 Webpack 实现对 CSS 的解决：

Webpack 中操作 CSS 须要应用的两个要害的 loader：css-loader 和 style-loader
留神，答出“用什么”有时候可能还不够，面试官会狐疑你是不是在背答案，所以你还须要理解每个 loader 都做了什么事件：
- css-loader：导入 CSS 模块，对 CSS 代码进行编译解决；
- style-loader：创立 style 标签，把 CSS 内容写入标签。

在理论应用中，css-loader 的执行程序肯定要安顿在 style-loader 的后面。因为只有实现了编译过程，才能够对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无奈了解这坨货色的，它会无情报错。

解构是 ES6 提供的一种新的提取数据的模式，这种模式可能从对象或数组里有针对性地拿到想要的数值。1）数组的解构 在解构数组时，以元素的地位为匹配条件来提取想要的数据的：

const [a, b, c] = [1, 2, 3]

最终，a、b、c 别离被赋予了数组第 0、1、2 个索引位的值：

数组里的 0、1、2 索引位的元素值，精准地被映射到了左侧的第 0、1、2 个变量里去，这就是数组解构的工作模式。还能够通过给左侧变量数组设置空占位的形式，实现对数组中某几个元素的精准提取：

const [a,,c] = [1,2,3]

通过把两头位留空，能够顺利地把数组第一位和最初一位的值赋给 a、c 两个变量：

2）对象的解构 对象解构比数组构造略微简单一些，也更显弱小。在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的。当初定义一个对象：

const stu = {
  name: 'Bob',
  age: 24
}

如果想要解构它的两个自有属性，能够这样：

const {name, age} = stu

这样就失去了 name 和 age 两个和 stu 平级的变量：

留神，对象解构严格以属性名作为定位根据，所以就算调换了 name 和 age 的地位，后果也是一样的：

const {age, name} = stu

以下这些是假值：
• undefined
• null
• false
• +0、-0 和 NaN
• “”

假值的布尔强制类型转换后果为 false。从逻辑上说，假值列表以外的都应该是真值。

首先 Undefined 和 Null 都是根本数据类型，这两个根本数据类型别离都只有一个值，就是 undefined 和 null。

undefined 代表的含意是 未定义 ，null 代表的含意是 空对象。个别变量申明了但还没有定义的时候会返回 undefined，null 次要用于赋值给一些可能会返回对象的变量，作为初始化。

undefined 在 JavaScript 中不是一个保留字，这意味着能够应用 undefined 来作为一个变量名，然而这样的做法是十分危险的，它会影响对 undefined 值的判断。咱们能够通过一些办法取得平安的 undefined 值，比如说 void 0。

当对这两种类型应用 typeof 进行判断时，Null 类型化会返回“object”，这是一个历史遗留的问题。当应用双等号对两种类型的值进行比拟时会返回 true，应用三个等号时会返回 false。

await 在期待什么呢？ 一般来说，都认为 await 是在期待一个 async 函数实现。不过按语法阐明，await 期待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有非凡限定）。

因为 async 函数返回一个 Promise 对象，所以 await 能够用于期待一个 async 函数的返回值——这也能够说是 await 在等 async 函数，但要分明，它等的理论是一个返回值。留神到 await 不仅仅用于等 Promise 对象，它能够等任意表达式的后果，所以，await 前面理论是能够接一般函数调用或者间接量的。所以上面这个示例齐全能够正确运行：

function getSomething() {return "something";}
async function testAsync() {return Promise.resolve("hello async");
}
async function test() {const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}
test();

await 表达式的运算后果取决于它等的是什么。

如果它等到的不是一个 Promise 对象，那 await 表达式的运算后果就是它等到的货色。
如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞前面的代码，等着 Promise 对象 resolve，而后失去 resolve 的值，作为 await 表达式的运算后果。

来看一个例子：

function testAsy(x){return new Promise(resolve=>{setTimeout(() => {resolve(x);
     }, 3000)
    }
   )
}
async function testAwt(){let result =  await testAsy('hello world');
  console.log(result);    // 3 秒钟之后呈现 hello world
  console.log('cuger')   // 3 秒钟之后呈现 cug
}
testAwt();
console.log('cug')  // 立刻输入 cug

这就是 await 必须用在 async 函数中的起因。async 函数调用不会造成阻塞，它外部所有的阻塞都被封装在一个 Promise 对象中异步执行。await 暂停以后 async 的执行，所以 ’cug” 最先输入，hello world’ 和‘cuger’是 3 秒钟后同时呈现的。

提早加载就是等页面加载实现之后再加载 JavaScript 文件。js 提早加载有助于进步页面加载速度。

个别有以下几种形式：

defer 属性： 给 js 脚本增加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，而后在文档解析实现后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按标准来说最初是程序执行的，然而在一些浏览器中可能不是这样。
async 属性： 给 js 脚本增加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，然而当脚本加载实现后立刻执行 js 脚本，这个时候如果文档没有解析实现的话同样会阻塞。多个 async 属性的脚本的执行程序是不可预测的，个别不会依照代码的程序顺次执行。
动态创建 DOM 形式： 动态创建 DOM 标签的形式，能够对文档的加载事件进行监听，当文档加载实现后再动静的创立 script 标签来引入 js 脚本。
应用 setTimeout 提早办法： 设置一个定时器来提早加载 js 脚本文件
让 JS 最初加载： 将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最初来加载执行。

在说 Unicode 之前须要先理解一下 ASCII 码：ASCII 码（American Standard Code for Information Interchange）称为美国规范信息替换码。

它是基于拉丁字母的一套电脑编码零碎。
它定义了一个用于代表常见字符的字典。
它蕴含了 ”A-Z”(蕴含大小写)，数据 ”0-9″ 以及一些常见的符号。
它是专门为英语而设计的，有 128 个编码，对其余语言无能为力

ASCII码能够示意的编码无限，要想示意其余语言的编码，还是要应用 Unicode 来示意，能够说 Unicode 是ASCII 的超集。

Unicode全称 Unicode Translation Format，又叫做对立码、万国码、繁多码。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了对立并且惟一的二进制编码，以满足跨语言、跨平台进行文本转换、解决的要求。

Unicode的实现形式（也就是编码方式）有很多种，常见的是 UTF-8、UTF-16、UTF-32 和USC-2。

UTF-8是应用最宽泛的 Unicode 编码方式，它是一种可变长的编码方式，能够是 1—4 个字节不等，它能够齐全兼容 ASCII 码的 128 个字符。

留神： UTF-8 是一种编码方式，Unicode是一个字符汇合。

UTF-8的编码规定：

对于 单字节 的符号，字节的第一位为 0，前面的 7 位为这个字符的 Unicode 编码，因而对于英文字母，它的 Unicode 编码和 ACSII 编码一样。
对于 n 字节 的符号，第一个字节的前 n 位都是 1，第 n + 1 位设为 0，前面字节的前两位一律设为 10，剩下的没有提及的二进制位，全副为这个符号的 Unicode 码。

来看一下具体的 Unicode 编号范畴与对应的 UTF-8 二进制格局：

编码范畴（编号对应的十进制数）	二进制格局
0x00—0x7F（0-127）	0xxxxxxx
0x80—0x7FF（128-2047）	110xxxxx 10xxxxxx
0x800—0xFFFF（2048-65535）	1110xxxx 10xxxxxx 10xxxxxx
0x10000—0x10FFFF（65536 以上）	11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

那该如何通过具体的 Unicode 编码，进行具体的 UTF-8 编码呢？步骤如下：

找到该 Unicode 编码的所在的编号范畴，进而找到与之对应的二进制格局
将 Unicode 编码转换为二进制数（去掉最高位的 0）
将二进制数从右往左一次填入二进制格局的 X 中，如果有 X 未填，就设为 0

来看一个理论的例子：
“马 ”字的Unicode 编码是：0x9A6C，整数编号是39532（1）首选确定了该字符在第三个范畴内，它的格局是 1110xxxx 10xxxxxx 10xxxxxx（2）39532 对应的二进制数为1001 1010 0110 1100（3）将二进制数填入 X 中，后果是：11101001 10101001 10101100

1. 立体的概念

在理解 UTF-16 之前，先看一下立体的概念：Unicode编码中有很多很多的字符，它并不是一次性定义的，而是分区进行定义的，每个区寄存 65536（216）个字符，这称为一个立体，目前总共有 17 个立体。

最后面的一个立体称为 根本立体 ，它的码点从0 — 216-1，写成 16 进制就是U+0000 — U+FFFF，那剩下的 16 个立体就是 辅助立体，码点范畴是 U+10000—U+10FFFF。

2. UTF-16 概念：

UTF-16也是 Unicode 编码集的一种编码模式，把 Unicode 字符集的形象码位映射为 16 位长的整数（即码元）的序列，用于数据存储或传递。Unicode字符的码位须要 1 个或者 2 个 16 位长的码元来示意，因而 UTF-16 也是用变长字节示意的。

3. UTF-16 编码规定：

编号在 U+0000—U+FFFF 的字符（罕用字符集），间接用两个字节示意。
编号在 U+10000—U+10FFFF 之间的字符，须要用四个字节示意。

4. 编码辨认

那么问题来了，当遇到两个字节时，怎么晓得是把它当做一个字符还是和前面的两个字节一起当做一个字符呢？

UTF-16 编码必定也思考到了这个问题，在根本立体内，从 U+D800 — U+DFFF 是一个空段，也就是说这个区间的码点不对应任何的字符，因而这些空段就能够用来映射辅助立体的字符。

辅助立体共有 220 个字符位，因而示意这些字符至多须要 20 个二进制位。UTF-16 将这 20 个二进制位分成两半，前 10 位映射在 U+D800 — U+DBFF，称为高位（H），后 10 位映射在 U+DC00 — U+DFFF，称为低位（L）。这就相当于，将一个辅助立体的字符拆成了两个根本立体的字符来示意。

因而，当遇到两个字节时，发现它的码点在 U+D800 —U+DBFF之间，就能够晓得，它前面的两个字节的码点应该在 U+DC00 — U+DFFF 之间，这四个字节必须放在一起进行解读。

5. 举例说明

以 “𡠀” 字为例，它的 Unicode 码点为 0x21800，该码点超出了根本立体的范畴，因而须要用四个字节来示意，步骤如下：

首先计算超出局部的后果：0x21800 - 0x10000
将下面的计算结果转为 20 位的二进制数，有余 20 位就在后面补 0，后果为：0001000110 0000000000
将失去的两个 10 位二进制数别离对应到两个区间中
U+D800 对应的二进制数为 1101100000000000，将 0001000110 填充在它的后 10 个二进制位，失去 1101100001000110，转成 16 进制数为 0xD846。同理，低位为 0xDC00，所以这个字的UTF-16 编码为 0xD846 0xDC00

UTF-32 就是字符所对应编号的整数二进制模式，每个字符占四个字节，这个是间接进行转换的。该编码方式占用的贮存空间较多，所以应用较少。

比方“马”字的 Unicode 编号是：U+9A6C，整数编号是39532，间接转化为二进制：1001 1010 0110 1100，这就是它的 UTF-32 编码。

Unicode、UTF-8、UTF-16、UTF-32 有什么区别？

Unicode 是编码字符集（字符集），而 UTF-8、UTF-16、UTF-32 是字符集编码（编码规定）；
UTF-16 应用变长码元序列的编码方式，相较于定长码元序列的 UTF-32 算法更简单，甚至比同样是变长码元序列的 UTF-8 也更为简单，因为其引入了独特的 代理对 这样的代理机制；
UTF-8须要判断每个字节中的结尾标记信息，所以如果某个字节在传送过程中出错了，就会导致前面的字节也会解析出错；而 UTF-16 不会判断结尾标记，即便错也只会错一个字符，所以容错能力教强；
如果字符内容全副英文或英文与其余文字混合，但英文占绝大部分，那么用 UTF-8 就比 UTF-16 节俭了很多空间；而如果字符内容全副是中文这样相似的字符或者混合字符中中文占绝大多数，那么 UTF-16 就占优势了，能够节俭很多空间；

（1）SVG： SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩大标记语言 XML 形容的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，能够为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器可能主动重现图形。

其特点如下：

不依赖分辨率
反对事件处理器
最适宜带有大型渲染区域的应用程序（比方谷歌地图）
复杂度高会减慢渲染速度（任何适度应用 DOM 的利用都不快）
不适宜游戏利用

（2）Canvas： Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其地位产生扭转，就会从新进行绘制。

其特点如下：

依赖分辨率
不反对事件处理器
弱的文本渲染能力
可能以 .png 或 .jpg 格局保留后果图像
最适宜图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连贯的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具备色彩、形态、轮廓、大小和屏幕地位等属性。

HTTP 协定是基于 TCP/IP，并且应用了 申请 - 应答 的通信模式，所以性能的要害就在这两点里。

长连贯

HTTP 协定有两种连贯模式，一种是继续连贯，一种非继续连贯。
（1）非继续连贯指的是服务器必须为每一个申请的对象建设和保护一个全新的连贯。
（2）继续连贯下，TCP 连贯默认不敞开，能够被多个申请复用。采纳继续连贯的益处是能够防止每次建设 TCP 连贯三次握手时所破费的工夫。

对于不同版本的采纳不同的连贯形式：

在 HTTP/1.0 每发动一个申请，都要新建一次 TCP 连贯（三次握手），而且是串行申请，做了无畏的 TCP 连贯建设和断开，减少了通信开销。该版本应用的非继续的连贯，然而能够在申请时，加上 Connection: keep-a live 来要求服务器不要敞开 TCP 连贯。
在 HTTP/1.1 提出了 长连贯 的通信形式，也叫长久连贯。这种形式的益处在于缩小了 TCP 连贯的反复建设和断开所造成的额定开销，加重了服务器端的负载。该版本及当前版本默认采纳的是继续的连贯。目前对于同一个域，大多数浏览器反对同时建设 6 个长久连贯。
管道网络传输

HTTP/1.1 采纳了长连贯的形式，这使得管道（pipeline）网络传输成为了可能。

管道（pipeline）网络传输是指：能够在同一个 TCP 连贯外面，客户端能够发动多个申请，只有第一个申请收回去了，不用等其回来，就能够发第二个申请进来，能够缩小整体的响应工夫。然而服务器还是依照程序回应申请。如果后面的回应特地慢，前面就会有许多申请排队等着。这称为队头梗塞。

队头梗塞

HTTP 传输的报文必须是一发一收，然而，外面的工作被放在一个工作队列中串行执行，一旦队首的申请解决太慢，就会阻塞前面申请的解决。这就是 HTTP 队头阻塞问题。

队头阻塞的解决方案：（1）并发连贯：对于一个域名容许调配多个长连贯，那么相当于减少了工作队列，不至于一个队伍的工作阻塞其它所有工作。
（2）域名分片：将域名分出很多二级域名，它们都指向同样的一台服务器，可能并发的长连接数变多，解决了队头阻塞的问题。

use strict 是一种 ECMAscript5 增加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目标如下：

打消 Javascript 语法的不合理、不谨严之处，缩小怪异行为;
打消代码运行的不平安之处，保障代码运行的平安；
进步编译器效率，减少运行速度；
为将来新版本的 Javascript 做好铺垫。

区别：

禁止应用 with 语句。
禁止 this 关键字指向全局对象。
对象不能有重名的属性。

JavaScript 中的异步机制能够分为以下几种：

回调函数 的形式，应用回调函数的形式有一个毛病是，多个回调函数嵌套的时候会造成回调函数天堂，高低两层的回调函数间的代码耦合度太高，不利于代码的可保护。
Promise 的形式，应用 Promise 的形式能够将嵌套的回调函数作为链式调用。然而应用这种办法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。
generator 的形式，它能够在函数的执行过程中，将函数的执行权转移进来，在函数内部还能够将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移进来，当异步函数执行结束时再将执行权给转移回来。因而在 generator 外部对于异步操作的形式，能够以同步的程序来书写。应用这种形式须要思考的问题是何时将函数的控制权转移回来，因而须要有一个主动执行 generator 的机制，比如说 co 模块等形式来实现 generator 的主动执行。
async 函数 的形式，async 函数是 generator 和 promise 实现的一个主动执行的语法糖，它外部自带执行器，当函数外部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会期待 promise 对象的状态变为 resolve 后再持续向下执行。因而能够将异步逻辑，转化为同步的程序来书写，并且这个函数能够主动执行。

产生乱码的起因：

网页源代码是 gbk 的编码，而内容中的中文字是 utf-8 编码的，这样浏览器关上即会呈现 html 乱码，反之也会呈现乱码；
html网页编码是 gbk，而程序从数据库中调出出现是utf-8 编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

应用软件编辑 HTML 网页内容；
如果网页设置编码是gbk，而数据库贮存数据编码格局是UTF-8，此时须要程序查询数据库数据显示数据后退程序转码；
如果浏览器浏览时候呈现网页乱码，在浏览器中找到转换编码的菜单进行转换。

React 是一个网页 UI 框架，通过组件化的形式解决视图层开发复用的问题，实质是一个组件化框架。

它的外围设计思路有三点，别离是 申明式、组件化与通用性。
申明式的劣势在于直观与组合。
组件化的劣势在于视图的拆分与模块复用，能够更容易做到高内聚低耦合。
通用性在于一次学习，随处编写。比方 React Native，React 360 等，这里次要靠虚构 DOM 来保障实现。
这使得 React 的适用范围变得足够广，无论是 Web、Native、VR，甚至 Shell 利用都能够进行开发。这也是 React 的劣势。
但作为一个视图层的框架，React 的劣势也非常显著。它并没有提供残缺的一揽子解决方案，在开发大型前端利用时，须要向社区寻找并整合解决方案。尽管肯定水平上促成了社区的凋敝，但也为开发者在技术选型和学习实用上造成了肯定的老本。
承接在劣势后，能够再谈一下本人对于 React 优化的认识、对虚构 DOM 的认识

关于javascript:前端必会面试题总结

http/https 协定总结

常见的 HTTP 申请头和响应头

常见的 CSS 布局单位

程度垂直居中的实现

如何依据设计稿进行挪动端适配？

对 CSSSprites 的了解

CSS3 中有哪些新个性

对 CSS 工程化的了解

对对象与数组的解构的了解

其余值到布尔类型的值的转换规则？

null 和 undefined 区别

await 到底在等啥？

JavaScript 脚本提早加载的形式有哪些？

Unicode、UTF-8、UTF-16、UTF-32 的区别？

（1）Unicode

（2）UTF-8

（3）UTF-16

（4）UTF-32

（5）总结

Canvas 和 SVG 的区别

HTTP 协定的性能怎么样

use strict 是什么意思 ? 应用它区别是什么？

异步编程的实现形式？

浏览器乱码的起因是什么？如何解决？

谈谈你对 React 的了解

Just My Socks（注册教程内含优惠码）

关于javascript:前端必会面试题总结

http/https 协定总结

常见的 HTTP 申请头和响应头

常见的 CSS 布局单位

程度垂直居中的实现

如何依据设计稿进行挪动端适配？

对 CSSSprites 的了解

CSS3 中有哪些新个性

对 CSS 工程化的了解

对对象与数组的解构的了解

其余值到布尔类型的值的转换规则？

null 和 undefined 区别

await 到底在等啥？

JavaScript 脚本提早加载的形式有哪些？

Unicode、UTF-8、UTF-16、UTF-32 的区别？

（1）Unicode

（2）UTF-8

（3）UTF-16

（4）UTF-32

（5）总结

Canvas 和 SVG 的区别

HTTP 协定的性能怎么样

use strict 是什么意思 ? 应用它区别是什么？

异步编程的实现形式？

浏览器乱码的起因是什么？如何解决？

谈谈你对 React 的了解

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）