前端面试大全Word格式.docx
《前端面试大全Word格式.docx》由会员分享，可在线阅读，更多相关《前端面试大全Word格式.docx（10页珍藏版）》请在冰豆网上搜索。
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker,websockt,Geolocation
移除的元素
纯表现的元素：
basefont，big，center，font,s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
8.请描述一下cookies，sessionStorage和localStorage的区别？
cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
9.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
CSS面试题
1.简要说一下CSS的元素分类
块级元素：
div,p,h1,form,ul,li;
行内元素:
span>
a,label,input,img,strong,em;
2.CSS隐藏元素的几种方法（至少说出三种）
Opacity:
元素本身依然占据它自己的位置并对网页的布局起作用。
它也将响应用户交互;
Visibility:
与opacity唯一不同的是它不会响应任何用户交互。
此外，元素在读屏软件中也会被隐藏;
Display:
display设为none任何对该元素直接打用户交互操作都不可能生效。
此外，读屏软件也不会读到元素的内容。
这种方式产生的效果就像元素完全不存在;
Position:
不会影响布局，能让元素保持可以操作;
Clip-path:
clip-path属性还没有在IE或者Edge下被完全支持。
如果要在你的clip-path中使用外部的SVG文件，浏览器支持度还要低;
3.CSS清楚浮动的几种方法（至少两种）
使用带clear属性的空元素
使用CSS的overflow属性；
使用CSS的:
after伪元素；
使用邻接元素处理；
4.CSS居中（包括水平居中和垂直居中）
内联元素居中方案
水平居中设置：
1.行内元素
设置text-align:
center；
2.Flex布局
设置display:
flex;
justify-content:
center;
（灵活运用,支持Chroime，Firefox，IE9+）
垂直居中设置：
1.父元素高度确定的单行文本（内联元素）
设置height=line-height；
2.父元素高度确定的多行文本（内联元素）
a:
插入table（插入方法和水平居中一样），然后设置vertical-align:
middle；
b:
先设置display:
table-cell再设置vertical-align:
块级元素居中方案
1.定宽块状元素
设置左右margin值为auto；
2.不定宽块状元素
在元素外加入table标签（完整的，包括table、tbody、tr、td），该元素写在td内，然后设置margin的值为auto；
给该元素设置displa:
inine方法；
c:
父元素设置position:
relative和left:
50%，子元素设置position:
50%；
使用position:
absolute（fixed）,设置left、top、margin-left、margin-top的属性;
利用position:
fixed（absolute）属性，margin:
auto这个必须不要忘记了;
利用display:
table-cell属性使内容垂直居中;
使用css3的新属性transform:
translate（x,y）属性;
使用:
before元素;
5.写出几种IE6BUG的解决方法
双边距BUGfloat引起的使用display
3像素问题使用float引起的使用dislpay:
inline-3px
超链接hover点击后失效使用正确的书写顺序linkvisitedhoveractive
Iez-index问题给父级添加position:
relative
Png透明使用js代码改
Min-height最小高度！
Important解决’
select在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:
hidden,zoom:
0.08line-height:
1px）
6.对于SASS或是Less的了解程度？
喜欢那个？
语法介绍
7.Bootstrap了解程度
特点，排版，插件的使用;
8.页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；
而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
9.介绍一下CSS的盒子模型？
有两种，IE盒子模型、标准W3C盒子模型；
IE的content部分包含了border和pading;
盒模型：
内容（content）、填充（padding）、边界（margin）、边框（border）.
10.CSS选择符有哪些？
哪些属性可以继承？
优先级算法如何计算？
CSS3新增伪类有那些？
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul>
li）
后代选择器（lia）
通配符选择器（*）
属性选择器（a[rel="
external"
]）
伪类选择器（a:
hover,li:
nth-child）
可继承的样式：
font-sizefont-familycolor,ULLIDLDDDT;
不可继承的样式：
borderpaddingmarginwidthheight;
优先级就近原则，同权重情况下样式定义最近者为准;
优先级为:
<
code>
!
important&
gt;
id&
<
spanclass="
"
>
class<
/span>
&
tag<
important比内联优先级高<
/code>
11.CSS3有哪些新特性？
CSS3实现圆角（border-radius:
8px），阴影（box-shadow:
10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:
rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;
//旋转,缩放,定位,倾斜，增加了更多的CSS选择器
多背景rgba
JavaScript面试题
1.javascript的typeof返回哪些数据类型
Ｏbjectnumberfunctionbooleanunderfind;
2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）隐式（==–===）；
3.数组方法pop（）push（）unshift（）shift（）
Push（）尾部添加pop（）尾部删除
Unshift（）头部添加shift（）头部删除
4.ajax请求的时候get和post方式的区别?
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的;
5.call和apply的区别
Object.call（this,obj1,obj2,obj3）
Object.apply（this,arguments）
6.ajax请求时，如何解释json数据
使用evalparse,鉴于安全性考虑使用parse更靠谱;
7.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
8.闭包是什么，有什么特性，对页面有什么影响?
简要介绍你理解的闭包
闭包就是能够读取其他函数内部变量的函数。
9.添加删除替换插入到某个接点的方法
obj.appendChidl（）
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.说一下什么是javascript的同源策略？
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
11.编写一个b继承a的方法;
function<
A<
（name）<
{
this<
.name=name;
.sayHello=<
（）<
{alert（<
.name+”sayHello!
”）;
};
}<
B<
（name,id）<
.temp=A;
.temp（name）;
//相当于newA（）;
delete<
.temp;
.id=id;
.checkId=<
（ID）<
.id==ID）};
12.如何阻止事件冒泡和默认事件
stopBubble<
（e）<
if<
（e&
amp;
&
e.stopPropagation）
e.stopPropagation（）
else<
window<
.event.cancelBubble=<
true<
}<
return<
false<
13.下面程序执行后弹出什么样的结果?
fn<
.a=<
0<
;
.b=<
alert（<
.a）
}}fn.prototype={
20<
.a）;
},
30<
}}<
var<
myfn=<
new<
fn（）;
myfn.b（）;
myfn.c（）;
14.谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：
是全局对象Global。
作为方法调用，那么this就是指这个对象
15.下面程序的结果
fun<
（n,o）<
console<
.log（o）
{
fun:
（m）<
fun（m,n）;
}
a=fun（<
）;
a.fun（<
1<
2<
3<
b=fun（<
）.fun（<
c=fun（<
c.fun（<
//答案：
//a:
undefined,0,0,0
//b:
undefined,0,1,2
//c:
undefined,0,1,1
16.下面程序的输出结果
name=<
'
World!
（<
typeof<
name===<
undefined'
）{
Jack'
.log（<
Goodbye'
+name）;
}<
Hello'
}}）（）;
17.了解Node么？
Node的使用场景都有哪些？
高并发、聊天、实时消息推送
18.介绍下你最常用的一款框架
jquery,rn,angular等;
19.对于前端自动化构建工具有了解吗？
简单介绍一下
Gulp,Grunt等；
20.介绍一下你了解的后端语言以及掌握程度
其它
1.对Node的优点和缺点提出了自己的看法？
（优点）
因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
（缺点）
Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。
看起来，就像是Ruby/Rails当年的样子。
2.你有哪些性能优化的方法？
（1）减少http请求次数：
CSSSprites,JS、CSS源码压缩、图片大小控制合
适；
网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量
保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。
减少IO读取操作。
（6）避免使用CSSExpression（css表达式）又称Dynamicproperties（动态属
性）。
（7）图片预加载，将样式表放在顶部，将脚本放在底部
加上时间戳。
（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。
向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的
升级会员 