前端面试题，天天总结两道，面试麻溜

时间 2019-11-16

原文原文链接

css篇

1. 1px物理像素实现

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程当中若是出现border:1px，测试会发如今某些机型上，1px会比较粗，便是较经典的移动端1px像素问题。javascript

设备像素比dpr = 设备像素 / CSS像素(某一方向上) 能够经过window.devicePixelRatio获取设备的dpr值。通常来讲，在桌面的浏览器中，设备像素比（dpr）等于1，一个css像素就是表明的一个物理像素。而在移动端，大多数机型都不是为1，其中iphone的dpr广泛是2和3，那么一个css像素再也不是对应一个物理像素，而是2个和3个物理像素。即咱们一般在css中设置的width：1px，对应的即是物理像素中的2px。手机机型不一样，dpr可能不一样。php

以iphone5为例，iphone5的CSS像素为320px568px，DPR是2，因此其设备像素为640px1136pxcss

解决方案一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素实现(方案一)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 0.5rem;
            height: 0.5rem;
            border-bottom: 1px solid #000;
        }
    </style>
    <!-- 像素比 = 物理像素 / css像素 -->
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //像素比是什么？针对不一样屏幕 dpr不同
        var dpr = window.devicePixelRatio;
        console.log(dpr);
        //缩放比例
        var scale = 1 / dpr;
        //可视区域的宽度
        var width = document.documentElement.clientWidth;
        //获取mate标签
        var metaNode = document.querySelector('meta[name="viewport"]');
        metaNode.setAttribute('content',"width=device-width, initial-scale='+scale+'");

        //页面中元素的宽度，高度，比例得反向乘回来
        var htmlNode = document.querySelector('html');
        htmlNode.style.fontSize = width * dpr + 'px';

    }
</script>
</html>
复制代码

解决方案二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 缩放比 当为1的时候没用进行任何缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素实现(方案二)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            position: relative;
        }

        #box:before {
            content:'';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #000;

        }
        @media screen and (-webkit-min-device-pixel-ratio:2) {
            #box:before {
                transform: scaleY(0.5);
            }
        }
        @media screen and (-webkit-min-device-pixel-ratio:3) {
            #box:before {
                transform: scaleY(0.333333);
            }
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {

    }
</script>
</html>
复制代码

2. 元素水平居中的方法

方法一

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
复制代码

方法二

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left:-25px;
            margin-top:-25px;
        }
    </style>
复制代码

方法三（css3）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50% , -50%);
        }
    </style>
复制代码

方法四（flex新版本）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
复制代码

方法五（flex老版本）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
复制代码

3.如何实现移动端rem适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem适配</title>
    <style type="text/css">
        #wrap {
            width: 0.5rem;
            height: 0.5rem;
            background:grey;
        }
        /* html 根元素字体大小设置屏幕区域的宽度 */
    </style>
</head>

<body>
    <div id="wrap">
        <div class="box"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //获取屏幕区域的宽度
        var width = document.documentElement.clientWidth;
        //获取html
        var htmlNode = document.querySelector('html');
        //设置字体大小
        htmlNode.style.fontSize = width + 'px';

    }
</script>
</html>
复制代码

4.css实现两栏布局，左侧固定宽，右侧自适应的7中方法

www.cnblogs.com/wangzhenyu6…html

js篇

1.什么是跨域？解决跨域的方法？

跨域，指的是浏览器不能执行其余网站的脚本。它是由浏览器的同源策略形成的，是浏览器施加的安全限制。前端

同源策略

- ——是浏览器安全策略
- ——协议名、域名、端口号必须彻底一致
- 举例：
复制代码

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不一样:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不一样:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不一样:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不一样:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪一个页面，若是不是同源页面，就不会被执行
复制代码

跨域

- 违背同源策略就会产生跨域
复制代码

解决方法

- jsonp cors websocket Node中间件代理(两次跨域) ngix反向代理...
复制代码

1. jsonp方法

因此JSONP的原理其实就是利用引入script不限制源的特色，把处理函数名做为参数传入，而后返回执行语句，仔细阅读如下代码就能够明白里面的意思了。vue

补充：1) JSONP和AJAX对比java

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
复制代码

2)JSONP优缺点node

SONP优势是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具备局限性,不安全可能会遭受XSS攻击。
复制代码

<script>
        //建立 script 标签
        var script = document.createElement('script');
        //设置回调函数
        function getData(data) {
            //数据请求回来被触发的函数
            console.log(data);
        }
        //设置script的src属性，设置请求地址
        script.src = 'http://localhost:3000?callback = getData';
        //让script生效
        document.body.appendChild(script);
    </script>
复制代码

2.cors的简单请求

CORS 须要浏览器和后端同时支持。IE 8 和 9 须要经过 XDomainRequest 来实现。浏览器会自动进行 CORS 通讯，实现 CORS 通讯的关键是后端。只要后端实现了 CORS，就实现了跨域。服务端设置 Access-Control-Allow-Origin 就能够开启 CORS。该属性表示哪些域名能够访问资源，若是设置通配符则表示全部网站均可以访问资源。虽然设置 CORS 和前端没什么关系，可是经过这种方式解决跨域问题的话，会在发送请求时出现两种状况，分别为简单请求和复杂请求。react

只要同时知足如下两大条件，就属于简单请求jquery

条件1：使用下列方法之一：

GET
HEAD
POST

条件2：Content-Type 的值仅限于下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可使用 XMLHttpRequest.upload 属性访问。

4.websocket

Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通讯，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。可是 WebSocket 是一种双向通讯协议，在创建链接以后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在创建链接时须要借助 HTTP 协议，链接创建好了以后 client 与 server 之间的双向通讯就与 HTTP 无关了。原生WebSocket API使用起来不太方便，咱们使用 Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

咱们先来看个例子：本地文件socket.html向 localhost:3000 发生数据和接受数据

// socket.html
<script>
    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('我不爱你')
  });
})

复制代码

总结：CORS支持全部类型的HTTP请求，是跨域HTTP请求的根本解决方案 JSONP只支持GET请求，JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。无论是Node中间件代理仍是nginx反向代理，主要是经过同源策略对服务器不加限制。平常工做中，用得比较多的跨域方案是cors和nginx反向代理

更多方法参考：juejin.im/post/5c2399…

2.什么是闭包？

密闭的容器,相似于set,map容器，存储数据的
闭包是一个对象，存放数据的格式：key:value

造成的条件：

函数嵌套
内部函数引用外部函数的局部变量

闭包的优势：

延长外部函数局部变量的生命周期

闭包的缺点：

容易形成内存泄漏

注意点：

合理使用闭包
用完闭包要及时清除(销毁)

segmentfault.com/a/119000000…

3.axios是什么？怎么使用？描述使用它实现登陆功能的流程？

(一).axios是什么？

axios 是基于 promise 用于浏览器和nodejs的一个http客户端，主要用于向后台发送请求的，还有就是在请求中作更多控制。
支持 promise
提供了一些并发的方法
提供拦截器
提供支持CSRF(跨域请求伪造)

(二).axios fetch ajax(jquery)区别

前二者都是支持promise的语法，后者默认是使用callback方式
fetch 本质上脱离的xhr 是新的语法(有本身的特性默认不传cookie 不能像xhr这样去监听请求的进度)

(三).怎么使用？

<script>
    axios.get('').then(function(){
        
    }).catch(function(){
        
    })
    
    axios.post('').then(function(){
        
    }).catch(function(){
        
    })
</script>
复制代码

(四).描述使用它实现登陆功能的流程？

3.const,var,let区别

www.cnblogs.com/zzsdream/p/…

4.new操做符原理解析

www.cnblogs.com/lvmylife/p/…

5.promise的回调机制

juejin.im/post/5b31a4…

6.阻止冒泡，说说vue中事件的阻止冒泡以及原理

caibaojian.com/javascript-…

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很是常见的需求。尽管咱们能够在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。经过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件再也不重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符能够串联 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
 
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
 
<!-- 只当事件在该元素自己（好比不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
复制代码

使用修饰符时，顺序很重要；相应的代码会以一样的顺序产生。所以，用 @click.prevent.self 会阻止全部的点击，而 @click.self.prevent 只会阻止元素上的点击。

4.基本数据类型

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。

5.若是判断两个对象是否相等

先判断对象属性的长度是否相等，再判断每一个属性的值是否相等 juejin.im/post/5c4169…

6.javascript两个变量互换值，你了解多少?

blog.csdn.net/nyflxp/arti…

7.数组去重12种方法？

segmentfault.com/a/119000001…

vue/React/Angular

1.react跟vue的区别？

相同点：

都有组件化开发和Virtual DOM (提升程序的运行效率)
都支持props进行父子组件间数据通讯
都支持数据驱动试图，不直接操做真是DOM，更新状态数据界面就自动更新
都支持服务器端渲染
都支持natived 的方案，React的React Native, Vue 的Weex, (都支持原生的跨平台运用)

不一样点：

数据绑定：vue实现了数据的双向邦定，react数据流动是单向的
组件的写法不同，React推荐的作法是JSX,也就是把HTML和CSS所有都写进Javascript了，即 'all in js', Vue推荐的作法是 webpack + vue-loader的单文件组件格式，即 html,css,js 写在同一个文件
state对象在React应用中不可变的，须要使用setState方法更新状态，在vue中 state对象不是必须的，数据由data属性在vue对象中管理
virtual DOM不同，vue会跟踪每个组件的依赖关系，不须要从新渲染整个组件树，而对于React而言，每当应用的状态改变时，所有组件都会从新渲染，因此react中会须要shouComponentUpdata 这个生命周期函数方法来进行控制
React严格上只针对MVC的view层，Vue则是MVVM模式

2.Redux 管理状态的机制

对Redux的基本理解

redux是一个独立专门用于作状态管理的JS库，不是react插件库
它能够用在 react,angular,vue等项目中，但基本与react配合使用
做用：集中式管理react应用中多个组件共享的状态和从后台获取的数据

Redux的工做原理

1. redux的结构三个模块：

store (内部管理着状态)
reducers (根据老的状态生成新的状态)
action creator (专门生成action对象的)

2.store内部管理着state状态, react组件跟 reducers的通讯就根据store来的，store至关于桥梁，提供了两个方法，一个读 getState()，一个更新dispatch()。

Redux 使用扩展

使用 react-redux 简化 redux 的编码
使用 redux-thunk 实现 redux 的异步编程
使用 Redux DevTools 实现 chrome 中的调试

vue篇

1.说说Vue组件间通讯方式

通讯种类

父组件向子组件通讯
子组件向父组件通讯
隔代组件间通讯
兄弟组件间通讯

实现通讯方式

(一). props

经过通常标签属性实现父向子通讯
经过 *** 函数 *** 属性实现子向父通讯
缺点：隔代组件和兄弟组件通讯比较麻烦

隔代组件得逐层传递
兄弟组件得借助父组件

(二). vue自定义事件

vue内置实现，能够代替函数类型的props

1). 绑定监听：<MyComp @eventName="callback"
2). 触发(分发)事件： this.$emit('eventName',data)

在父组件写入子组件标签时，给它绑定自定义监听，给它指定回调函数，在子组件中分发事件，vue提供了$emit('指定时间名'，数据)，这时候数据就会从子组件传递给父组件
复制代码

缺点：只适合子向父通讯

(三). 消息订阅与发布

须要引入消息订阅与发布的实现库，如：pubsub-js

1). 订阅消息： PubSub.subscribe('msg',(msg,data)=>{})
2). 发布消息：PubSub.publish('msg',data)

优势：此方式可用于任意关系组件间的通讯

(四). vuex

是什么： vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
优势：对组件间关系没有限制，且相比于pubsub库管理更集中，更方便

(五). slot

是什么：专门用来实现父向子传递带数据的标签

1). 子组件
2). 父组件

注意：通讯的标签模板是在父组件中解析好再传递给子组件的

2.关于vue

vue是由饿了么ued团队开发并维护的一个渐进式js框架
vue是一个mvvm的框架

3.如何使用vue去构建项目

使用vue-cli脚手架工具构建项目
也能够直接引入vue.js进行项目的构建

4.Vue生命周期函数

vue生命周期分为四个阶段:

组件建立时（creating）
模板渲染时（mounting）
数据更新时（updating）
组件卸载时（destroying）

vue生命周期完整过程：

5.Vuex 管理状态的机制

对Vuex基本理解

1). 是什么：Vuex是一个专为Vue.js应用程序开发的状态管理的vue插件
2). 做用：集中式管理vue多个共享的状态和后台获取数据,主要是为了解决组件间状态共享的问题，强调的是集中式管理，主要便于维护，便于解耦，因此不是全部的项目都适合使用vuex。

Vuex的工做原理

6.说出4个vue当中的指令和它的用法

v-if 条件渲染指令，表明存在销毁
v-bind 绑定指令，用来绑定属性（简写方式是：）
v-on 监听事情指令（简写是@）
v-for 循环指令

7.导航钩子有哪些？他们有哪些参数？

导航钩子其实就是路由的生命周期（vue-router）
主要分为全局和局部
全局钩子函数

1). beforeEach: 路由切换开始调用
2). afterEach: 在路由切换离开时调用

局部到单个路由

1). beforeEnter

组件的钩子函数

1). beforeRouterEnter
2). beforeRouterUpdate
3). beforeRouterLeave

参数

1). to:即将进入的目标对象
2). from:当前导航要离开对象
3). next: 是一个函数调用 resolve 执行一下

8.v-model是什么？Vue中标签怎么绑定事件？

vue中利用v-model来进行表单数据的双向绑定
v-bind 绑定一个value的属性
利用v-on 把当前的元素绑定到一个事件上

<div id="demo">
    <input v-model="inputValue" />
    <p>{{inputValue}}</p>
    
    <input v-bind:value="inputValue2" v-on:input="inputValue2 = $event.target.value" />
</div>
<script>
    var vm = new Vue({
        el:"#demo",
        data:{
            inputValue:'',
            inputValue2:''
        }
    })
</script>
复制代码

9.路由懒加载

理解：路由懒加载也叫延迟加载，即在你须要的时候加载

如何使用：使用到了vue中的异步组件，配合webpack的代码分离，只须要本身返回一个permise函数，resolve中只包含你想要用的那个xxx.vue文件就能够了。

//在router文件的index.js中进行懒加载
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

function resolveView(view){
    return ()=> import(/*webpack chunk name*/`@/components/${view}.vue`)
}

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component: resolveView('HelloWorld')
        },
        {
            path:'/detail',
            name:'Detail',
            component: resolveView('Detail')
        },
    ]
})
复制代码

10.Vue-loader 解释一下

(一).什么是vue-loader?

vue-loader 就是一个加载器，能把.vue组件转化成Javascript模块

(二).为何咱们要转译这个vue组件

能够动态的渲染一些数据
对三个标签都作了优化，script中能够直接使用es6 style 也默承认以使用sass,而且还提供了做用域的选择
另外开发阶段，还提供了热加载

11.用过插槽码？用的具名插槽仍是匿名插槽呢？

含义：

vue中的插槽是一个很是好用的东西，slot 说白了就是一个占位
在vue当中插槽包含三种一种是默认插槽（匿名插槽），一种是具名插槽，一种是做用域插槽

1). 匿名插槽 ：就是没有名字的，只要默认的都填到这里
2). 具名插槽 ：指的是具备名字的
3). 做用域插槽 ：指只做用域当前的slot

举例：

//子组件about.vue
<template>
    <div>
        <h2>关于插槽</h2>
        <slot name="header"></slot>                 /*具名插槽*/
        <slot></slot>                               /*匿名插槽*/
        <slot name="footer" say="hello"></slot>     /*say='hello'传递的参数*/
    </div>
</template>
<script>
    export default {
        name:'about'
    }
</script>

复制代码

//父组件：helloWorld.vue
<template>
    <div>
        <About>
            <h2>这是HelloWorld组件的内容</h2>
            <div slot="footer" slot-scope="aaa">
                {{aaa}}这是底部
            </div>
            <div></div>
            <div slot="header" slot-scope="aaa">
                {{aaa}}这是头部
            </div>
        </About>
    </div>
</template>
<script>
import About from '@/componts/About';
export defalut {
    name:'HelloWorld',
    components：{
        About
    }
}
</script>

复制代码

打印结果：

12.说说你对vue虚拟DOM的理解

(一).什么是虚拟dom

说白了就是以js对象的形式去添加dom元素
本质上是优化了diff算法
采用了新旧dom的对比获取你差别的dom，一次性更新到你真实的dom上
虚拟dom自己也有本身的缺陷，他更适合批量修改dom
尽可能不要跨层级修改dom
设置key 能够最大的利用节点

13.如何理解Vue的MVVM模式

(一). mvvm 和 mvc 之间的区别

mvc 指的是model view controller
mvvm指的是model view viewModel
而vue专一于view 和 viewModel 的框架

(二). mvc流程

用户输入数据(view) =>给到控制器(controller)=>控制器判断能够把数去传递给model => model传递完数据会再给到view
有时候用户把数据(view)传递给控制期(controller),controller会判断这个数据不须要通过数据库请求，就能够把数据直接返回给view
view 不须要业务处理，只须要数据请求，view 也能够直接像model请求

(三). mvvm流程

14.Vue中keep-alive的做用

(一).什么是keep-alive

说白了它能让不活动的组件 "活着"
它提供了 include 和 exclude 两个属性容许组件有条件的缓存

(二).实现的原理

其实就是在created的时候将须要的缓存的vnode节点放到 cache 中，在render的时候根据name进行取出

(三).怎么使用它

在路由的meta中添加 keepAlive 属性
跟 router-view 配合使用的

// router/index.js
export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:resolveView('HelloWorld'),
            meta:{
                keepAlive:true
            }
        }
    ]
})
复制代码

// App.vue
<template>
    <div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </div>
</template>
复制代码

$route.meta.keepAlive 根据页面的不一样状况来缓存

项目中遇到的问题

1.swiper插件从后台获取数据没问题，css代码啥的也没有问题，可是图片不动，应该怎么解决？

（一）主要缘由:是 swipter 提早初始化了，而这个时候数据尚未彻底出来。

（二）解决方法：

从vue入手：

vue中专门提供了一个方法 nextTick() 用于解决dom的前后执行问题
复制代码

从swiper入手(observer属性,observeParents属性)：

var myswiper = new Swiper('.swiper-container',{
    autoplay:true,
    loop:true,
    observer:true,      //swiper跟子元素发生变化时，自动初始化
    observeParents:true     //swiper跟父元素发生变化时，自动初始化
})
复制代码

2.vuejs项目性能优化(打包dist文件过大)

www.jianshu.com/p/41075f1f5…

3.vue项目中遇到的问题

www.bbsmax.com/A/kmzLPblGz…

node篇

1.对于前端来讲为何要学node?

如今前端在写代码的时候并非像原生那样，是把前端代码看成一个工程来写，而工程要创建在node之上，由于咱们在工程里面，好比vue,react代码实际上这些代码根本没法在浏览器上运行，咱们得经过 webpack 这样的工具来编译转换，转换成能在浏览器上运行的代码，而 webpack 是经过 node 来实现的，因此学node主要是理解前端工程化的东西，否则就不知道npm 是什么，wepack的底层是什么，因此遇到工程化比较深的时候就理解不了了
因此node 前端该学，可是学的主要目的不是为了写后端，主要为了了解前端的工程化

2.Node如何作版本升级？为何要使用nvm?

(一). 为何有的时候咱们要对node的版本进行升级

什么状况下须要把 node v8.0 升级到 node v11.0 ?

新的语法可能在老的版本里面不支持
(新版本的node比老版本的node的打包效率要高不少) vue-cli 须要 node版本>8.1.0 ,其实是由于底层的webpack,当咱们的项目很复杂的时候，打包的文件特别特别多，打包速度就会很是的慢，webpack 如今已经升级到了4.0了，webpack比较依赖于新的node的api,从而提升它的打包效率

如何升级node版本？(须要 nvm 的支持)

(二).nvm是什么？

它容许你在你的电脑上安装不一样的node的版本，你能够自由的进行切换

npm install nvm     //安装nvm
nvm ls              //查看安装版本
nvm install v11.0.3 //安装新的版本
nvm use v.11.0.3    //使用某个版本
复制代码

模块化的差别,AMD,CDM,COMMONJS,ESMONDULE

AMD含义

AMD 是依赖前置, 好比angular.js

区别

1. AMD,CDM 没有什么差别

2. COMMONJS 能够理解为是 CMD 的一个具体实现，在耦合性上会强一点, 模块的引入是运行时的引入的机制，是动态的引入，能够放在if else 中去引用。

if (true) {
    const path =  require('path');
} else {
    const path = require('fs');
}
复制代码

3. ESMONDULE:es这种模块化的引入是要放在最前面，而且不能放在任何逻辑里面，是静态的引入，你要引入什么是一开始就决定好的。

静态引入的好处：能够作代码的预分析，webpack 里面会有一个依赖托普，只有你的代码是一个import 的语法引入的时候，才能静态的去帮你分析项目的一个依赖结构，帮助你快速打包，若是你不是import这种语法的话，要想用webpack是不可能的

//错 不能这样写
if (true) {
    import a from 'a';
} else {
    import b from 'b';
}
复制代码

http篇

1.一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？

一、用户打开URL连接（域名）

二、浏览器查询的URL的DNS地址（IP地址）

三、DNS服务器查询到IP以后返回给浏览器

四、浏览器根据返回的IP地址向web服务器发起请求

5 、web服务器接收请求并处理，以后返回相应的数据（HTML、css、js等信息）给浏览器

六、浏览器接收到返回的数据以后便开始解析数据过程以下：
   a：解析HTML -- 语法分析

   B：构建DOM树

   C：解析CSS文件

   d：布局DOM节点

   浏览器在此过程当中还会遇到一些引用的图片，此时还会继续向服务器发出请求，但不会发生阻塞，而是继续往下执行代码;固然还有可能会遇到的JavaScript的标签并执行，此时若是须要发出请求的话，浏览器会发生阻塞，知道请求，解析，执行完了以后才会继续往下执行代码;（缘由是浏览器防止JS脚本中出现修改DOM的状况致使须要从新布局DOM节点）

   e：绘制DOM节点（解析到HTML的结束符）---完成

   f：回流，简单来讲该步骤的执行是因为dom节点受到了js或者是css的影响致使页面发生重绘。
复制代码

www.cnblogs.com/dinghuihua/…

2.HTTP常见状态码

下面是常见的HTTP状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
复制代码

www.runoob.com/http/http-s…

3.客户端发送一个HTTP请求到服务器的请求消息包括如下格式

请求行（request line）、请求头部（header）、空行和请求数据

4.HTTP响应也由四个部分组成

状态行、消息报头、空行和响应正文