前端面试

最新推荐文章于 2023-03-27 14:44:42 发布

计算机技术之指尖密码

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量523

点赞数

分类专栏：计算机教程

本文链接：https://blog.csdn.net/w1374401940/article/details/106474986

版权

计算机教程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

## 转换驼峰命名(match与replace)

--------

>题目：小科去了一家新的公司做前端主管，发现里面的前端代码有一部分是 C/C++ 程序员写的，他们喜欢用下划线命名，例如： is_good。小科决定写个脚本来全部替换掉这些变量名。

完成 toCamelCaseVar 函数，它可以接受一个字符串作为参数，可以把类似于 is_good 这样的变量名替换成 isGood。变量名首尾的下划线不需要做处理，中间的下划线全部删除并且处理成驼峰。

## 题解一

```javascript

const toCamelCaseVar = variable => {

variable = variable.toString();

let regc = /(_+[a-zA-Z]+)/g;

variable = variable.replace(regc, (val, match,index) => {

if (!match) {

return val;

} else {

if (index != 0) {

match = match.replace(/_/g, '');

let firstLetter = match.slice(0, 1);

firstLetter = firstLetter.toUpperCase();

match = firstLetter + match.substr(1);

return match;

}

return match;

}

});

return variable

};

```

## 题解二

```javascript

const toCamelCaseVar = (variable) => {

return variable.replace(/_+[a-zA-Z]/g,(m, i) => {

if(i) return (m.match(/[a-zA-Z]/)[0].toUpperCase());

else return m;

})

}

```

--------

## JavaScript 正则表达式

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

--------

## 什么是正则表达式？

正则表达式是构成搜索模式（search pattern）的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

--------

## 语法

/pattern/modifiers;

实例

var patt = /grebell/i;

例子解释：

/grebell/i 是一个正则表达式。

grebell 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。

--------

## 使用字符串方法

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

* .search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

* .replace() 方法返回模式被替换处修改后的字符串。

使用字符串方法 search() 来处理字符串

search() 方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式：

实例

使用字符串来执行对 "grebell" 的搜索：

```javascript

var str = "Visit grebell!";

var n = str.search("grebell");

```

在字符串方法 search() 中使用正则表达式

实例

使用正则表达式执行搜索字符串中 "grebell" 的大小写不敏感的搜索：

```javascript

var str = "Visit grebell";

var n = str.search(/grebell/i);

```

n 中的结果将是：

使用字符串方法 replace() 处理字符串

replace() 也接受字符串作为搜索参数：

```javascript

var str = "Visit Microsoft!";

var res = str.replace("Microsoft", "grebell");

```

在字符串方法 replace() 中使用正则表达式

实例

使用大小写不明的正则表达式以 grebell 来替换字符串中的 Microsoft：

```javascript

var str = "Visit Microsoft!";

var res = str.replace(/microsoft/i, "grebell");

```

res 的结果将是：

Visit grebell!

您注意到了吗？

正则表达式参数（而不是字符串参数）可以在上面的方法中使用。

正则表达式可以使您的搜索更强大（例如，不区分大小写）。

--------

## 正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

|修饰符| 描述|

|----|----|

|i| 执行对大小写不敏感的匹配。|

|g |执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。|

|m |执行多行匹配。|

--------

## 正则表达式模式

括号用于查找一定范围的字符串：

|表达式| 描述|

|----|----|

|[abc]| 查找方括号之间的任何字符。|

|[0-9]| 查找任何从 0 至 9 的数字。|

|(x|y)| 查找由 ```|``` 分隔的任何选项。|

|元字符|（Metacharacter）是拥有特殊含义的字符：|

元字符描述

\d 查找数字。

\s 查找空白字符。

\b 匹配单词边界。

\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

Quantifiers 定义量词：

量词描述

n+ 匹配任何包含至少一个 n 的字符串。

n* 匹配任何包含零个或多个 n 的字符串。

n? 匹配任何包含零个或一个 n 的字符串。

--------

## 使用 RegExp 对象

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

使用 test()

test() 是一个正则表达式方法。

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

下面的例子搜索字符串中的字符 "e"：

实例

```javascript

var patt = /e/;

patt.test("The best things in life are free!");

```

由于字符串中有一个 "e"，以上代码的输出将是：

true

您不必首先把正则表达式放入变量中。上面的两行可缩短为一行：

```javascript

/e/.test("The best things in life are free!");

```

使用 exec()

exec() 方法是一个正则表达式方法。

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

如果未找到匹配，则返回 null。

下面的例子搜索字符串中的字符 "e"：

实例

```

/e/.exec("The best things in life are free!");

```

由于字符串中有一个 "e"，以上代码的输出将是：

--------

## 数组去重

--------

## 题解1

```javascript

function unique(arr){

return Array.from(new Set([...arr]));

}

unique([1,1,2,3,4,5,6,6]);

```

--------

## 题解2

```javascript

function unique(arr) {

let array = [];

for (let i = 0; i < arr.length; i++) {

if (array.length == 0)

array.push(arr[i]);

if (array.indexOf(arr[i]) == -1) {

array.push(arr[i]);

}

return array;

}

unique([1,1,2,3,4,5,6,6]);

```

--------

## 冒泡排序

## 题解

```javascript

function bubbleSort(arr){

if(arr.length==0)

return;

else{

for(let i=0;i<arr.length-1;i++){

for(let j=0;j<arr.length-i-1;j++){

let temp;

if(arr[j]>arr[j+1]){

temp=arr[j];

arr[j]=arr[j+1];

arr[j+1]=temp;

}

return arr;

}

console.log(bubbleSort([10, 1, 4, 5, 32, 6, 8, 2]));

```

--------

## reduce的用法

## 一、语法

```javascript

arr.reduce(function(prev,cur,index,arr){

...

}, init);

```

其中，

* .arr 表示原数组；

* .prev 表示上一次调用回调时的返回值，或者初始值 init;

* .cur 表示当前正在处理的数组元素；

* .index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；

* .init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~

## 二、实例

先提供一个原始数组：

```javascript

var arr = [3,9,4,3,6,0,9];

```

实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

1. 求数组项之和

```javascript

var sum = arr.reduce(function (prev, cur) {

return prev + cur;

},0);

```

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项最大值

```javascript

var max = arr.reduce(function (prev, cur) {

return Math.max(prev,cur);

});

```

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

3. 数组去重

```javascript

var newArr = arr.reduce(function (prev, cur) {

prev.indexOf(cur) === -1 && prev.push(cur);

return prev;

},[]);

```

实现的基本原理如下：

① 初始化一个空数组

② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中

③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中

④ ……

⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中

⑥ 将这个初始化数组返回

--------

## 预加载和懒加载

## 页面加载过程

简单说一下页面的加载过程，如果页面不是第一次访问，那么可能会出现浏览器缓存现象，在本地调试代码的时候也会遇到这种问题，所以在实在想不通页面为什么没有变化的时候，可以清除一下浏览器的缓存。

如果页面是第一次访问，浏览器向服务器http请求后，服务器返回html文件，在整个页面加载过程中，总的来说是按顺序从上到下执行，这是基于js的单线程机制，但是html和css是并行加载的，html生成dom树，css生成rule树，两者相结合生成render树。

接下来遇到js文件，则会造成堵塞，页面会一直等到js文件执行完才会进行下一步操作。

在进行html中body部分加载时，如果遇到图片的src，它会请求资源，此时图片还没下载完全，在页面上并不会留下图片的位置，而html不会堵塞，将会继续执行下去。

等到有图片请求下载完成，html又会重新渲染页面，将图片显示出来。

了解了页面的加载过程后更好理解预加载和懒加载，对页面进行更好的优化。

--------

## 预加载

## 预加载的核心：

图片等静态资源在使用前提前请求。

资源后续使用可以直接从缓存中加载，提升用户体验。

## 几个误区：

* .预加载不是为了减少页面加载时间

* .预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的图片。

--------

## 预加载的三种方式

## 仅使用css的情况:

```javascript

#preload-01 { background: url(img1.png); }

#preload-02 { background: url(img2.png); }

#preload-03 { background: url(img3.png); }

```

preload-01、preload-02、preload-03实际上是不会在页面上显示的，它们的作业就是为了预加载图片上面的图片。在执行了上面的css后，本地就已经有了上面的图片缓存，后面如果还需要该图片，则直接从缓存在读取，减少了用户的等待时间。

在前面提到，预加载不是为了减少页面加载时间，但是向上面那样写，预加载和页面上其他内容一起加载，还会加长页面的加载时间，用户在点进页面时，等待时间加长，并没有达到我们提高用户体验的目的，我们可以封装一个函数，推迟预加载时间，等页面加载完成后再预加载。

```javascript

function preload(){

if(document.getElementById){

document.getElementById("preload-01").style.background = "url(img1.png)";

document.getElementById("preload-02").style.background = "url(img2.png)";

document.getElementById("preload-03").style.background = "url(img3.png)";

}

function addLoadEvent(func){

var oldonload = window.onload;

if(type window.onload != "function"){

window.onload = func;

}else{

window.onload = function(){

if(oldonload){

oldonload();

}

func();

}

addLoadEvent(preload);

```

## 仅使用JavaScript

上面的方法将图片放在css里实现预加载，也可以仅使用JavaScript来实现预加载。在js中，需要多少预加载图片，就创建多少image对象，再为每个image对象添加图片的src，此时图片也会被提前请求。

```javascript

var images = new Array();

function preload(){

for(var i = 0;i < preload.arguments.length;i ++){

iamges[i] = new Image();

images[i].src = preload.arguments[i];

}

preload(url1,url2,url3);

//也可以将上面的代码改写一下

function preload(){

if(document.images){//document.images:页面上所有图片的集合

var img1 = new Image();

var img2 = new Image();

var img3 = new Image();

img1.src = url1;

img2.src = url2;

img3.src = url3;

}

```

预加载的原理都差不多，也可以再添加一个addLoadEvent函数来推迟预加载时间，实现方法同第一点一致。

## 使用ajax

只要是静态资源都可以预加载，包括图片，css，js，可以使用ajax请求这些静态资源，这样也不会影响当前页面。

```javascript

window.onload = function(){

setTimeout = (function(){

var xhr = new XMLHttpRequest();

xhr.open('GET','js文件地址');

xhr.send('');

xhr = new XMLHttpRequest();

xhr.open('GET','css文件地址');

xhr.send('');

new Image().src = '图片地址';

},1000);

}

//另一种写法

window.onload = function(){

setTimeout(function(){

var head = document.getElementsByTagName('head')[0];

var css = document.createElement('link');

css.type = 'text/css';

css.rel = 'stylesheet';

css.href = 'css地址';

var js = document.createElement('script');

js.type = 'text/javascript';

js.src = 'js地址';

head.appendChild(css);

head.appendChild(js);

new Image().src = '图片地址';

},1000)

}

```

这里使用setTimeout的原因是为了防止脚本被挂起，可以了解一下浏览器的GUI渲染线程和JS引擎，两者是相斥的，在JS引擎执行时，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。

--------

## 懒加载

## 懒加载的核心：

* .仅显示可视区的图片资源，不可见区域的资源暂不请求。

* .使用懒加载可以减少页面的加载时间。

* .使用于需要大量图片的页面。

实现要点:将图片的src设为空，或者也可以将所有图片的src设一个底图，当图片还没加载完时，用这张底图来占图片的位置，防止页面结构混乱。再给一个自定义的data-url属性，用来存放图片的真实路径。lazyload属性用来标明哪些图片是需要懒加载。监听滚动事件，只在图片出现在可视区时，才动态地将图片的真实地址赋予图片的src属性。

```javascript

var viewHeight = document.documentElement.clientHeight;//可视区域的高度

function lazyload(){

var eles = document.querySelectorAll('img[data-url][lazyload]');

Array.prototype.forEach.call(eles,function(item,index){

var rect;

if(item.dataset.url === ''){//html5 data 钩子的写法

return;

}

rect = item.getBoundingClientRect();//getBoundingClientRect()返回一个矩形对象.

if(rect.bottom >= 0 && rect.top < viewHeight){

!function(){//感叹号表明这是一个函数表达式

var img = new Image();

img.src = item.dataset.url;

img.onload = function(){

item.src = img.src;

}

item.removeAttribute('data-url');

item.removeAttribute('lazyload');

}()

}

})

}

lazyload();//首屏调用

document.addEventListener('scroll',lazyload);

```

--------

## call和apply的区别

对于call和apply的解释，网上有很多，但是为了更好地理解。所以这里自己总结积累下~

JavaScript中的每一个function对象都会有call和apply方法

```javascript

/*apply()方法*/

function.apply(thisObj[, argArray])

/*call()方法*/

function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

```

定义：

* .apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

* .call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法

从定义中可以看出，call和apply都是调用一个对象的一个方法，用另一个对象替换当前对象。而不同之处在于传递的参数，apply最多只能有两个参数——新this对象和一个数组argArray，如果arg不是数组则会报错TypeError；

call则可以传递多个参数，第一个参数和apply一样，是用来替换的对象，后边是参数列表。

--------

## 基本用法：

```javascript

function Dog(){

this.name = "dog";

this.showName=function(){

console.log("这是一条"+this.name+"!")

}

function Cat(){

this.name="cat";

// Dog.apply(this)

this.showName=function(){

console.log(this.name+" eat fish");

}

Dog.apply(this)

};

var cat = new Cat()

// Dog.call(cat) /*call的用法*/

cat.showName() /*这是一条dog*/

console.log(cat.name)

/*dog*/

```

但是如果你apply写的位置不同，结果也将有所变化。如上述代码

如果我将后边的apply注释掉，将上一个apply打开，那么执行showName()得到的结果将是：dog eat fish

--------

## 虚拟dom的优势和diff

## 虚拟DOM

虚拟DOM不是真实的DOM，而是一个JS对象。它的作用是判断DOM是否改变、哪些部分需要被重新渲染。这样，不需要操纵真实的DOM,极大的提高了React的性能。

--------

## diff算法

处理方法：对操作前后的dom树同一层的节点进行对比，一层一层对比。

在标准dom机制下：同一位置对比前后的dom节点，发现节点改变了，会继续比较节点的子节点，一层层对比，找到不同的节点，然后更新节点。

在react的diff算法下，同一位置对比前后dom节点，只要dom节点更改时，就会删除操作前的dom节点（包括子节点），替换为操作后的dom节点。

当dom节点更改是，会大大减少dom树的节点遍历，可以实现快速渲染。

--------

## CSS水平垂直居中

```HTML

<!DOCTYPE html>

<head>

<title>index</title>

<style>

html,body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.content {

width: 300px;

height: 300px;

background: orange;

margin: 0 auto; /*水平居中*/

position: relative;

top: 50%; /*偏移*/

margin-top: -150px;

}

</style>

</head>

<body>

</body>

</html>

```

--------

## 浏览器兼容性处理

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于说渲染引擎。

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

```HTML

IE浏览器：Trident内核，也称为IE内核

Chrome浏览器：Webkit内核，现在是Blink内核

Firefox浏览器：Gecko内核，俗称Firefox内核

Safari浏览器：Webkit内核

Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

360浏览器：IE+Chrome双内核

猎豹浏览器：IE+Chrome双内核

百度浏览器：IE内核

QQ浏览器：Trident（兼容模式）+Webkit（高速模式）

```

--------

## 不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同

解决方案：css里增加通配符*{margin：0；padding：0}

--------

## IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题

解决方案：设置display：inline；

--------

## 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度

--------

## 图片默认有间距

解决方案：使用float为img布局

--------

## IE9以下浏览器不能使用opacity

解决方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

--------

## 边距重叠问题

当相邻两个元素都设置了margin边距时，margin将取最大值，舍弃最小值；

--------

## cursor：hand显示手型在safari上不支持

解决方案：统一使用cursor：pointer

--------

## 两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

--------

解决方案：父级元素设置position：relative

## const问题

--------

说明：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

--------

## event.srcElement问题

问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj = event.srcElement?event.srcElement:event.target;

--------

## 事件绑定

IE:dom.attachEvent();

其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

--------

## 操作tr的html

在ie9以下，不能操作tr的innerHTML

--------

## ajax略有不同

IE：ActiveXObject

其他：xmlHttpReuest

--------

## 对象宽高赋值问题

问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。

--------

## cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

--------

## innerText在IE中能正常工作，但在FireFox中却不行.

需用textContent。

解决方法:

```javascript

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

```

--------

## CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

--------

## css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

--------

## FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border1px;}

ie理解为box.width =100

ff理解为box.width =100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

--------

## IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

--------

## ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;

经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

--------

## 元素水平居中问题

FF: margin:0 auto;

IE: 父级{ text-align:center; }

--------

## Div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

--------

## margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

```HTML

```

相应的css为

```CSS

# imfloat{

float:left;

margin:5px;//IE下理解为10px

display:inline;//IE下再理解为5px}

```

## IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

```CSS

#box{ width: 80px; height: 35px;}

html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

```

## 页面的最小宽度

如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：

```CSS

#container{ min-width: 600px;width:expression(document.body.clientWidth< 600? "600px": "auto" );}

```

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

--------

## DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

```CSS

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

</div>

```

## IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

--------

## float的div闭合;清除浮动;自适应高度

① 例如：

```HTML

```

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在```<div class="floatB"><div class="NOTfloatC">之间加上<div class="clear">```这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

```HTML

</div>

```

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

```HTML

</div>

```

再嵌入一个float left而宽度是100%的DIV解决之。

④万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix"即可,屡试不爽。

```HTML

/* Clear Fix /

.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }

.clearfix { display:inline-block; }

/ Hide from IE Mac /

.clearfix {display:block;}

/ End hide from IE Mac /

/ end of clearfix */

```

或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显示}

## 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

```HTML

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<p>p对象中的内容</p>

</div>

```

解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

## IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决.

--------

## 对齐文本与文本输入框

加上vertical-align:middle;

```CSS

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

</style>

```

经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK！

--------

## LI中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

```CSS

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

</style>

```

--------

## 为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

```HTML

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

</style>

```

--------

## 为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

例如:overflow:hidden　 zoom:0.08 　line-height:1px

--------

## 链接(a标签)的边框与背景

a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。

--------

## 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

```HTML

a:link {}

a:visited {}

a:hover {}

a:active {}

</style>

```

--------

## FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。

## 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

```HTML

p[id]{}div[id]{}

```

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

--------

## 为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

```HTML

{

height:auto!important;

height:200px;

min-height:200px;

}

```

--------

## 怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

```HTML

<paramname="wmode" value="transparent" />

```

--------

## 跨域的实现方法

## jsonp

利用 ```<script>``` 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

--------

## cors

后端配置加跨域注解

--------

## vue中加ProxyTanle

```javascript

dev: {

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {

'/api': {

target: 'http://ip:port', // 要访问接口的域名

secure: false, // 如果是https接口，需要配置这个参数

changeOrigin: true, // 如果接口跨域，需要进行这个参数配置

pathRewrite: {

'^api': ''//重写接口访问

}

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 6060, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

/**

* Source Maps

// https://webpack.js.org/configuration/devtool/#development

devtool: 'cheap-module-eval-source-map',

// If you have problems debugging vue-files in devtools,

// set this to false - it *may* help

// https://vue-loader.vuejs.org/en/options.html#cachebusting

cacheBusting: true,

cssSourceMap: true

```

--------

## nginx做代理

```HTML

// proxy服务器

server {

listen 81;

server_name www.domain1.com;

location / {

proxy_pass http://www.domain2.com:8080; #反向代理

proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名

index index.html index.htm;

# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用

add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*

add_header Access-Control-Allow-Credentials true;

}

```

--------

## WebSocket

```javascript

// socket.html

let socket = new WebSocket('ws://localhost:3000');

socket.onopen = function () {

socket.send('我爱你');//向服务器发送数据

}

socket.onmessage = function (e) {

console.log(e.data);//接收服务器返回的数据

}

</script>

// server.js

let express = require('express');

let app = express();

let WebSocket = require('ws');//记得安装ws

let wss = new WebSocket.Server({port:3000});

wss.on('connection',function(ws) {

ws.on('message', function (data) {

console.log(data);

ws.send('我不爱你')

});

})

```

--------

## 强缓存和协商缓存区别和过程

## 强缓存

当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：

respone header 的cache-control，常见的设置是max-age public private no-cache no-store等

## 强缓存总结

## cache-control: max-age=xxxx，public

客户端和代理服务器都可以缓存该资源；

客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

## cache-control: max-age=xxxx，private

只让客户端可以缓存该资源；代理服务器不缓存

客户端在xxx秒内直接读取缓存,statu code:200

## cache-control: max-age=xxxx，immutable

客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

## cache-control: no-cache

跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。

## cache-control: no-store

不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

--------

## 协商缓存

上面说到的强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；只有在过期才会去询问服务器。所以，强缓存就是为了给客户端自给自足用的。而当某天，客户端请求该资源时发现其过期了，这是就会去请求服务器了，而这时候去请求服务器的这过程就可以设置协商缓存。这时候，协商缓存就是需要客户端和服务器两端进行交互的。

## 怎么设置协商缓存？

response header里面的设置

```javascript

etag: '5c20abbd-e2e8'

last-modified: Mon, 24 Dec 2018 09:49:49 GMT

```

* .etag：每个文件有一个，改动文件了就变了，就是个文件hash，每个文件唯一，就像用webpack打包的时候，每个资源都会有这个东西，如： app.js打包后变为 app.c20abbde.js，加个唯一hash，也是为了解决缓存问题。

* .last-modified：文件的修改时间，精确到秒

也就是说，每次请求返回来 response header 中的 etag和 last-modified，在下次请求时在 request header 就把这两个带上，服务端把你带过来的标识进行对比，然后判断资源是否更改了，如果更改就直接返回新的资源，和更新对应的response header的标识etag、last-modified。如果资源没有变，那就不变etag、last-modified，这时候对客户端来说，每次请求都是要进行协商缓存了，即：

* .发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。

这就是一条完整的协商缓存的过程。

当然，当服务端发现资源真的过期的时候，会走如下流程：

* .发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->过期-->返回200状态码-->客户端如第一次接收该资源一样，记下它的cache-control中的max-age、etag、last-modified等。

--------

## 所以协商缓存步骤总结：

请求资源时，把用户本地该资源的 etag 同时带到服务端，服务端和最新资源做对比。

如果资源没更改，返回304，浏览器读取本地缓存。

如果资源有更改，返回200，返回最新的资源。

补充一点，response header中的etag、last-modified在客户端重新向服务端发起请求时，会在request header中换个key名：

```javascript

// response header

etag: '5c20abbd-e2e8'

last-modified: Mon, 24 Dec 2018 09:49:49 GMT

// request header 变为

if-none-matched: '5c20abbd-e2e8'

if-modified-since: Mon, 24 Dec 2018 09:49:49 GMT

```

--------

## 为什么要有etag？

你可能会觉得使用last-modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要etag呢？HTTP1.1中etag的出现（也就是说，etag是新增的，为了解决之前只有If-Modified的缺点）主要是为了解决几个last-modified比较难解决的问题：

* .一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新get；

* .某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，if-modified-since能检查到的粒度是秒级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

* .某些服务器不能精确的得到文件的最后修改时间。

--------

## 怎么设置强缓存与协商缓存

* .后端服务器如nodejs:

```javascript

res.setHeader('max-age': '3600 public')

res.setHeader(etag: '5c20abbd-e2e8')

res.setHeader('last-modified': Mon, 24 Dec 2018 09:49:49 GMT)

```

* .nginx配置

--------

## BFC是什么？

BFC（Block Formatting Context）中文直译就是‘块级格式上下文’，它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

通俗点说，BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

--------

## BFC的产生条件

* .overflow不为visible；

* .浮动（float样式不为none ）；

* .绝对定位（position样式为absolue或者fixed ）；

* .display为inline-block / table-cell / table-caption / flex / table-flex；

--------

## BFC特性（作用）

* .在BFC中，内部的Box会在垂直方向，一个接一个地放置；

* .Box垂直方向的距离由margin决定，同一个BFC下相邻两个Box的margin会发生重叠；

* .在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。

* .即不会发生margin穿透

* .形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）；

* .计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）。

* .原本浮动元素应该是脱离文档流的，但BFC中会计算其高度。

综上特性所述，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

--------

## BFC特性的一些应用

## 实现自适应两栏布局

应用了“BFC的区域不会与float box重叠”的特性；一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了出现文字环绕及类似情形。

* .解决父元素高度塌陷（也就是闭合内部浮动）

应用了“计算BFC高度时，浮动元素也参与计算在内”的特性；

* .解决垂直方向上兄弟元素的margin重叠

应用了“属于同一个BFC的两个相邻Boc的margin会发生重叠”的特性。意味着如果相邻兄弟元素不属于同一个BFC，就不会发生margin重叠了；

* .BFC特性应用实例演示

--------

## 实现自适应两栏布局

```HTML

.container {

width: 500px;

}

.left {

width: 100px;

height: 150px;

background-color: #B3D1C1;

float: left;

}

.right {

height: 200px;

background-color: #A694C1;

/*把.right这个自适应预算变成BFC，

避免与.left这个有float属性的元素重叠；*/

overflow: hidden;

}

</style>

<body>

<div class="right">right</div>

</div>

</body>

```

这里不能通过设置float样式的方式把right变为BFC，因为float有收缩、紧密排列的特性，而right又没有固定宽度，设置float属性后，right就会收缩不见。

--------

## 解决父元素高度塌陷（闭合内部浮动）

高度塌陷产生原因：父元素未设置固定高度，完全由子元素高度撑开；当子元素float之后脱离了文档流，父元素内部没有支撑，造成高度塌陷。

解决：给塌陷的父元素添加overflow：hidden / auto使其变为BFC。

```HTML

<style>

.container {

width: 300px;

border: 1px solid #999;

background-color: #DBD9B7;

/*使父元素变为BFC，解决高度塌陷*/

overflow: hidden;

}

.son {

width: 100px;

height: 100px;

background-color: #E67B85;

/*会造成高度塌陷*/

float: left;

}

</style>

<body>

<div class="container">container

</div>

</body>

```

--------

## 解决垂直方向上兄弟元素的margin重叠

```javascript

<style>

p {

width: 200px;

height: 100px;

background-color: #fcc;

margin: 25px;

}

.wrap {

/*p外面包裹一层，并按如下设置，

形成一个单独的BFC*/

overflow: hidden;

}

</style>

<body>

</div>

</body>

```

--------

## 触发BFC的属性（方法）与自适应布局面面观

* .float：left。动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局。不过，其因兼容性还算良好。

* .position：absolute。脱离文档流严重，不建议使用。

* .overflow：hidden。元素BFC本身块状元素的流体特性仍可比较完好得保留。不足之处是如果内容过多，可能会被裁剪。

* .display：inline-blockl。display:inline-block会让元素尺寸包裹收缩，完全就不是我们想要的block水平的流动特性。唉，只能是一声叹气一枪毙掉的命！然而，峰回路转，世事难料。大家应该知道，IE6/IE7浏览器下，block水平的元素设置display:inline-block元素还是block水平，也就是还是会自适应容器的可用宽度显示。

* .display：table-cell。让元素表现得像单元格一样，IE8+以上浏览器才支持。跟display:inline-block一样，会跟随内部元素的宽度显示，看样子也是不合适的命。但是，单元格有个非常神奇的特性，就是你宽度值设置地再大，实际宽度也不会超过表格容器的宽度。因此，如果我们把display:table-cell这个BFC元素宽度设置很大，比方说3000像素。那其实就跟* .block水平元素自动适应容器空间效果一模一样了。

综上总结，能担任自适应布局的方法也就是：

* .overflow：auto / hidden（id7+）

* .display：inline-block（ie6、ie7）

* .display：table-cell（ie8+）

而由于overflow有剪裁和出现滚动条等隐患，不适合作为整站通用类，于是，最后，类似清除浮动的通用类语句：

```CSS

.clearfix {

*zoom: 1;

}

.clearfix:after {

content: ''; display: table; clear: both;

}

```

两栏或多栏自适应布局的通用类语句是（block标签需配合浮动）：

```CSS

.cell {

display: table-cell; width: 9999px;

*display: inline-block; *width: auto;

}

```

--------

## 实现一个每秒输出hello world的函数，要求第三次输出后停止，用闭包实现

```javascript

for (var i = 1; i < 3; i++) {

setTimeout(fn(), 1000);

}

function fn(){

return function(){

console.log("hello world");

}

```

--------

## 浏览器渲染的流程

* 1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

* 2. 将CSS解析成 CSS Rule Tree 。

* 3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

* 4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。

* 5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

--------

## ajax原生请求

--------

## GET请求

```javascript

//步骤一:创建异步对象

var ajax = new XMLHttpRequest();

//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端

ajax.open('get','getStar.php?starName='+name);

//步骤三:发送请求

ajax.send();

//步骤四:注册事件 onreadystatechange 状态改变就会调用

ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) {

//步骤五如果能够进到这个判断说明数据完美的回来了,并且请求的页面是存在的　　　　console.log(ajax.responseText);//输入相应的内容　　}

}

```

--------

## POST请求

```javascript

//创建异步对象

var xhr = new XMLHttpRequest();

//设置请求的类型及url

//post请求一定要添加请求头才行不然会报错

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.open('post', '02.post.php' );

//发送请求

xhr.send('name=fox&age=18');

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.responseText);

}

};

```

--------

## 浏览器环境下js引擎的事件循环机制

## 执行栈与事件队列

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。但是我们这里说的执行栈和上面这个栈的意义却有些不同。

我们知道，当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。。这个过程反复进行，直到执行栈中的代码全部执行完毕。

一个方法执行会向执行栈中加入这个方法的执行环境，在这个执行环境中还可以调用其他方法，甚至是自己，其结果不过是在执行栈中再添加一个执行环境。这个过程可以是无限进行下去的，除非发生了栈溢出，即超过了所能使用内存的最大值。

以上的过程说的都是同步代码的执行。那么当一个异步代码（如发送ajax请求数据）执行后会如何呢？前文提过，js的另一大特点是非阻塞，实现这一点的关键在于下面要说的这项机制——事件队列（Task Queue）。

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

--------

## macro task与micro task

以上的事件循环过程是一个宏观的表述，实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

以下事件属于宏任务：

* .setInterval()

* .setTimeout()

以下事件属于微任务

* .new Promise()

* .new MutaionObserver()

前面我们介绍过，在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈...如此反复，进入循环。

我们只需记住当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

这样就能解释下面这段代码的结果：

```javascript

setTimeout(function () {

console.log(1);

});

new Promise(function(resolve,reject){

console.log(2)

resolve(3)

}).then(function(val){

console.log(val);

})

```

结果为：

--------

## 浏览器的回收机制

JavaScript 具有自动垃圾收集机制（GC：Garbage Collecation），也就是说，执行环境会负责管理代码执行过程中使用的内存。而在 C 和 C++ 之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。

在编写 JavaScript 程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。

正因为垃圾回收器的存在，许多人认为 JavaScript 不用太关心内存管理的问题，但如果不了解 JavaScript 的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况。

--------

## 垃圾回收机制

内存的分配场景

```javascript

// 1.对象

new Object();

new MyConstructor();

{ a: 4, b: 5 }

Object.create();

// 2.数组

new Array();

[ 1, 2, 3, 4 ];

// 3.字符串，JavaScript 的字符串和 .NET 一样，使用资源池和 copy on write 方式管理字符串。

new String("hello hyddd");

"<p>" + e.innerHTML + "</p>"

// 4.函数

var x = function () { ... }

new Function(code);

// 5.闭包

function outer(name) {

var x = name;

return function inner() {

return "Hi, " + name;

}

```

--------

## 内存的生命周期

下面我们来分析一下函数中局部变量的正常生命周期。

* .内存分配：局部变量只在函数执行的过程中存在。而在这个过程中，会为局部变量在栈（或堆）内存上分配相应的空间，以便存储它们的值。

* .内存使用：然后在函数中使用这些变量，直至函数执行结束。

* .内存回收：此时，局部变量就没有存在的必要了，因此可以释放它们的内存以供将来使用。

通常，很容易判断变量是否还有存在的必要，但并非所有情况下都这么容易就能得出结论（例如：使用闭包的时）。垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存。用于标识无用变量的策略可能会因实现而异，但具体到浏览器中的实现，则通常有两个策略：标记清除和引用计数。

--------

## 标记清除

JavaScript 中最常用的垃圾收集方式是标记清除（mark-and-sweep）。当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

```javascript

function test(){

var a = 10 ; // 被标记，进入环境

var b = 20 ; // 被标记，进入环境

}

test(); // 执行完毕之后 a、b又被标离开环境，被回收。

```

垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记（当然，可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记（例如，闭包）。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾回收器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

这种方式的主要缺点就是如果某些对象被清理后，内存是不连续的，那么就算内存占用率不高，例如只有50%，但是由于内存空隙太多，后来的大对象甚至无法存储到内存之中。一般的处理方式都是在垃圾回收后进行整理操作，这种方法也叫标记整理，整理的过程就是将不连续的内存向一端复制，使不连续的内存连续起来。

目前，IE9+、Firefox、Opera、Chrome 和 Safari 的 JavaScript 实现使用的都是标记清除式的垃圾收集策略（或类似的策略），只不过垃圾收集的时间间隔互有不同。

--------

## 引用计数

另一种不太常见的垃圾收集策略叫做引用计数（reference counting）。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那些引用次数为零的值所占用的内存。

```javascript

function test(){

var a = {} ; // a的引用次数为0

var b = a ; // a的引用次数加1，为1

var c = a; // a的引用次数再加1，为2

var b = {}; // a的引用次数减1，为1

}

```

早期很多浏览器使用引用计数策略，但很快它就遇到了一个严重的问题：循环引用。循环引用指的是对象 A 中包含一个指向对象 B 的指针，而对象 B 中也包含一个指向对象 A 的引用。

请看下面这个例子：

```javascript

function problem(){

var objectA = new Object();

var objectB = new Object();

objectA.someOtherObject = objectB;

objectB.anotherObject = objectA;

}

```

在这个例子中，objectA 和 objectB 通过各自的属性相互引用；也就是说，这两个对象的引用次数都是2。在采用标记清除策略的实现中，由于函数执行之后，这两个对象都离开了作用域，因此这种相互引用不是个问题。但在采用引用计数策略的实现中，当函数执行完毕后，objectA 和 objectB 还将继续存在，因为它们的引用次数永远不会是0。假如这个函数被重复多次调用，就会导致大量内存得不到回收。为此，新一代浏览器都放弃了引用计数方式，转而采用标记清除来实现其垃圾收集机制。可是，引用计数导致的麻烦并未就此终结。

我们知道，IE 中有一部分对象并不是原生 JavaScript 对象。例如，其 BOM 和 DOM 中的对象就是使用 C++ 以 COM（Component Object Model，组件对象模型）对象的形式实现的，而 COM 对象的垃圾收集机制采用的就是引用计数策略。因此，即使 IE 的 JavaScript 引擎是使用标记清除策略来实现的，但 JavaScript 访问的 COM 对象依然是基于引用计数策略的。换句话说，只要在 IE 中涉及 COM 对象，就会存在循环引用的问题。下面这个简单的例子，展示了使用 COM 对象导致的循环引用问题：

```javascript

var element = document.getElementById("some_element");

var myObject = new Object();

myObject.element = element;

element.someObject = myObject;

```

这个例子在一个 DOM 元素（element）与一个原生 JavaScript 对象（myObject）之间创建了循环引用。其中，变量 myObject 有一个名为 element 的属性指向 element 对象；而变量 element 也有一个属性名叫 someObject 回指 myObject。由于存在这个循环引用，即使将例子中的 DOM 从页面中移除，它也永远不会被回收。

为了避免类似这样的循环引用问题，最好是在不使用它们的时候手工断开原生 JavaScript 对象与 DOM 元素之间的连接。例如，可以使用下面的代码消除前面例子创建的循环引用：

```javascript

myObject.element = null;

element.someObject = null;

```

将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就会删除这些值并回收它们占用的内存。

为了解决上述问题，IE9 把 BOM 和 DOM 对象都转换成了真正的 JavaScript 对象。这样，就避免了两种垃圾收集算法并存导致的问题，也消除了常见的内存泄漏现象。

计算机技术之指尖密码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试

##转换驼峰命名(match与replace)-------->题目：小科去了一家新的公司做前端主管，发现里面的前端代码有一部分是C/C++程序员写的，他们喜欢用下划线命名，例如：is_good。小科决定写个脚本来全部替换掉这些变量名。完成toCamelCaseVar函数，它可以接受一个字符串作为参数，可以把类似于is_good这样的变量名替换成isGood。变量名首尾的下划线不需要做处理，中间的下划线全部删除并且处理成驼峰。##题解一...
复制链接

扫一扫