前端经典面试题目

1. html5有哪些新特性？

⁃   绘画 canvas

⁃   用于媒介回放的 video 和 audio 元素

⁃   本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

⁃   sessionStorage 的数据在浏览器关闭后自动删除

⁃   语意化更好的内容元素，比如 article、footer、header、nav、section

⁃   表单控件，calendar（日历）、date、time、email、url、search

    

2. 请描述一下cookies，sessionStorage 和localStorage 的区别？

    cookie在浏览器和服务器间来回传递。 essionStorage和localStorage不会

    sessionStorage和localStorage的存储空间更大；

3. CSS清除浮动的几种方法（至少两种）

    ⁃  使用带clear属性的空元素

    ⁃   使用CSS的overflow属性；

    ⁃   使用CSS的:after伪元素；

        eg:#content:after{content:"";display:block;clear:both;} 

4. sass里面的函数声明

    @function funNanme（）{}

    $变量

    Less用@来定义变量

 

5.bootstrap12删格系统的不同终端尺寸

•   1200.  992. 768 

 

6. 介绍css的盒子模型？

     有两种， IE 盒子模型(怪异)、标准 W3C 盒子模型；

    IE的content部分包含了 border 和 padding;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

7. Css3 有哪些新特性？

•   CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），

•   对文字加特效（text-shadow、），线性渐变（gradient），

分为linear-gradient（线性渐变）和 radial-gradient（径向渐变）

旋转（transform）

•  transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

•   增加了更多的CSS选择器多背景 rgba

•   动画@keyframes名称{}

语法结构:

@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用"from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。

 

•   过度效果 transition

            帧动画  animation是个复合属性。检索或设置对象所应用的动画特效。如果提供多组属性值，以逗号进行分隔。  

8. ajax中的get和post区别？

   1. Get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接；Post 方法通过 HTTP post 机制，将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端

     2. Get 方式传输的数据量非常小，一般限制在 2 KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大

     3. 安全问题：get没有post安全

 

 

9.谈谈This对象的理解。

1. this在构造函数中指的是构造函数实例化得到对象的原型

2. this在对象的方法中指的是当前对象

10. 面向对象继承的几种方法？

 1.call

2.apply

3.原型继承

4.原型链继承

11、AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）

12.ajax 四部曲及返回数据处理方式？

1.创建

(1).得到XMLHttpRequest对象 AJAX对象     

newXMLHttpRequest( )；

newActiveXObject("Microsoft.XMLHTTP" ) ie6

 2.请求

get方式

    xhr.open("get","login.php?aa=1&bb=2&cc=3",true/false)配置 第三参数 是否异步

 get请求 会把要提交的信息（aa=1&bb=2&cc=3"）添加到地

址栏的后面速度快 配置简单不安全

post方式

    xhr.open("post","login.php",true/false)配置

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//将我们的请求添加到头部报文中

post请求 安全性比较高 配置复杂一些 传递一些数据量比较大的数据

3. 发送

    xhr.send()发送请求

    xhr.send("aa=1&bb=2&cc=3")

 4.响应

 通过一个函数xhr.onreadstatechange来处理对象的执行结果

        xhr.readyState

        4 响应已经完成

xhr.status 判断状态码（判断页面返回的数据是否成功） 数据报文

200 表示成功

304 数据未做修改 使用缓存数据

404 页面未找到 403 服务器禁止访问

500 未知错误

     1.json.parse()/json.stringify()/eval()

     eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码

     2.responseText(）

     3.responseXml()

13种常见的 http状态码以及代表的意义如下：

      1.200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。

       2. 303（ See Other）：告知客户端使用另一个 URL来获取资源。

       3 .400（ BadRequest）：请求格式错误。1)语义有误，当前请求无法被服务器

       理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。

       4. 404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。

       5. 500（ InternalServer Error）：服务器遇到了一个未曾预料的状况，导致了它

           无法完成对请求的处理。

14.简述 AJAX的交互模型，以及同步和异步的区别

  同步：脚本会停留并等待服务器发送回复然后继续。

   异步：脚本不停留并处理可能的回复。

15.axios是什么？

请求后台资源的模块 和ajax有相同的用法，用于数据的交互 Axios.post().then() Axios.get().then() 16、说出至少4种vue当中的指令和它的用法？ 答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定 17、请详细说下你对vue生命周期的理解？ 答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在 18、请说出vue.cli项目中src目录每个文件夹和文件的用法？ 答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件 19.vue如何实现父子组件通信？                 props.  20.node.js创建服务？ 引入模块require(“http”)  const http=require(“http”);  http.createServer((req,res)=>{})).listen(“8080”,(req,res)=>{})

21.对于传入的值怎么判定是不是一个数组？

 

 

22.对于跨域，你是怎么理解的，解决的方案有哪些？

 

 

23.es6有哪些新的特点，举例说明并说明它的优点，例如箭头函数？

 

 

24vue的原理，还有v-model是基于什么的？

面试官的这个问题我当时一脸蒙蔽，都不知道在问什么

 

25cookie和sessioncookie的区别？

 

 

26对大前端的前后端分离的理解？

 

 

27.this的用法，详细说明

 

28.异步的应用举例说明？在js中

 

 

29闭包的原理，我们为什么用它？

 

 

 

30作用域说说你的理解？