Zxy_i

作者: Zxy_i | 来源:发表于2021-02-21 23:03 被阅读0次

1.进程和线程的区别和关系

1.进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。
2.一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线；
3.进程之间相互独立，但同一进程下的各个线程之间共享程序的内存空间

2.单页面应用和多页面应用区别

1. 单页面（SPA） 指一个页面只有一个主页面应用，浏览器一开始要加载所有必需的 html，js，css，所有页面内用都在主页面中。但写的时候还是会分开写。
然后在交互的时候由路由程序动态载入，
2.多页面（MPA）就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面优点
-用户体验好，快，内容的改变不需要重新加载整个页面
-前后端分离
-页面效果会比较炫酷

单页面缺点
-不利于seo
-导航不可用
-初次加载时耗时多
-页面复杂度提高很多

3.浏览器中的回流和重绘是什么，分别在什么情况下触发？

重绘
当前元素的样式（背景颜色，字体颜色）发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对于浏览器的性能较小。
发生重绘的情形：改变容器的外观风格等，比如background:black等。改变外观，不改变布局，不会影响到其他的DOM。

回流
浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
1.页面首次渲染
2.浏览器窗口大小发生改变
3.元素尺寸或者位置发生改变
4.元素的内容发生变化
5.元素字体大小变化
6.添加或者删除可见的DOM元素

4.一次完整的HTTP请求过程

1、使用DNS域名解析；

2、发起TCP的3次握手

3、建立TCP连接后发起http请求；

4、服务器响应HTTP请求，浏览器得到html代码；

5、浏览器解析html代码，并请求html代码中的资源（如js、css图片等）；

6、浏览器对页面进行渲染

5.TCP三次握手和四次挥手

【第一次握手】
客户端向服务器发出连接请求报文，表示客户端想要和服务端建立连接。
【第二次握手】
TCP服务器收到请求报文后，如果同意连接，则发出确认报文。询问客户端是否准备好。
【第三次握手】
CP客户进程收到确认后，还要向服务器给出确认，这里客户端表示我已经准备好。
第一次挥手
客户端进程发出连接释放报文，并且停止发送数据
第二次挥手
服务器收到连接释放报文，发出确认报文，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。。
第三次挥手
服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，服务器就进入了（最后确认）状态，等待客户端的确认。
第四次挥手
客户端收到服务器的连接释放报文后，必须发出确认，服务器只要收到了客户端发出的确认，立即进入关闭状态。结束了这次的TCP连接。

6.常见跨域及解决方案

原因：是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。
同源策略：是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
1. 通过jsonp跨域
我们把js、css，img等静态资源分离到另一台独立域名的服务器上，
在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，
基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
2. 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
3. nginx反向代理接口跨域
通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，
并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域

-------------------------------------------CSS--------------------------

1.标准盒模型和IE盒子模型的区别

标准盒模型：占据空间=width+margin+padding+border
IE盒子：占据空间=width+margin
box-sizing : content-box || border-box || inherit;
content-box时，标准模式
border-box时，怪异模式
inherit时，从父元素来继承box-sizing属性的值

2.CSS3中弹性盒(Flex)布局

设置display为flex,容器被渲染为一个块级元素。
设置display为inline-flex,容器被渲染为一个行内元素

定义伸缩方向
flex-direction:
row:从左向右排列
row-reverse: 从右向左排列
column: 从上到下排列
column: 从下向上排列

定义对齐方式
1.主轴对齐--justify-content:
flex-start: 位置左靠齐
flex-end: 位置右靠齐
center:居中
space-between: 两端对齐，中间居中
space-around: 两端留白，中间居中

2.侧轴对齐 --align-items:
flex-start: 侧轴起始位置。
flex-end:侧轴结束位置。
center:居中。
base-line:根据他们的基线对齐。
space-around: 拉伸填充整个伸缩容器

3.flex-wrap： 设置是否换行
4. align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

3. rem使用及原理

1.rem是相对长度单位
相对于根元素(即html)ont-size计算值的倍数的一个css单位，默认1rem=16px；

2.rem的移动适配原理
设计稿宽度：600px
移动设备：600px
设置html的font-size= 移动设备(600) / 设计稿宽度(600) * 100 = 100px，那么width=1rem = 100px，此时这个盒子屏占比为：1/6

当运行在屏幕为300px的设备上时，font-size= 移动设备(300) / 设计稿宽度(600) * 100 = 50px，那么width=1rem = 50px，此时这个盒子屏占比为：1/6
以此达到移动适配的效果，乘以100是为了px换算为rem时好计算

3.设置html的font-size大小
720为设计稿尺寸
document.getElementsByTagName("html")[0].style.fontSize =(document.documentElement.clientWidth/ 720) 100 + 'px'

4.transition、transform、animation（过渡，变换，动画）

(1.)transition（过渡）就是一个属性从一个值过渡到另一个值
包含四个值，transition-property（执行变换的属性），transition-duration（执行变换的持续时间）,transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。

(2.)transform（变换）就是一个整体的位置（或整体大小）发生变换
包含值：rotate（围绕中心点旋转若干度）， translate（x,y）移动， scale（缩放），skew扭曲（倾斜）。
transform-origin：改变中心点。

(3.)animation（动画），就是在一段时间内各种属性进行变化从而达到一个动画的效果。
animation有两个关键。
一个是 keyframes 用 @keyframs 开头，后面接一个动画名，然后用大括号括起来，在里面写每一个关键帧的属性
一个是 animation的属性值
animation-name(动画名，也就是keyfram中定义的动画名)
animation-duration（动画持续时间）
animation-timing-function（动画变化的速率）
animation-delay（动画延迟播放的时间）
animation-iteration-count（动画循环的次数，infinite是无限次）
animation-direction（动画的方向0到100%）
animation-play-state（动画的播放状态播放暂停）

5.css元素垂直水平居中（六种）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <div id="box" style="width: 200px; height: 200px; border:  solid red;">
            <div id="sub" style="width: 100px; height: 100px; border:  solid blue;"></div>
        </div>
    </body>
    <style type="text/css">
        /* 第一中 */
        /*       #box{
             position: relative;
         }
         #sub{
             position: absolute;
             top: 0;
             right: 0;
             left: 0;
             bottom: 0;
             margin:  auto;
         } */
        /* 第二中 */
        /*       #box{
             position: relative;
         }
         #sub{
             position: absolute;
             top: 50%;
             left: 50%;
             margin: -50px 0 0 -50px;
         } */
        /* 第三种 */
        /* #box{
             position: relative;
         }
         #sub{
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
         } */
        /* 第四种 */
        /*      #box{
            display: grid;
        }
        #sub{
            margin: auto;
        } */
        /* 第五种 */
        /*      #box{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        #sub{
            display:inline-block;
        } */
        /* 第六种 */
        #box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</html>

6.css 圣杯布局（三种）

position 布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- position  圣杯布局 -->
        <!-- 布局顺序不分先后-->
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中</div>
    </body>
    <style type="text/css">
        div {
            height: 200px;
        }
        .left {
            background-color: red;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right {
            background-color: purple;
            width: 200px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .middle {
            background-color: pink;
            position: absolute;
            top: 0;
            left: 200px;
            right: 200px;
        }
    </style>
</html>

display 圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- display  圣杯布局 -->
        <!-- 布局顺序分先后 -->
        <div id="box">
            <div class="left">左</div>
            <div class="middle">中</div>
            <div class="right">右</div>
        </div>
    </body>
    <style type="text/css">
        #box {
            display: flex;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: red;
        }
        .middle{
            background: darkgoldenrod;
            flex: 1;
        }
    </style>
</html>

float 布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <!-- float  圣杯布局 -->
        <!-- div布局分先后 -->
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中</div> //重点
    </body>
    <style type="text/css">
        div {
            height: 200px;
        }
        .left {
            background: red;
            float: left;
            width: 200px;
        }
        .right {
            background: blue;
            float: right;
            width: 200px;
        }
        .middle {
            background: deeppink;
        }
    </style>
</html>

7. 双飞翼布局

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>

        </head>
        <body>
            <!-- 双飞翼布局 -->
            <div id="box">
                <div class="middle">
                    <div class="content">main </div>
                </div>
                <div class="left">left</div>
                <div class="right">right</div>
            </div>
        </body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #box {
                overflow: hidden;
            }
            .middle,
            .left,
            .right {
                float: left;
                height: 200px;
            }
            .left {
                width: 200px;
                margin-left: -100%;
                background-color: blue;
            }
            .right {
                width: 300px;
                margin-left: -300px;
                background-color: green;
            }
            .content {
                margin: 0 300px 0 200px;
            }
            .middle {
                width: 100%;
                background-color: red;
            }
        </style>
    </html>

-------------------------------------------JS-----------------------------

1.JavaScript 基本数据类型和引用类型的区别

原文地址链接
**基本数据类型：undefined,null,boolean,number,string,Symbol **
--无法改变一个基本类型的值
--不可以添加属性和方法
--赋值是简单赋值
-- 比较是值的比较
--存放在栈区的
js引用类型：Object(Array,Function,Date )
--值是可以改变的
--可以添加属性和方法
--赋值是对象引用
--比较是引用的比较
--同时保存在栈区和堆区中的

2.什么是伪数组？如何将伪数组转化为标准数组？

伪数组：
无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push,pop等方法，
但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，
还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
解决：
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

3.JS中的call、apply、bind方法

原文地址
共同点:
1.都是用来改变函数的this对象的指向的；
2.第一个参数都是this要指向的对象，也就是想指定的上下文；
3.都可以利用后续参数传参；
不同点:
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。
call()和apply()唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组

4.new 操作符具体干了什么？

new共经历了四个过程：

    var fn = function () { };
    var fnObj = new fn();

1、创建了一个空对象

var obj = new object();

2、设置原型链

obj._proto_ = fn.prototype;

3、让fn的this指向obj，并执行fn的函数体

var result = fn.call(obj);

4、判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
}

------------------------------------------vue-----------------------------

5.data为什么是一个函数

因为组件会复用，只有每个组件实例维护一份独立拷贝，才不会相互影响

6.computed和 watch 的区别

computed计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。

7.computed和methods区别

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有‘

8.MVVM模式

1.在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model和 ViewModel之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model数据的变化也会立即反应到 View上。
2. ViewModel通过双向数据绑定把 View 层和Model层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，复杂的数据状态维护完全由 MVVM 来统一管理。

9.vue双向数据绑定

原理:是采用** Object.defineProperty** 的 getter 和 setter，用数据劫持和订阅发布实现双向绑定。

实现过程: 通过实例化一个Vue对象的时候，对其数据属性遍历，通过Object.defineProperty()给数据对象添加setter() getter()，
并对模板做编译生成指令对象，每个指令对象绑定一个watcher对象，然后对数据赋值的时候就会触发setter，
这时候相应的watcher对其再次求值，如果值确实发生变化了，就会通知相应的指令，调用指令的update方法，
由于指令是对DOM的封装，这时候会调用DOM的原生方法对DOM做更新，这就实现了数据驱动DOM的变化。
同时vue还会对DOM做事件监听，如果DOM发生变化，vue监听到，就会修改相应的data

11.Vue.$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

12.vue中组件通信

1.父传子
在父组件上通过自定义标签属性的形式来绑定数据。然后子组件props 接收

2.子传父
子组件中通过 this.$emit ('自定义事件名称', '要传递的数据')
父组件通过@自定义事件名称="事件处理函数"，来完成父组件接收的任务

3.中央事件总线bus
原文地址
var bus = new Vue();

bus.$emit('自定义事件名','发送过来的数据')；

bus.$on('自定义事件名'，function(){
//执行。。。
})；

13.简述Vuex工作流程

组件数据修改的时候需要调用dispatch来触发actions里面的方法。
actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。
mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

14.vue-router传参

query和params的区别：地址栏的展现形式不同接收方式不同使用场景的不同

// 第一种：字符串拼接  
this.$router.push(path:/index/${id} )
 this.$route.params.id // 接收


// 第二种：name和 params
 this.$router.push({
 name:'Name',
 params:{id:id}
  })
  this.$route.params.id // 接收

 //第三种：path和query
this.$router.push({
path:'/index',
query:{id:id}
})
  this.$route.query  //接收

15.vue-router的两种模式

两种路由模式：hash模式和history模式。

hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。

如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，适合推广宣传。

当然其功能也有区别，比如我们在开发app的时候有分享页面，

咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，

但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，

那么就需要和后端人配合让他配置一下nginx的url重定向，重定向到你的首页路由上

16.assets和static的区别

static 是第三方资源的（如JQ，swiper）
assets 是放自己写的样式，js
相同点：
assets和static两个都是存放静态资源文件。
不同点：
assets中存放的静态资源文件在项目打包时静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。

17.简述Ajax

原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(Ajax引擎)，
当客户端发送请求时，会由Ajax代替客户端向服务器发送请求，服务器返回数据到Ajax上，Ajax再把数据渲染到页面上

使用：创建XMLHTTpRequest对象建立连接发送请求判断状态码获取数据

18.Ajax和Axios的区别

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

19.Vue.js 混入（mixins）

created：mixins混入先执行，vue实例后执行
methods：有相同的函数名，则 Vue 实例会执行，mixins混入不会执行