前端面试题及答案Word下载.docx
《前端面试题及答案Word下载.docx》由会员分享，可在线阅读，更多相关《前端面试题及答案Word下载.docx（13页珍藏版）》请在冰点文库上搜索。
b.服务器将得到的HTML文件发送给浏览器；
c.在浏览器还没有完全接收HTML文件时便开始渲染、显示网页；
d在执行HTML中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求HTML。
5.断开连接
1.4浏览器缓存
1.sessionStorage
优点：
可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：
只能作为临时存储，不能存储持久化
2.localStorage
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
存在大小限制，IE8以上的IE版本才支持这个属性；
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3.cookie
兼容性最好，几乎所有的浏览器都支持
大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
4.userData
出现的时间比sessionStorage要早
IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。
在受限站点里这两个值分别是64KB和640KB
1.5.HTTP
1.5.1http状态码
1.以
2xx
为开头的都表示请求成功响应.
状态码
含义
200
请求成功
204
请求处理成功，但是没有资源可以返回
206
对资源某一部分进行响应，由Content-Range指定范围的实体内容。
2.以
3xx
为开头的都表示需要进行附加操作以完成请求
301
永久性重定向，该状态码表示请求的资源已经重新分配URI，以后应该使用资源现有的URI
302
临时性重定向。
该状态码表示请求的资源已被分配了新的URI，希望用户（本次）能使用新的URI访问。
303
该状态码表示由于请求对应的资源存在着另一个URI，应使用GET方法定向获取请求的资源。
304
该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307
临时重定向。
该状态码与302Found有着相同的含义。
3.以4xx的响应结果表明客户端是发生错误的原因所在
400
该状态码表示请求报文中存在语法错误。
当错误发生时，需修改请求的内容后再次发送请求。
401
该状态码表示发送的请求需要有通过HTTP认证（BASIC认证、DIGEST认证）的认证信息。
403
该状态码表明对请求资源的访问被服务器拒绝了。
404
该状态码表明服务器上无法找到请求的资源。
4.以5xx为开头的响应标头都表示服务器本身发生错误
500
该状态码表明服务器端在执行请求时发生了错误。
503
该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。
1.5.2URL和URI有什么区别？
URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。
URL是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议（或称为服务方式）
②存有该资源的主机IP地址（有时也包括端口号）
③主机资源的具体地址。
如目录和文件名等
1.5.3HTTP和HTTPS的区别
∙HTTPS协议需要到CA（CertificateAuthority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用
∙HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。
∙HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
∙HTTP的连接很简单，是无状态的。
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。
（无状态的意思是其数据包的发送、传输和接收都是相互独立的。
无连接的意思是指通信双方都不长久的维持对方的任何信息。
）
2.HTML篇
2.1Doctype作用？
标准模式与兼容模式各有什么区别?
你知道多少种Doctype文档类型
1.Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2.标准模式与兼容模式各有什么区别?
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
3.你知道多少种Doctype文档类型
HTML4.01中有3种DTD（文档类型定义）声明可以选择：
过渡的（Transitional）、严格的（Strict）和框架的（Frameset）
2.2说说你对语义化的理解？
语义化的优点有:
∙代码结构清晰，易于阅读，利于开发和维护
∙提高用于体验，在样式加载失败时，页面结构清晰
∙方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
∙有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark
2.3HTML与XHTML有什么区别?
∙其基础语言不同
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。
∙语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
∙可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
∙大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
∙公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
2.4页面导入样式时，使用link和@import有什么区别？
1属性差别。
link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2加载顺序的差别。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
2.5HTML5有哪些新特性？
1.语义化标签
语义化标签使得页面的内容结构化，见名知义
标签
描述
<
header>
/header>
定义了文档的头部区域
footer>
/footer>
定义了文档的尾部区域
nav>
/nav>
定义文档的导航
section>
/section>
定义文档中的节（section、区段）
article>
/article>
定义页面独立的内容区域
aside>
/aside>
定义页面的侧边栏内容
detailes>
/detailes>
用于描述文档或文档某个部分的细节
summary>
/summary>
标签包含details元素的标题
dialog>
/dialog>
定义对话框，比如提示框
2.增强型表单
新增表单Input输入类型。
这些新特性提供了更好的输入控制和验证。
输入类型
color
主要用于选取颜色
date
从一个日期选择器选择一个日期
datetime
选择一个日期（UTC时间）
datetime-local
选择一个日期和时间（无时区）
email
包含e-mail地址的输入域
month
选择一个月份
number
数值的输入域
range
一定范围内数字值的输入域
search
用于搜索域
tel
定义输入电话号码字段
time
选择一个时间
url
URL地址的输入域
week
选择周和年
3.新增表单元素：
表单元素
datalist>
元素规定输入域的选项列表，使用元素的list属性与元素的id绑定
keygen>
提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。
output>
用于不同类型的输出
新增表单属性
∙placehoder属性，简短的提示在用户输入值前会显示在输入域上。
即我们常见的输入框默认提示，在用户输入后消失。
∙required属性，是一个boolean属性。
要求填写的输入域不能为空
∙pattern属性，描述了一个正则表达式用于验证元素的值。
∙min和max属性，设置元素最小值与最大值。
∙step属性，为输入域规定合法的数字间隔。
∙height和width属性，用于image类型的标签的图像高度和宽度。
∙autofocus属性，是一个boolean属性。
规定在页面加载时，域自动地获得焦点。
∙multiple属性，是一个boolean属性。
规定元素中可选择多个值。
1.新增视频和音频标签
2.Canvas绘图
3.SVG绘图
4.地理定位
5.拖放API
6.WebWorker
7.WebStorage
8.WebSocket
2.6iframe的优缺点？
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
2.7img中的alt与title属性
alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；
alt是img必要的属性，而title不是；
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。
所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。
条件允许的话，可以在title属性里进一步对图片说明。
2.8HTML的中，如何写一个值为“a”=‘b’的属性值？
3.CSS篇
3.1行内元素有哪些？
块级元素有哪些？
CSS的盒模型？
3.2清除浮动有哪些方式？
3.3CSS选择符都有哪些？
哪些属性可以继承？
优先级算法如何计算？
3.4CSS3新增伪类有哪些？
3.5如何居中div？
3.6为什么要初始化CSS?
3.7说说你对BFC规范的理解？
一、什么是BFC？
BFC全称：
块级格式化上下文（blockformattingcontext），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
1、float：
给元素添加浮动（属性值为left、right，但none除外）
2、position：
给元素添加定位（属性值为absolute或fixed）
3、display：
给元素添加display属性（属性值为inline-block、table-cell或table-caption）
4、overflow：
给元素添加overflow属性（属性值为hidden、auto或scroll，但visible除外）
三、BFC形成后出现的常见问题
1、margin重叠问题
2、浮动相关问题
3.8讲讲positionfloatdisplay各有哪些取值，它们互相之间会如何影响？
3.9纯CSS实现三角形
4.JS篇
4.1面向对象
4.2什么是闭包？
闭包的特性是什么？
闭包其实只是一个绑定了执行环境的函数
闭包的特性：
1.封闭性：
外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2.持久性：
一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。
4.3继承
4.4DOM操作（添加、移除、移动、复制、创建和查找节点）
4.5介绍一下new操作符。
New操作符具体干了什么？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。
4.6HTML5离线存储
4.7JS的数据类型
基本数据类型：
Number、String、Boolean、Null、Undefined、Symbol（ES6），
引用数据类型：
Object（在JS中除了基本数据类型以外都是对象）
详细请查看：
typeof操作符检测变量的数据类型
4.8null和undefined的区别
4.9call（）和apply（）的区别
传参方式不同
4.10深拷贝和浅拷贝
4.11ajax
4.12数组去重
4.13this对象
4.14eval（）
1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）
3.由JSON字符串转换为JSON对象的时候可以用eval（）
4.15什么是UA?
4.16什么是事件委托？
4.17promise
Promise是JavaScript语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过Promise的then方法的回调）。
4.18window.onload和document.ready的区别？
哪一个先执行？
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。
只能执行一次，如果有多个，那么第一次的执行会被覆盖
document.ready是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。
可以执行多次
所以，document.ready函数只需对DOM树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快
4.19var、let和const有什么区别
1.var定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；
不允许在相同作用域内，重复声明同一个变量。
3.const定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。
var、let、const三者的区别
4.20JavaScript启动后，内存中有多少个对象？
如何用代码来获得这些信息？
5.前端安全问题
5.1XSS
跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有：
1、盗用cookie，获取敏感信息。
2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；
或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。
5.2CSRF
跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
防御CSRF攻击：
目前防御CSRF攻击主要有三种策略：
验证HTTPReferer字段；
在请求地址中添加token并验证；
在HTTP头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS利用的是用户对指定网站的信任，CSRF利用的是网站对用户网页浏览器的信任。
6.跨域
6.1什么是跨域？
6.2什么是同源策略？
6.3解决跨域的方法有哪些？
7.性能优化
7.1你都用过那种性能优化的方法？
1.尽可能的减少http请求
使用CSS Sprites；
JS、CSS源码压缩；
图片大小控制合适；
启用Gzip压缩，CDN托管，data缓存；
图片服务器
2.避免在CSS中使用Expression
Expression（css表达式）又称Dynamic properties（动态属性）
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。
减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
7.2CSSSprite是什么，谈谈这个技术的优缺点
8.其他
8.1后台系统的权限控制与管理
答案：
后台管理系统的权限控制------前端权限管理
升级会员 