前端面试题

Posted 2020-11-20 junjingyi

html5

---

 

1、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性，新增元素：

1）内容元素：article、footer、header、nav、section

2）表单控件：calendar、date、time、email、url、search

3）控件元素：webworker，websockt，Geolocation

移除元素：

1）显现层元素：basefont，big，center，font，s，strike，tt，u

2）性能较差元素：frame，frameset，noframes

处理兼容问题有两种方式：

1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2）使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

2、介绍一下 CSS 的盒子模型？

1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

3、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

4、如何让div垂直居中？

position: absolute;  

top: 50%;  

left: 50%;  

background-color: #000;  

-webkit-transform: translateX(-50%) translateY(-50%); 

5、sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

6、web storage和cookie的区别？

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

7、json和jsonp的区别，以及ajax和jsonp的区别？

json和jsonp虽然只有一个字母的区别，但是它们之间扯不上关系。

　　（1）json是一种轻量级的数据交换格式。

　　（2）jsonp是一种跨域数据交互协议。

json的优点：（1）基于纯文本传递极其简单，（2）轻量级数据格式适合互联网传递，（3）容易编写和解析。

ajax和jsonp的区别：

　　相同点：都是请求一个url

　　不同点：ajax的核心是通过xmlHttpRequest获取内容

　　jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本。

8、ajax和jsonp的优缺点分别是什么？

ajax的优点：

（1）、通过异步模式，提升了用户体验

（2）、优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

（3）、Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

ajax的缺点：

（1）、它可能破坏浏览器后退按钮的正常行为

（2）、对搜索引擎的支持比较弱

（3）、如果用户禁用了JS，网站就取不到数据

jsonp的优点：

（1）、它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略

（2）、它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持

（3）、在请求完毕后可以通过调用callback的方式回传结果

jsonp的缺点：

（1）、它只支持GET请求而不支持POST等其它类型的HTTP请求

（2）、它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行javascript调用的问题。

（3）、jsonp在调用失败的时候不会返回各种HTTP状态码。

9、ajax的工作原理

（1）、创建XMLHttpRequest对象,也就是创建一个异步调用对象.

（2）、创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

（3）、设置响应HTTP请求状态变化的函数.

（4）、发送HTTP请求.

（5）、获取异步调用返回的数据

（6）、使用JavaScript和DOM实现局部刷新

10、http的请求过程

（1）、域名解析

（2）、发起TCP的3次握手

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

（4）、服务器端响应http请求，浏览器得到html代码

（5）、浏览器解析html代码，并请求html代码中的资源

（6）、浏览器对页面进行渲染呈现给用户

11、跨域

a: josnp (最常用一种方式 ，耗时最短，最有效)是通过get请求

    简单来说就是利用jsonp动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议了         

b :服务器设置响应头  

    http://localhost:8080 发起ajax请求

    接口所在服务器http://localhost:8090

    “Access-Control-Allow Origin”，“http://localhost:8090”

c : 服务器重定向（代理）

    http://localhost:8080   发起ajax请求

    本地服务器接口  http://localhost:8080做一个代理接口，后端调后端 绕过安全协议

    接口所在服务器http://localhost:8090

12、常见的http状态码

2**（响应成功）:表示动作被成功接受，理解和接受

200 -表示请求被成功完成，请求的资源发送回客户端

202 -接受和处理，但处理未完成  

203 -返回信息不确定或不完整

204 -请求收到，但返回信息为空

3**（重定向）:为了完成指定的动作，必须接受进一步处理

300 -请求的资源可在多处得到

301 -本页面被永久性转移到另一个URL

304 -自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用 

305 -请求的资源必须从服务器指定的地址得到

4**（客户端错误类）

400 -客户端请求语法错误，不能被服务器所理解

403 -禁止访问，服务器收到请求，但是拒绝提供服务

404 -服务器无法取得所请求的网页，请求资源不存在。

5**（服务器错误类）

500   （服务器内部错误）  服务器遇到错误，无法完成请求。 

501   （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 

502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 

503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 

504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。 

505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

JavaScript

---

 

1、什么是JavaScript

JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言

2、原型和原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined

3、闭包

闭包是在一个函数里声明了另外一个函数，并且这个函数访问了父函数作用域里的变量

闭包的应用场景：

　　模块化

　　防止变量被破坏

4、事件委托

    一个div里面有个span元素 ，当鼠标单击span时，这个事件算是谁的？div还是span？

    事件冒泡： IE认为，这个事件首先触发span,然后依次往父节点传递，最终传递到document，(这个过程称为冒泡)

    事件捕获：网景浏览器认为，任何事件都首先触发document，然后依次往下传递到span元素，(这个过程称为捕获)

    事件委托：根据事件冒泡机制，任何事件都会冒泡到document，事件委托就是把所有事件处理函数绑定到document，根据事件参数判断事件源对象，判断不同的对象给予不同的处理函数，

5、怎样阻止事件冒泡？

阻止事件冒泡

　　在IE浏览器中阻止冒泡的方法是window.event.cancelBubble=true

　　在谷歌,火狐等浏览器的方法则是e.stopPropagation()

阻止默认行为：

　　stoppreevntDefault(event)

6、JavaScript的事件流

事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标的元素；

处于目标阶段：处在绑定事件的元素上；

事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

7、call、apply和bind的区别

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面  obj.myFun.call(db,‘成都‘, ... ,‘string‘ )；

apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(db,[‘成都‘, ..., ‘string‘ ]);

bind除了返回是函数以外，它的参数和call 一样。

8、BOM 对象有哪些，列举 window 对象？

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

document 对象，文档对象；

location 对象，浏览器当前URL信息；

navigator 对象，浏览器本身信息；

screen 对象，客户端屏幕信息；

history 对象，浏览器访问历史信息；

9、get和post的区别，何时使用post？

GET和POST的区别：

GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

在以下情况中，请使用 POST 请求：

以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；

发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；

向服务器发送大量数据（数据大小限制区别）；

上传文件图片时（数据类型区别）；

10、如何判断数据类型？

typeof

　　typeof只能判断：数字、字符串、布尔值、undefined、函数

　　typeof可以识别简单基本类型值(比如:number,string,boolean)，但对于复合类型(Object,Array,Function)却只能识别Function。

（2）instanceof

　　num str bool 这三个在使用instanceof 时得不到基本数据类型

（3）constructor

　　通过constructor我们可以得到 instance不能得到的 str num bool 这些基本类型值

（4）Object.prototype.toString.call()

11、常用的数组方法

push：向数组的末尾增加一项 返回值是数组的新长度

unshift：向数组开头增加一项 返回值是数组的新长度

pop:删除数组的末尾项 返回值是删除的数组项

shift:删除数组开头项 返回被删除的开头项目

splice：删除数组中的任意项 返回值是被删除的数组项

slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

拼接：

concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组 

join:把数组中的每一项 按照指定的分隔符拼接成字符串

排序：

reverse:倒序数组 返回值倒序数组 原有数组改变

sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

兼容性不好：

indexOf:返回获取项在数组中的索引

lastIndexOf:返回获取项在数组中出现的最后一次索引

forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined

map：循环遍历数组 参数是一个匿名函数

12、箭头函数和普通函数的区别？

 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（不常用）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。