前端面试题

最新推荐文章于 2021-04-22 14:02:16 发布

原创最新推荐文章于 2021-04-22 14:02:16 发布 · 238 阅读

CC 4.0 BY-SA版权

1. http请求过程通信机制（请求头内容请求行内容应答头内容）常见状态码

	a. 域名解析，根据域名找到服务器的IP 
	b.发起TCP的3次握手
	c. 建立TCP连接后发起http请求
	d. 服务器响应http请求，浏览器得到html代码
	e.浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）
	f.浏览器对页面进行渲染呈现给用户

2. 闭包
一、变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

Js代码

　　var n=999;
　　function f1(){
　　　　alert(n);
　　}
　　f1(); // 999

另一方面，在函数外部自然无法读取函数内的局部变量。
Js代码

　　function f1(){
　　　　var n=999;
　　}
　　alert(n); // error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
Js代码

　　function f1(){
　　　　n=999;
　　}
　　f1();
　　alert(n); // 999

二、如何从外部读取局部变量？
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
Js代码

　　function f1(){
　　　　n=999;
　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}
　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构（chain scope），
子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

Js代码

　　function f1(){
　　　　n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

三、闭包的概念
1.闭包就是能够读取其他函数内部变量的函数。
2.由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
3.在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。　　
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。

Js代码

　　function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个
匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便
改变父函数内部变量的值。
3. 原型原型链继承
初识原型
原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。
在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
“[[Prototype]]”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了__proto__这个非标准（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器”Object.getPrototype(object)”）。在JavaScript的原型对象中，还包含一个”constructor”属性，这个属性对应创建所有指向该原型的实例的构造函数

原型链
因为每个对象和原型都有原型，对象的原型指向原型对象，
而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部（也就是 Object.prototype），如果仍然没有找到指定的属性，就会返回 undefined。
4. TCP/IP协议
TCP/IP协议，即Transmission Control Protocol/Internet Protocol的简写，中译名为传输控制协议/因特网互联协议，又名网络通讯协议，是Internet最基本的协议、Internet国际互联网络的基础，由网络层的IP协议和传输层的TCP协议组成。TCP/IP 定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的协议来完成自己的需求。通俗而言：TCP负责发现传输的问题，一有问题就发出信号，要求重新传输，直到所有数据安全正确地传输到目的地。而IP是给因特网的每一台联网设备规定一个地址。
5. 原生js+JQuery的ajax 请求过程回调函数超时处理
原生js
一个完整的AJAX请求包括五个步骤:

1.创建XMLHTTPRequest对象

2.使用open方法创建http请求,并设置请求地址

3.设置发送的数据，开始和服务器端交互

4.注册事件

5.获取响应并更新界面

//使用xhr发送GET请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            //处理相应请求的消息 xhr.responseText
        }else{
            //响应完成但存在问题
        }
    }
}
xhr.open('GET','url地址',true);
xhr.send(null);


//使用xhr发送post请求

//    1、创建XHR对象
var xhr = new XMLHttpRequest();
//    2、监听XHR对象的状态改变
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            //处理相应请求的消息 xhr.responseText
        }else{
            //响应完成但存在问题
        }
    }
}
xhr.open('POST','url地址',true);
xhr.setRequestHeader('Content-Type','application/x-www-dorm-urlencoded')
xhr.send('需要发送的值');

jquery

var ajaxTimeoutTest = $.ajax({
　　url:'',  //请求的URL
　　timeout : 1000, //超时时间设置，单位毫秒
　　type : 'get',  //请求方式，get或post
　　data :{},  //请求所传参数，json格式
　　dataType:'json',//返回的数据格式
　　success:function(data){ //请求成功的回调函数
　　　　alert("成功");
　　},
　　complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
　　　　if(status=='timeout'){//超时,status还有success,error等值的情况
 　　　　　 ajaxTimeoutTest.abort();
　　　　　  alert("超时");
　　　　}
　　}
});

设置timeout的时间，通过检测complete时status的值判断请求是否超时，如果超时执行响应的操作。
6. 响应式布局
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式设计的步骤

设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
通过媒介查询来设置样式 Media Queries

@media screen and (max-width: 980px) {}
/** iPad /
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/ iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
其他：宽度百分比，处理图片缩放等

7. 兼容性问题
IE6 双倍边距的问题
设置 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题
display：inline；
a 标签的几种 CSS 状态的顺序
love-hate
link:平常的状态
visited:被访问过之后
hover:鼠标放到链接上的时候
active:链接被按下的时候
浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

解决 IE6 不支持 min-height 属性的问题

min-height: 350px;
_height: 350px;

event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
png24位的图片在ie6浏览器上出现背景
换成png8格式的图片
浏览器默认的margin和padding不同
加一个全局的*{margin:0;padding:0}来统一
几个img标签放一起时，有些浏览器会有默认间距
使用float布局
阻止冒泡
标准：e.stopPropagation();
IE9前:event.canceBubble();
在IE中不能使用const关键字
8. 让一个元素垂直水平居中的几种实现方式
1.负margin法
2.margin-auto法
3.table-cell法
4.弹性盒子法
9. 盒子模型和弹性盒子模型
10. 冒泡阻止冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
11. css3、html5新特性
12. sql语句
13. get和post区别
区别一
get是从服务器上获取的数据。
podt则是向服务器传送数据。
区别二
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
区别三
get方式，服务器端用Request.QueryString获取变量的值。
post方式，服务器端用Request.Form获取提交的数据。
区别四
get传送的数据量较小，不能大于2KB。
post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
区别五
get安全性比较低。
post安全性较高。
区别六
根据 HTTP 规范，GET 用于信息获取，而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。幂等的意味着对同一 URL 的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。从根本上讲，其目标是当用户打开一个链接时，她可以确信从自身的角度来看没有改变资源。比如，新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻，该操作仍然被认为是安全的和幂等的，因为它总是返回当前的新闻。
POST 表示可能改变服务器上的资源的请求。仍然以新闻站点为例，读者对文章的注解应该通过 POST 请求实现，因为在注解提交之后站点已经不同了
区别七
在FORM提交的时候，如果不指定Method，则默认为GET请求，Form中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送，但空格转换为“+“号，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISO Latin-1）值。GET请求请提交的数据放置在HTTP请求协议头中。
而POST提交的数据则放在实体数据中；GET方式提交的数据最多只能有1024字节，而POST则没有此限制。
14. TCP三次握手，四次挥手过程及原因

15. 算法。冒泡、快排、选择、插入的实现过程
16. http和https区别
　1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
　　2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
　　3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
　　4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
17. 用css画三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用css画三角形</title>
		<style type="text/css">
			.a{
			    width:0px;
			    height:0px;
			    border-width:100px;
			    border-style:solid;
			    /*透明：transparent*/
			    border-color:#e66161 transparent transparent transparent;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
	</body>
</html>

18. 左边定宽，右边自适应的实现方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*.left{
				width: 100px;
				height: 100px;
				background-color: #E66161;
				float: left;
			}
			.right{
				width: 100%;
				height: 100px;
				background-color: yellow;
			}*/
			body{
				display: flex;
			}
			.left{
				width: 100px;
				height: 100px;
				background-color: #E66161;
			}
			.right{
				background-color: yellow;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
	</body>
</html>

19. DOM操作方法
获取节点

常用获取节点的方法有：

    getElementById()           功能：通过元素ID获取节点
    getElementsByTagName()     功能：通过元素标签名获取节点
    getElementsByName()        功能：通过元素Name属性获取节点
    getElementsByClassName()   功能：通过元素类名获取节点

节点指针有：

    firstChild  语法：父节点.firstChild  功能：获取节点列表第一个
    lastChild   语法：父节点.lastChild   功能：获取节点列表最后一个
    childNodes  语法：父节点.childNodes  功能：获取元素的子节点列表
    previousSibling 语法：兄弟节点.previousSibling 功能：获取前一个节点
    nextSibling 语法：兄弟节点.nextSibling  功能：获取已知节点的后一个节点
    parentNode  语法：子节点.parentNode     功能：获取已知节点的父节点

节点操作

创建节点

其中节点包括元素节点、属性节点以及文本节点，当然也有注释节点，以下就前三个节点进行说明
createElement() 语法：document.createElement() 功能：创建元素节点
createAttribute() 语法：document.createAttribute() 功能：创建属性节点
createTextNode() 语法：document.createTextNode() 功能：创建文本节点
插入节点

    appendChild()     语法：被添加的节点.appendChild(所添加的新节点)
    insertBefore()  语法：被添加的节点.insertBefore(添加的新节点，已知节点)
替换节点
    replaceChild() 语法:replace(要插入的新元素，将被替换的元素)

复制节点

    cloneNode() 语法：需要被复制的节点.cloneNode(true/false) 
    true是指复制当前节点及其所有子节点 false是指仅复制当前节点

删除节点

    removeChild()  语法：removeChild(要删除的节点)
    注意：该方法可以删除指定节点及其包含的所有子节点，并返回这些内容

属性操作

属性操作分为：获取属性、设置属性、删除属性，如以下：

getAttribute() 功能：获取元素节点中指定属性的属性值
setAttribute() 功能：创建或改变元素节点的属性
removeAttribute()  功能：删除元素中指定属性

20. js的数据类型，typeof的返回
在这里插入图片描述
比较特殊的是typeof null返回“object”。

历史原因，规范尝试修改typeof null返回“null”修改完大量网站无法访问，为了兼容，或者说历史原因返回"object"。

typeof对基本类型和函数对象很方便，但是其他类型就没办法了。

判断一个对象是不是数组？用typeof返回“object”。对对象的判断常用instanceof。
21. 跨域
JSONP

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

动态创建

在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
    // 对response数据进行操作代码
}

了解了JSONP的基本使用方法，我们在实现上面通过ajax调用豆瓣接口的需求，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {     

        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>
</html>

在控制台，我们可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数，可以根据自己的需要：

JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题：
首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给

二、jQuery封装JSONP

对于经常用jQuery的开发者来说，能注意到jQuery封装的 $. a j a x 中有一个 d a t a T y p e 属性，如果将该属性设置成 d a t a T y p e : " j s o n p " ，就能实现 J S O N P 跨域了。需要了解的一点是，虽然 j Q u e r y 将 J S O N P 封装在$ .ajax中，但是其本质与$.ajax不一样。

通过jQuery的$.ajax实现跨域的代码参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){

            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>

最后的结果与JavaScript通过动态添加

通过$.getJSON(）

利用getJSON来实现，只要在地址中加上callback=?参数即可，参考代码如下：

$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
console.log(data);
});
22. position对应的属性值及各自用法
static :　默认值。无特殊定位，对象遵循HTML定位规则
absolute :绝对定位（相对元素本身进行定位）
fixed :　绝对定位（按照浏览器窗口来进行定位的）
relative :　相对定位（按照父元素来进行定位的）
23. js中的数据类型转换，显式和隐式的举几个例子
　转换为布尔值：
　　 Boolean()
　转换为数字：
Number()、parseInt()、parseFloat()
==转换为字符串 ==
toString()

隐式类型转换
四则运算
加法运算符+是双目运算符，只要其中一个是String类型，表达式的值就是一个String，会隐式调用每个元的 .toString() 方法。

对于其他的四则运算，只有其中一个是Number类型，表达式的值便是一个Number。

对于非法字符的情况通常会返回NaN：

‘1’ * ‘a’ // => NaN，这是因为parseInt(a)值为NaN，1 * NaN 还是 NaN
不同类型的相加的行为比较复杂，也不一致，可以参考这里： https://www.andronio.me/2017/10/22/js-operators-incensistency/

判断语句
判断语句中的判断条件需要是Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则同Boolean的构造函数。比如：

var obj = {};
if(obj){
while(obj);
}
有些接口只支持字符串参数，会对传入值进行 toString
比如 JavaScript 宿主环境提供的接口：

alert({a: 1}); // => [object Object]
这里传入任何对象都会被 toString 转为字符串。
24. web安全方面：xss和csrf，造成什么后果，怎么防范
25. 什么是数据结构
26. 获取url的参数
27. 死锁是什么
28. 内存置换算法
29. 队列和栈
30. cookie session localstorage sessionstorage区别
31. json对象/字符串转换的几个方法

1.JSON字符串转化为JSON对象

			a.使用eval()函数进行转换
			使用 eval() 转换时需要在 json 字符外包裹一对小括号。
			ie8(兼容模式)、ie7、ie6 不要使用此方法。
		
			b.使用JSON.parse()方法进行转换
			ie8(兼容模式)、ie7、ie6 不要使用此方法。
			
			c.使用json2.js进行转换
			json2.js 提供了 json 的序列化和反序列化方法，完美支持各个浏览器。
			使用时我们首先要将 json2.js 引用进来，源码地址：[https://github.com/douglascrockford/JSON-js](https://github.com/douglascrockford/JSON-js)
			
			d.使用jQuery进行转换
			如果我们项目中有使用 jQuery，那么直接使用 $.parseJSON() 方法即可，而且可以确保各个浏览器的兼容性。

2.JSON对象转化为JSON字符串

	a.使用JSON.stringify()方法进行转换
	该方法不支持较老版本的IE浏览器，比如：ie8(兼容模式)、ie7、ie6。
	b.使用json2.js进行转换
	如果想要兼容早期版本的IE浏览器，比如：ie8(兼容模式)、ie7、ie6。可以下载使用 json2.js，具体地址参考前面内容。使用方式和上面一样。
	
	c.使用jQuery进行转换
	首先对 jQuery 进行扩展，增加个 json 对象转字符串的方法。

32. js数组/字符串的操作（去重/排序/反转/求交集等）
33. 网页缓存机制
34. http协议
超文本传输协议