前端面试题（1）

题目来源：https://www.zhihu.com/question/41466747/answer/132562725

1.html+css部分

（1）css盒模型，可能会要求手写一个布局。

（2）html5的新特性：

新增结构相关的元素：section、article、aside、header、footer、nav、figure、main

新增表单元素：datalist、keygen、output
新增表单属性：placehoder 、required 、pattern 、min/max 、step 、height/width、autofocus 、 multiple

视频和音频：video、audio

绘制图形：canvas

History API：管理浏览器的历史纪录

本地存储：
Web Storage，Web Storage就是一种在本地客户端保存数据的功能，分为sessionStorage和localStorage，了解sessionStorage和localStorage
本地数据库，HTML5中内置了两种本地数据库，一种是SQLLite，另一种是indexedDB的NoSQL类型的数据库。

离线应用程序：
为了让Web应用程序在离线状态时候也能正常工作，就必须把所有构成Web应用程序的资源文件，诸如HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中。
本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页。
Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。manifest文件是一个简单文本文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。

文件API：HTML5中提供了一些关于文件操作的文件API。

通信API：
跨文档消息传输功能
使用WebSockets API来通过socket端口传递数据
通过Server-Sent Events API将服务端事件主动推送到客户端的功能

WebRTC通信：
音频与视频的实时通信（Real Time Communication，RTC）

使用Web Workers处理线程：
通过Web Workers，你可以创建一个不会影响前台处理的后台线程，并且在这个后台线程中创建多个子线程。通过Web Workers，你可以将耗时较长的处理交给后台线程去运行，从而解决了HTML 5之前因为某个处理耗时过长而跳出一个提示用户脚本运行时间过长，导致用户不得不结束这个处理的尴尬状况。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

获取地理位置信息：HTML5 Geolocation（地理定位）用于定位用户的位置。

拖放API与通知API：
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
在HTML 5中，新增通知API，该API允许在某个事件（例如接收到Email邮件、接收到公告信息等事件）中向用户显示通知信息，无论用户正在查看哪一个浏览器标签页中的内容。

参考文章：https://www.cnblogs.com/vicky1018/p/7705223.html

（3）CSS3新特性

CSS3中新增选择器：
属性选择器、结构性伪类选择器、各种UI元素状态伪类选择器、通用兄弟元素选择器

参考文章：
https://segmentfault.com/a/1190000010936764#articleHeader2
https://segmentfault.com/a/1190000010780991?utm_source=tag-newest#articleHeader49
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html

（4）对HTML5的语义化的理解

html5的语义化指的是用正确的标签包含正确的内容，比如nav标签，里面就应该包含导航条的内容，而不是用做其他的用途，标签语义化的好处就是结构良好，便于阅读，方便威化，也有利于爬虫的查找，提高搜索率。

（5）cookie，sessionStorage，localeStorage的区别

cookie是存储在浏览器端，并且随浏览器的请求一起发送到服务器端的，它有一定的过期时间，到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的，同属于web Storage，比cookie的存储大小要大有8m，cookie只有4kb，localeStorage是持久化的存储在客户端，如果用户不手动清除的话，不会自动消失，会一直存在，sessionStorage也是存储在客户端，但是它的存活时间是在一个回话期间，只要浏览器的回话关闭了就会自动消失。

（6）多个页面之间如何进行通信

使用cookie，使用web worker，使用localeStorage和sessionStorage

2.JavaScript部分

（1）JavaScript的数据类型

基本数据类型：Number，String，Boolean，Undefined，Null
复杂数据类型：Object，Array，Function，RegExp，Date，Error
全局数据类型：Math

（2）JavaScript的闭包

闭包简单的说就是一个函数能访问外部函数的变量，这就是闭包.

（3）new 操作符到底做了什么

首先，new操作符为我们创建一个新的空对象，然后this变量指向该对象，其次，空对象的原型执行函数的原型，最后，改变构造函数内部的this的指向。

（4）改变函数内部this指针的指向函数

（5）JavaScript的作用域和作用域链

（6）JavaScript的继承

（7）JavaScript变量提升

（8）JavaScript事件模型

（9）内存泄漏

内存泄漏指的是浏览器不能正常的回收内存的现象。

（10）浏览器的垃圾回收机制

垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存，内存泄露和浏览器实现的垃圾回收机制息息相关， 而浏览器实现标识无用变量的策略主要有下两个方法：
第一，引用计数法
第二，标记清除法

（11）同源策略

（12）跨域的几种方式

jsonp（利用script标签的跨域能力）跨域、websocket（html5的新特性，是一种新协议）跨域、设置代理服务器（由服务器替我们向不同源的服务器请求数据）、CORS（跨源资源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)。

（13）异步和同步

同步指下一个程序的执行需要等到上一个程序执行完毕，也就是得出结果后下一个才能执行，

异步指的是上一个程序指向后，下一个程序不用等到上一个程序出结果就能执行，等上一个出结果了调用回调函数处理结果就好。

（14）JavaScript的值类型和引用类型

（15）优化下面代码：

var str="我喜欢我可爱的女朋友，"；
str=str+"她叫喵喵，";
str=str+"她时而可爱，时而认真，";
str=str+"她那天真的笑声可以让人忘掉一切烦恼。";
console.log(str);

这里的优化主要是对加号操作符的优化，因为加号在JavaScript中非常耗时和耗内存，需要经过以下六步：

1、首先开辟一块临时空间，存储字符串，
2、然后在开辟一块空间
3、把str中的字符串复制到刚刚开辟的空间
4、在把需要连接的字符串复制到str后面
5、str指向这块空间
6、回收str原来的空间和临时空间

优化的方法是使用数组的push方法，数组是连续的存储空间，可以省下很多步

var res=[];
var str="我喜欢我可爱的女朋友，"；
res.push(str);
res.push("她叫喵喵，");
res.push("她时而可爱，时而认真，");
res.push("她那天真的笑声可以让人忘掉一切烦恼。");
console.log(res.join(""));

(16)封装cookie的添加、删除、查询方法

cookie是存储在浏览器端的，可以用于存储sessionID，也可以用于自动登陆，记住密码等，但是在浏览器端并没有官方的操作cookie的方法，下面我们来封装一下：

作者：汪汪
链接：https://www.zhihu.com/question/41466747/answer/132562725
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

CookieUtil=｛
    addCookie:function(key,value,options){
        var str=key+"="+escape(value);
        if(options.expires){
           var curr=new Date();   //options.expires的单位是小时
           curr.setTime(curr.getTime()+options.expires*3600*1000);
           options.expires=curr.toGMTString();
        }
        for(var k in options){   //有可能指定了cookie的path，cookie的domain
           str+=";"+k+"="+options[k];
        }
        document.cookie=str;
    },
    queryCookie:function(key){
      var cookies=document.cookie;
     //获得浏览器端存储的cookie,格式是key=value;key=value;key=value
      cookies+=";";
      var start=cookies.indexOf(key);
      if(start<=-1){ return null; }  //说明不存在该cookie
      var end=cookies.indexOf(";",start);
      var value=cookies.slice(start+key.length+1,end);
      return unescape(value);
    },
    deleteCookie:function(key){
      var value=CookieUtil.queryCookie(key);
      if(value===null){return false;}
      CookieUtil.addCookie(key,value,{expires:0});//把过期时间设置为0，浏览器会马上自动帮我们删除cookie
    }
｝

(17)事件委托机制

事件委托指的是，不再事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数，这样可以大大提高性能，因为可以减少绑定事件的元素，比如：

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

要给li元素绑定click事件，使用事件委托机制的话，就只需要给ul绑定click事件就行了，这样就不需要给每个li’绑定click事件，减小内存占用，提高效率，有兴趣的童鞋可以去看看jQuery的live，bind，on，delegate函数的区别，这几个函数就采用了事件委托机制。

3.其他部分

（1）http状态码

（2）xss，csrf的概念以及防范方法

（3）CommonJS、AMD、CMD规范

（4）谈谈对前端模块化的理解

前端模块话就是把复杂的文件分成一个个独立的模块，比如js文件，分成独立的模块之后有利于代码的重用和维护，但是这样又会引来模块与模块之间的依赖问题，所以就有了CommonJS、AMD、CMD规范，最后出现了webpack，webpack就是前端模块话的一种解决方案。

（5）优雅降级和逐渐增强

（6）前端优化（提高网页的加载速度）