【无标题】

1、对盒子模型的理解
是什么
当对一个文档进行布局时，浏览器的渲染引擎会根据css基础框盒模型，将所有元素表示为一个个矩形的盒子；
一个盒子有四部分构成：content（内容，显示文本和图像） padding（内边距） margin（外边距） border（边框）
标准盒模型
padding 、margin和border会增加元素的宽高
IE盒模型
border和margin padding已经算在宽高中，会压缩元素，不会让宽高变大
2、什么是跨域
受同源策略的影响 ajax只能请求同域名同端口的数据
解决
1.与后台人员沟通允许跨域
2.jsonp：因为script标签不受同源策略的影响，可以将指定格式的请求地址写入src属性
3.配置服务器代理
4、减少页面加载时间的方法（优化前端性能）
html
减少标签的嵌套
css
1.适当的引入动画
2.多使用雪碧图
3.服务器字体替代图标
4.尽量使用内部样式表
js
1.减少for循环的嵌套
2.懒加载
3.减少外部js的引入
5、三种存储方式的区别
cookie是一个自动往返于前端后台的信使，储存内容较少，有过期时间，过期后消失
localstorage本地存储，存储量较大，一直存储，需要手动清理
sesstionStorage 会话存储，存储量较大，关闭窗口后消失
6、css选择器有那些
id选择器：#
class（类）选择器：class名
标签选择器：div
子代选择器：div>span
后代选择器：div p img
组合选择器：h1,h2,h3
伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
伪类元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

7、display 有哪些值？ 说明他们的作用？
display：block----把标签转化为块属性元素
display: inline-block ----把标签转化为行块属性元素
display：inline----把标签转化为行属性标签
display：none----隐藏

8、position 的值?
position：fixed（固定定位）
position：absolute（绝对定位）
position：relative（相对定位）

9、display：none; 与 visibiliby: hidden 的区别？
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，
通俗来说就是看不见也摸不到。
visible:hidden—使对象在网页上不可见，但该对象在网页上所占的空间没有改变，
通俗来说就是看不见但摸得到。
10、v-show 和 v-if 指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏。
不同点：v-show：显示或隐藏（若果为真，就显示）
v-if：渲染或不渲染（如果为真，就渲染）
11、怎么定义 vue-router 的动态路由? 怎么获取传过来的动态参数？
可以通过query 和 params两种方式
区别： query通过url传参，刷新页面还在 params刷新页面不在了
params的类型:
配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123
（可以通过$route.params.userid获取你说传递的值）query的类型配置路由格式:/router,也就是普通配置传递的方式:对象中使用query的key作为传递方式传递后形成的路径:/route?id=123（可以通过$route.query 获取你所传递的值）
12、 v-model 是什么？怎么使用？
答：v-model (input / select / textarea)
作用：双向数据绑定
原理：当表单元素的内容发生改变时，触发对应的表单事件，在事件中完成对数据的修改。

13、javascript 的typeof返回哪些数据类型。
Object
number
function
boolean
undefind
String
Symbol(ES6)
注意：没有数组array，若为数组则返回object。
14、ajax 请求的时候get 和 post 方式的区别是什么？
（1）get提交的信息都是明文，post是通过内部的包来发送的更安全
（2）因为get的信息需要拼接到url，所以大小受到限制，一般用来获取数据，post的信息不受大小限制，所以常用来提交数据以及上传或者下载文件
15、React有什么特点？
答：
react vue最大的特点是跨平台,打破了苹果的生态系统，还有就是react是数据驱动视图，一切皆组件
React是用于构建用户界面的JavaScript库
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。

16、列出React的一些主要优点。
答：react速度很快 ，跨浏览器兼容，一切都是component，单向数据流，同构纯粹的JavaScript，兼容性好，声明式开发，可以与其他框架并存
17、写出一个宽300，高300的浮动容器，水平且垂直居中的方法。

18、谈谈你对HTML5 和 CSS3 的了解情况。
答：HTML5:
• 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，作为HTML语言，具有新的元素、属性和行为。广义的HTML5是HTML5本身 + CSS3 + JavaScript.
• 比如新增的语义化标签，新增的多媒体标签（video，audio），input表单

19、看下面的代码，给出输出的结果。
for(var i = 1. i <= 3; i++){
setTimeout(function() {
console.log(i);
},0);
};

答：输出3个4
20、编写一个方法，去掉一个数组中的重复元素。（数组去重）

21、 如何阻止默认事件？
答：e.preventDefault（）
22、同步和异步的区别？如何解决跨域问题？
（1）解释
同步：上一个任务结束，下一个任务再开始，会阻塞线程
异步：多个任务按顺序开始，不一定按顺序结束
（2）举例：
比如alert弹窗就是个同步的例子
比如图片的加载就是异步的例子
（3）在哪里用过
登录注册一般使用同步的方式
页面多模块的信息，一般使用的是异步的方式

23、ES6的新特性有哪些？
答：思维导图

24、列举HTTP常见状态码及其含义？
200：成功 300：重定向 400：找不到文件 500：服务器错误
25、闭包是什么？
答：形式：在一个函数里实现另一个函数
作用：局部变量数据持久化
缺点：造成一定的内存压力
26、vue的指令有哪些？
答：v-show、v-if、v-for、v-text、v-html、v-on
27、 vue 的生命周期有哪些？（8个钩子函数）
Activated
De

28、前端性能优化有哪些方法？
答：1、减少http请求数；2、图片优化；3、使用CDN；4、开启GZIP（数据压缩）；5、样式表和JS文件的优化；6、使用无cookie域名7. 前端代码结构的优化
29、 谈谈你对MVC 和 MVVM 的理解？
答：MVC：（MVC全名是Model View Controller）是一种设计理念，将代码进行逻辑分离，分为控制层（controller）视图层 (view)
数据层（model）

作用：降低了代码的耦合度，提高了代码的扩展性，易修改性，复用性，独立性
MVVM：（MVVM是Model-View-ViewModel的简写）
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

30、分析下微信小程序的优劣势？
答：优势：
1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。
劣势：
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信，无法开发后台管理功能。
31、什么是响应式开发？
答：顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格

1. 媒体查询
2. 使用em或rem做尺寸单位：用于文字大小的响应和弹性布局。
3. 禁止页面缩放 ：
4. 屏幕尺寸响应
5. 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。
6. 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。
7. 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
8. 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

32、叙述一下TCP的三次握手和四次挥手，建立连接为什么需要3次握手？
第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；
SYN：同步序列编号(Synchronize Sequence Numbers)
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.
四次挥手
（1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态 。
（2）第二次挥手：Server收到FIN后 ，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态 。
（3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
（4）第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1 ， Server进入CLOSED状态， 完成四次挥手。
原因：为了应对网络中存在的延迟的重复数组的问题

33、为什么会出现浮动和什么时候需要清除浮动？ 清除浮动的方式？
如果父元素不设置高度，一旦子元素浮动，父元素会失去高度，父元素的同级元素会钻进去（会影响页面布局）
给父元素设置overflow：hidden 高度
34、叙述一下你对Vue的理解？

35、能用JS写分别写出深拷贝和浅拷贝吗？ 如果可以，请写出。

1. 浅拷贝是拷贝的内存地址，使新对象指向拷贝对象的内存地址。深拷贝是重新开辟一块内存空间，用来存放sources对象的值。

36、请写出浏览器输入www.baidu.com到页面渲染全流程。

37、怎么清空数组?

38、 拓展运算符可以干什么？