应届时前端开发面试总结

1.如何解决跨域问题

1你是怎么解决跨域问题的？

• 什么是跨域？
• 跨域是浏览器的同源策略引起的。是指页面所请求的url地址必须与浏览器的url地址处于同域上（域名、端口、协议相同）。这是为了防止某域名下的接口被其他不同域的网页非法调用，是浏览器对js施加的安全限制。
• 如何解决跨域问题？
  • ① jsonp
    因为在html中script的src是不限制同源的。当链接的资源到达浏览器时，浏览器会根据他们的类型采取不同的处理方式（如果是css文件，则会进行对页面 repaint，如果是img 则会将图片渲染出来，如果是script 脚本，则会进行执行）。jsonp方式就是利用了资源到达浏览器会被执行的特性，来达到跨域的目的的。注：jsonp只能get请求。
  • ② CORS统一资源共享，设置跨域请求头，Access-Control-Allow-Origin。
  • ③ Proxy 模拟服务器

2.Vue的常用指令？

• v-html：插入html文本
• v-text：插入纯文本
• v-if：根据布尔量表达式，判断是否渲染该元素。
• v-show：会给false元素增加一个css样式，display：none；
• v-else：必须跟在v-if或者v-show指令之后，否则不起作用。
• v-for：实现循环
• v-bind：绑定某个class元素或者元素的style、属性，简写：。
• v-on：绑定时间监听器，可以简写@。
• v-model：实现双向数据绑定。（这里面试官曾让举例子说明双向数据绑定，最直观的例子便是我们在input框里面输入数字，vue的data存储的数据随之改变）。

3.v-if和v-show的区别？
v-show是使用css中的display：none；样式，在呈现树中有，文档树中没有，物理内存中有，更多渲染消耗。v-if：内存动态变化，不适用于频繁切换。

4.常用的CSS3？

• 边框：border-radius/shadow/image…
• 背景：background-image/size/origin/clip
• 渐变：background：linear-gradient （to … , …）
• 文字效果、自定义字体、2d/3d转换

5.简述一下Vue的状态管理

• 首先Vuex的核心属性有state、getters、mutations、actions、module。state用来存储数据，getter是store的计算属性，提交mutation是提供更改VUEX的store状态唯一方法，action里面包含任意异步操作，通过提交mutation简介变更状态。module将store分割成模块，每个模块都拥有自己的store，mutations，action，getters。
• 当我们组件进行数据修改的时候，我们调用actions里边的方法，actions里面的所有方法都会有一个commit方法，这个方法会触发mutations里面的方法进行数据的修改，当数据修改完毕之后，就会渲染到页面，页面数据就会发生改变。

6.简述一下Vue与微信小程序的区别？

• ① 生命周期函数不一样：
  • 微信小程序为onLoad：页面加载，onShow：页面显示，onReady：页面初次渲染完成，onHide：页面隐藏，onUnload：页面卸载。
  • Vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。beforecreate、created适合做网络请求、beforemout更新data、mouted、beforeupdate、updated、beforedestory、destroyed。
• ② 数据请求时间不一样：在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在 created或者 mounted中请求数据，而在小程序，会在 onLoad或者 onShow中请求数据。
• ③ 数据绑定方式不一样：vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号。小程序：绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。
• ④ 显示与隐藏元素不一样：vue中，使用 v-if 和 v-show控制元素的显示和隐藏。小程序中，使用 wx-if和 hidden控制元素的显示和隐藏。
• ⑤ 事件处理不一样：vue：使用 v-on:event绑定事件，或者使用 @event绑定事件；小程序中，全用 bindtap=“”，或者 catchtap=‘’绑定事件，catchtap阻止事件冒泡。
• ⑤ 数据双向绑定不一样：在vue中，只需要在表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时， data中对应的值也会相应改变。在小程序中，当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData({key:value})来将表单上的值赋值给 data中的对应值。
• ⑥ 绑定事件传参不一样：在vue中，绑定事件传参只需要在触发事件的方法中，把需要传递的数据作为形参传入。在小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的 data-属性上，然后在方法中通过 e.currentTarget.dataset.*的方式获取，从而完成参数的传递。
• 父子组件通信不一样：
• ①子组件创建不一样：在vue中，需要：1、编写子组件；2、在需要使用的父组件中通过 import引入；3、在 vue的 components中注册；4、在模板中使用。在小程序中，需要： 1、编写子组件 2、在子组件的 json文件中，将该文件声明为组件；3、在需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径；4、在父组件中，直接引入即可；
• ②父子组件传值不一样：**在vue中，**父组件向子组件传递数据，只需要在子组件通过 v-bind传入一个值，在子组件中，通过 props接收，即可完成数据的传递，子组件和父组件通信可以通过 this.emit将方法和数据传递给父组件。在小程序中，在小程序中
  父组件直接将值赋值给一个变量，在子组件 properties中，接收传递的值。
• ③如果父组件想要调用子组件的方法vue会给子组件添加一个 ref属性，通过 this.refs.ref的值便可以获取到该子组件，然后便可以调用子组件中的任意方法。
  小程序是给子组件添加 id或者 class，然后通过 this.selectComponent找到子组件，然后再调用子组件的方法。

7.怎样用CSS实现三角形？

• 设置一个盒子的高度为0，在设置border，其余三边颜色设为trasparent，宽度四边都设置为一样。

8.怎么实现在一行左边盒子固定宽度200px，右边盒子占剩余的所有宽度。

• 法①：给右边盒子设置width ：calc（100% - 200px），并且给左右元素分别float：left和float：right样式。
• 法②：给父盒子设置position：relative；左盒子设置position：absolute，宽度200px；右盒子宽度100%；
• 法③：父盒子padding-left：200px和box-sizing:border-box；左盒子width：200px和left：-200px ，float：left；右盒子width：100%，float：right；

9.简述一下CSS中的垂直居中的方法？

• 法①：父元素display：flex，子元素align-self：center；
• 法②：子元素position：relative；margin-top：-子元素的一半。

10.简述一下水平居中的方法？

• 法①：margin：auto；
• 法②：父盒子display:flex，flex-direction:column;子盒子align-self:center；
• 法③：父盒子display：table-cell，子元素给剩余宽度一半的margin-left；
• 法④：父元素position:absolute，子元素给剩余宽度一半的margin-left。

11.em，px，rem的区别？

• px:像素，相对于设备的大小的长度单位。像素是相对于显示器的屏幕分辨率而言的。windows用户一般是96px每英寸，MAC用户72px每英寸。
• em：相对长度单位。相对于父元素对象内文本字体尺寸，如果当前行内文本的字体未被设置，则相当于浏览器的默认字体尺寸。
• rem:css3新增单位，相对于根元素的字体大小的单位。

12.简述一下原型与原型链？

13.继承的方式？

14.简述一下闭包的概念？
https://www.cnblogs.com/amcy/p/9912528.html

15.前端优化的方案？

• 减少http请求：多用精灵图、合理设置http缓存，合并压缩css，js，image，适当利用懒加载、预加载。
• 减少不必要的http跳转。
• 避免重复的资源请求。
• 减少作用域的查找。
• 使用CDN内容分发网络。

16.例举一下边框的间隔属性？

• border-spacing：相邻单元格的边框距离；
• border-collapse：collapse单元格边框合并；

17.怎样用npm下具体版本的依赖？

• 例如npm install react-router@2.8.1 --save-dev 只需用@加上版本号。

18.github拉取、上传的指令？

• git clone git@github.com:balabala/myobj.git
• 进入到当前项目目录下：cd myobj 然后git add . 点(.)表示全部追加进去，也可以指定具体的文件名；
• git commit -m ‘更新’
• 把本地代码推送到服务器的仓库里：Git push origin master或者直接 git push也可以；

19.JS怎么实现数组的随机排序？
https://www.jianshu.com/p/e2e020ce4e3f

20.简述http如何发送请求？

21.IE9是否兼容CSS3选择器？否

22.Vue的优点？

• vue两大特点：响应式编程、组件化
• vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

23.link和@import的区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载。 @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱。
（3）import只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
（4）link支持使用JS控制DOM去改变样式，而@import不支持。

24.typeof与instanceof的区别？

• typeof其实就是判断参数是什么类型的实例，就一个参数
• typeof 一般只能返回如下几个结果：“number”、“string”、“boolean”、“object”、“function” 和 “undefined”。
• 我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!=“undefined”){alert(“ok”)}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
• instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
  语法：object instanceof constructor
  参数：object（要检测的对象.）constructor（某个构造函数）
  描述：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

25.Jquery怎么实现盒子淡出？

26.常用的数组的方法？

• https://www.cnblogs.com/jinzhou/p/9072614.html

27.常用的字符串的方法？

• https://www.cnblogs.com/hcxy/p/7376648.html

28.JS基本数据类型?

29.简单介绍webpack？

• Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。

30.简述一下MVC与MVVM的区别？

• MVC 是开发客户端最经典的设计模式
  用户操作 --> View（负责接收用户的输入操作）–> Controller（业务逻辑处理）–> Model（数据持久化）–> View（将结果反馈给 View）
• 在开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 中。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 的交互，这就导致了 Controller：逻辑复杂，难以维护和 View 紧耦合，无法测试。
• MVVM 以“数据双向绑定”为核心思想。
• View 和 Model 之间没有联系，通 ViewModel 进行交互，而且 Model 和 ViewModel 之间的交互是双向的，因此视图的数据改变会同时修改数据源，而数据源的数据变化也会立即反映到 View 上。

31.get和post的区别？

• get可以通过URL直接传参；get和post都可以通过bode传参。
• get有大小限制，post一般没有大小限制。
• get方式取药使用request.querystring来获取变量的值。post通过request.from通过表单来传值。
• 安全性

32.img的title和alt的区别？

• alt用于图片无法显示的时候显示；title为该属性的提供信息，通常当鼠标滑动到元素上时显示。

33.描述一下cookies，sessionStorage、Localstorage？
*共同点：都是保存在浏览器端，且同源的。
区别：

• 1.cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间传递,而sessionstorage和localstorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有 path的概念，可以限制cookie只属于某个路径下。
• 2.存储大小限制也不同
  cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只合适保存很小的数据，如会话标识。sessionstorage和localstorage虽然也有存储大小的限制，但比cookie大的多，可达到5M
• 3.数据有效期不同
  sessionstorage仅在当前浏览器窗口关闭之前有效。localstorage始终有效，窗口或浏览器也一直保存，因此用作持久数据，永久存储，除非手动删除。cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。
• 4.作用域不同
  sessionstorage在不同的浏览器窗口中共享，即使是同一个页面；localstorage和cookie在所有同源窗口中都是共享的

34.HTML5的新特性？

• 二维画图中的元素
• 媒体播放的 和元素
• 支持本地存储
• 新增的input type属性值、常用新属性
• header：定义文档的头部区域
• nav：定义导航链接的部分
• footer：定义section或document的页脚
• article：定义页面独立的内容区域
• section：定义文档的节（section、区段）
• aside：定义页面的侧边栏内容
• datalist：定义选项列表，与input结合使用
• fieldset：可将表单内的相关元素分组打包，与legend搭配使用
• mark：用于定义带有记号的文本。在需要突出显示文本时可使用 标签。
• meter：定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。不能当做进度条使用。注意：IE浏览器不支持meter标签。

35.解释一下对同步和异步的理解？
https://www.cnblogs.com/zhengyeye/p/8980461.html

36.优雅降级和渐进增强？

• 它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：
• 渐进增强，一开始就构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。
• 优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。
• web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是禁用了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。
• 当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）
  (讲讲在平时项目中，在“渐进增强”和“优雅降级”的努力)

37.JQuery与Vue的区别？

• jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
• Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

38.ajax的过程？

39.简述一下src与href的区别？

• src指向外部资源，指向的内容会嵌套到文档中当前所在的标签的位置，src是引入文件，主要用于img script这样的标签；
• href是链接跳转，主要用于link a这样的标签。

40.简述一下对canvas的理解?

41.简述一下ES6?

• 1、let关键字，用于声明只在块级作用域起作用的变量。
• 2、const关键字，用于声明一个常量。
• 3、结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值。
• 4、Symbol数据类型，定义一个独一无二的值。
• 5、Proxy代理，用于编写处理函数，来拦截目标对象的操作。
• 6、for…of遍历，可遍历具有iterator 接口的数据结构。
• 7、Set结构，存储不重复的成员值的集合。
• 8、Map结构，键名可以是任何类型的键值对集合。
• 9、Promise对象，更合理、规范地处理异步操作。
• 10、Class类定义类和更简便地实现类的继承。

42.完美三等分？

• 法①：将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比。
• 法②：父元素 display:table + 子元素 display:table-cell
• 法③：父盒子display:flex；+子盒子flex：1；
• 法④：栅格布局

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

• DNS域名解析；
• 三次握手建立TCP连接；
• 浏览器通过get/post请求数据；
• 服务器发回数据
• 浏览器解析html生成DOM树，再根据CSS生成渲染树；
• 浏览缓存相应的信息，查看是否需要更新缓存；
• 呈现页面。

44.普通函数和构造函数的区别？
https://www.jianshu.com/p/4d8450fe3f4b

45.箭头函数和普通函数this的指向？

• 普通函数中的this:
  1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
  2. 在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window
  3. 在严格模式下,没有直接调用者的函数中的this是 undefined
  4. 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
• 箭头函数中的this
  默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window（即继承父级的this）;
  https://www.cnblogs.com/lemonmonster/p/8482232.html
  
  46.cookie与session的区别是什么？
  https://zhidao.baidu.com/question/575343552.html

笔试题：
1.复选框实现按钮全选？全不选？
https://blog.csdn.net/mover999/article/details/82913672

2.编程百钱百鸡的问题？