2108最全的前端面试题大全都在这里了（二）-阿里云开发者社区

DOM相关

dom事件模型

DOM之事件模型分脚本模型、内联模型(同类一个，后者覆盖)、动态绑定(同类多个) demo

<body>
<button onclick="javascrpt:alert('Hello')">Hello1button>
<button onclick="showHello()">Hello2button>
<button id="btn3">Hello3button>
body>
<script>
/*DOM0：同一个元素，同类事件只能添加一个，如果添加多个，
* 后面添加的会覆盖之前添加的*/
function shoeHello() {
alert("Hello");
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("Hello");
}
/*DOM2:可以给同一个元素添加多个同类事件*/
btn3.addEventListener("click",function () {
alert("hello1");
});
btn3.addEventListener("click",function () {
alert("hello2");
})
if (btn3.attachEvent){
/*IE*/
btn3.attachEvent("onclick",function () {
alert("IE Hello1");
})
}else {
/*W3C*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
})
}
script>

冒泡解释：当点击一个元素触发事件时. 事件会先从元素的最外层父元素一层一层进入到触发的元素, 然后在从触发元素一层一层返回到最外层父元素, 从最外层一层一层进入的阶段叫事件捕获阶段, 从最里层一层一层往外的阶段叫事件冒泡,

移动端触摸事件

①touchstart：当手指触碰到屏幕的时候触发

②touchmove：当手指在屏幕上滑动的时候触发

③touchend：当手指离开屏幕的时候时候触发

④touchcancel事件：当系统停止跟踪触摸的时候触发(这个事件很少会用，一般不做深入研究)。电话接入或者弹出信息等其他事件切入 event：

touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个touch对象包含的属性

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。

事件委托

参考定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件好处：给重复的节点添加相同操作，减少dom交互，提高性能实现思路：给父组件添加事件，通过事件冒泡，排查元素是否为指定元素，并进行系列操作

HTTP相关

常见状态码

2开头（请求成功）表示成功处理了请求的状态代码。

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201 （已创建）请求成功并且服务器创建了新的资源。

202 （已接受）服务器已接受请求，但尚未处理。

203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 （无内容）服务器成功处理了请求，但没有返回任何内容。

205 （重置内容）服务器成功处理了请求，但没有返回任何内容。

206 （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。

307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求）服务器不理解请求的语法。

401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。

403 （禁止）服务器拒绝请求。

404 （未找到）服务器找不到请求的网页。

405 （方法禁用）禁用请求中指定的方法。

406 （不接受）无法使用请求的内容特性响应请求的网页。

407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。

408 （请求超时）服务器等候请求时发生超时。

409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。

410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。

411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。

412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。

413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。

415 （不支持的媒体类型）请求的格式不受请求页面的支持。

416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，无法完成请求。

501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。

502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。

503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。

504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

缓存

Expires在http1.0中使用，与服务器时间有误差，在1.1中由Cache-control替代
cdn

Cache-Control 和 Etag 的区别

如下图 08bfae016940b0670737c981765e74e3_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

Cookie sessionStorage localStorage

共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据不能超过4k(适合保存小数据)。 sessionStorage和localStorage容量较大，数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效。localStorage：始终有效，窗口或浏览器关闭也一直保存，需手动清楚；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同。 sessionStorage不在不同的浏览器窗口中共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

应用场景：localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage ：敏感账号一次性登录； cookies与服务器交互。

GET POST区别

22e834b7bc0732ff8b0443619f567a23_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

请求行，请求头，请求体详解

9a6d8e4670ccc72d6dced1a743b85b44_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg 1,2,3请求行，4请求体，5请求体

跨域、JSONP 、CORS、postMessage

跨域概念解释：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。如下表 321c1c381b1dc357bc4a058f2a6a0541_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

jsoup实现

原生
<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 script>
jquery
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});
vue
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})
配合的后端node实现,其他服务器语言也可以
const querystring = require('querystring');
const http = require('http');
const server = http.createServer();
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
    res.end();
});
server.listen('8080');
jsoup缺点只能实现get请求

CORS：跨源资源共享 Cross-Origin Resource Sharing(CORS)，通常服务器设置，若带cookie请求，则前后端都需要设置后端常见设置 response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需写全（协议+域名+端口），允许那些外源请求 response.setHeader("Access-Control-Allow-Credentials", "true"); //是否需要验证

前端示例

原生
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
jquery
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});
postMessage(data,origin)方法接受两个参数
demo
a.html
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;">iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
script>
b.html  与a.html不同源
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
script>

osi模型

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 tcp ucp属于传输层；http属于应用层

http2.0 http1

HTTP2.0的基本单位为二进制帧
HTTP2.0中帧具有优先级
HTTP2.0的多路复用（ 1次连接）
HTTP2.0压缩消息头
HTTP2.0服务端推送
HTTP2.0只适用于HTTPS的场景

Vue相关

生命周期顺序

7206bb14924c600c9c3bea66cfedb53b_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

组件通信

1.父传子用props,父用子用ref 子调父用$emit,无关系用Bus

Vuex

组件通信库，可以避免子组件无法改变props的弊端等 mutations 同步操作，用于改变状态官方不推荐异步 action 执行多个mutaions，官方推荐异步操作 mapState、mapGetters、mapActions使用示例

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>
<script>
import {mapState} from 'vuex';
export default {
  computed:{
    //这里的三点叫做 : 扩展运算符
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}
</script>
后两者类似

VueRouter

定义
var routes = [
    {
        path:"/one",
        component:导入的组件1
    },
    {
        path:"/two",
        component:导入的组件2
    },
];
// 定义路由组件
var router = new VueRouter({
    routes
});
// 定义路由
new Vue({
    el:"#box",
    router
});
 访问设定的路由后 会将<router-view></router-view>替换成相应的模版
 html访问方式 <router-link to="/one">One</router-link>(类似a标签)
 js访问方式 this.$router.push('/one'); 
 replace方式 替换当前页面
 携带的参数 可以通过this.$route.query.xxxx来获取

Vue双向绑定

原理：利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。缺点：双向数据流是自动管理状态的, 但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试。

computed watch methods

用法：区别：

前两者自动追踪数据，执行相关函数，最后一个手动调用；
computed是计算属性，用法与data一致
watch像事件监听，对象发生变化时，执行相关操作
methods与js中执行方法类似
computed通常只有get属性
数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
watch的对象必须事先声明

2108最全的前端面试题大全都在这里了（二）

DOM相关

dom事件模型

移动端触摸事件

事件委托

HTTP相关

常见状态码

缓存

Cache-Control 和 Etag 的区别

Cookie sessionStorage localStorage

GET POST区别

请求行，请求头，请求体详解

跨域、JSONP 、CORS、postMessage

osi模型

http2.0 http1

Vue相关

生命周期顺序

组件通信

Vuex

VueRouter

Vue双向绑定

computed watch methods

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

2108最全的前端面试题大全都在这里了（二）

DOM相关

dom事件模型

移动端触摸事件

事件委托

HTTP相关

常见状态码

缓存

Cache-Control 和 Etag 的区别

Cookie sessionStorage localStorage

GET POST区别

请求行，请求头，请求体详解

跨域、JSONP 、CORS、postMessage

osi模型

http2.0 http1

Vue相关

生命周期顺序

组件通信

Vuex

VueRouter

Vue双向绑定

computed watch methods

热门文章

最新文章

相关课程

相关电子书

相关实验场景