您的位置：首页 > 职场人生

前端面试易考知识点

2017-02-17 16:11 162 查看
一.HTML/CSS部分1.什么是盒子模型？盒模型包括内容（content)、内边距（padding）、边框（border）、外边距（margin）。盒模型分为IE标准的盒模型以及W3C标准的盒模型，IE盒模型的width部分包含了content、border和padding。补充：标准W3C模型：盒子的总宽度=左右margin+左右border+左右padding+width(内容content);IE盒子模型：盒子的总宽度=左右margin+width(左右border+左右padding+内容content)2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：a、b、button、em、img、input、lable、span、strong、select、textarea块级元素：blockquote、div、dl、dt、dd、h1-h6、li、ol、p、ul空元素：即没有内容的html元素，br、meta、hr、link、input行内元素与块级元素有什么不同？记住对行内元素设置宽度width无效。设置高度height无效，可以通过line-height来设置。设置margin只有左右margin有效，上下无效。设置padding上下左右padding有效，。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了块级元素和内联元素的区别：1.块元素，总是在新行上开始；内联元素，和其他元素在一行；2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。各自的特点：1.块元素的特点：a.总是在新行上开始；b.高度、行高以及外边距和内边距都可控制；c.宽度默认是它容器的100%，除非设定一个宽度；d.他可以容纳内联元素和其他块元素。2.内联元素的特点：a.和其他元素都在同一行；b.高度，左右外边距不可改变；c.宽度就是它的文字和图片的宽度，不可改变；d.内联元素只能容纳文本或者其他内联元素。3.Css实现水平垂直居中1）只适用:宽高已定1设置position:absolute(父元素记得设置:relative),然后top和left设置50%,50%,再设置margin-left=宽/2,margin-top:宽/2
<divid="wrapper">
<divid="content"></div>
</div>
<style>
#wrapper{
position:relative;[/code]margin:0auto;
padding:0auto;
width:500px;
height:500px;
background-color:red;
}
#content{
position:absolute;/*父元素需要相对定位*/
width:200px;
height:200px;
background-color:green;
top:50%;
left:50%;
margin-left:-100px;/*宽度的一半*/
margin-top:-100px;
}
.div1{
width:500px;
height:500px;
border:1pxsolidblack;
position:relative;/*很重要,不能忘*/
}
.div2{
background:yellow;
width:300px;
height:200px;
margin:auto;
bottom:0;
top:0;
left:0;
right:0;
position:absolute;
}[/code]
</style>
只适用:固定宽高;如果宽高随意,想靠内部撑开的话,会占满整个父div2利用position:absolute属性，设置top/bottom/right/left.four{position:absolute;width:140px;height:140px;top:0;right:0;bottom:0;left:0;margin:auto;background:black;}3设置宽度+margin:0auto方式代码：
12345<divclass="center">　　<spanclass="center_text">我是块级元素，我是块级元素，我给自己设了display：block　　</span></div>
1234center_text{　　display:block;　　width:500px<br>margin：0auto；}
这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。[/code]4最简单的一种使行内元素居中的方法，使用line-height属性.six{width:100px;height:100px;line-height:100px;text-align:center;background:gray;}这种方法也很实用，比如使文字垂直居中对齐4.简述一下src与href的区别
href是指向网络资源所在位置，建立和当前元素或当前文档之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容会嵌入到当前文档的当前标签所在的位置，在请求src资源时会将其指向的资源下载
并应用到文档内，例如img图片等元素。当浏览器解析该元素时，会暂停其他元素的下载和处理，直到将该资源下载、编译、执行
完毕。类似于将所指资源嵌入到当前标签内。
5.什么是CSSHack?
一般是指针对不同的浏览器写不同的CSS；通过在css样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。
IE浏览器CSSHack分为3种，条件Hack（ifie），属性级Hack（_color），选择符Hack（*+html）
CSShack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSShack分类
CSSHack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用ifIE）Hack，实际项目中CSSHack大部分是针对IE浏览器不同版本之间的表现差异而引入的。属性前缀法(即类内部Hack)：例如IE6能识别下划线"_"和星号"*"，IE7能识别星号"*"，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。选择器前缀法(即选择器Hack)：例如IE6能识别*html.class{}，IE7能识别*+html.class{}或者*:first-child+html.class{}。IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：<!--[ifIE]>IE浏览器显示的内容<![endif]-->，针对IE6及以下版本：<!--[ifltIE6]>只在IE6-显示的内容<![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。CSShack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。
CSShack方式一：条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下只在IE下生效<!--[ifIE]>这段文字只在IE浏览器显示<![endif]-->只在IE6下生效<!--[ifIE6]>这段文字只在IE6浏览器显示<![endif]-->只在IE6以上版本生效<!--[ifgteIE6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->只在IE8上不生效<!--[if!IE8]>这段文字在非IE8浏览器显示<![endif]-->非IE浏览器生效<!--[if!IE]>这段文字只在非IE浏览器显示<![endif]-->
CSShack方式一：符号前缀
在标准模式中“-″减号是IE6专有的hack“\9″IE6/IE7/IE8/IE9/IE10都生效“\0″IE8/IE9/IE10都生效，是IE8/9/10的hack“\9\0″只对IE9/IE10生效，是IE9/10的hackCSShack方式三：选择器前缀法选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。目前最常见的是*html*前缀只对IE6生效*+html*+前缀只对IE7生效@mediascreen\9{...}只对IE6/7生效@media\0screen{body{background:red;}}只对IE8有效@media\0screen\,screen\9{body{background:blue;}}只对IE6/7/8有效@mediascreen\0{body{background:green;}}只对IE8/9/10有效@mediascreenand(min-width:0\0){body{background:gray;}}只对IE9/10有效@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}只对IE10有效
CSS3选择器结合JavaScript的Hack
我们用IE10进行举例：由于IE10用户代理字符串（UserAgent）为：Mozilla/5.0(compatible;MSIE10.0;WindowsNT6.2;Trident/6.0)，所以我们可以使用javascript将此属性添加到文档标签中，再运用CSS3基本选择器匹配。JavaScript代码:varhtmlObj=document.documentElement;htmlObj.setAttribute('data-useragent',navigator.userAgent);htmlObj.setAttribute('data-platform',navigator.platform);CSS3匹配代码：html[data-useragent*='MSIE10.0']#id{color:#F00;}
Firefox浏览器、Webkit内核浏览器、Opera浏览器csshack
Firefox浏览器csshack@-moz-documenturl-prefix(){.selector{property:value;}}支持所有Gecko内核的浏览器(包括Firefox)*>.selector{property:value;}Webkit内核浏览器csshack@mediascreenand(-webkit-min-device-pixel-ratio:0){Selector{property:value;}}Opera浏览器csshackhtml:first-child>b\odySelector{property:value;}@mediaalland(-webkit-min-device-pixel-ratio:10000),notandall(-webkit-min-device-pixel-ratio:0){.font1{color:red;}}Webkit内核浏览器csshack和Opera浏览器csshack@mediaalland(min-width:0px){.font1{color:red;}}
移动端开发专用csshack
在android2+的版本中，按钮边框会产生bug，需要清除掉，解决方案如下：a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/*1.去除androida/button/input标签被点击时产生的边框2.去除iosa标签被点击时产生的半透明灰色背景*/利用-webkit-transform-3d属性，因为Android4.0下不识别该选择器，浏览器解析代码时，会直接跳过此步骤在CSS3的兼容中，相信大家对使用media的兼容并不陌生，我之前也提到过很多次，那么今天使用的hack也是跟它离不开的，代码如下：@mediaalland(-webkit-transform-3d){/*Android4.0下不识别该-webkit-transform-3d，使用它可做Android4.0下版本兼容*/.css{...}}
6.简述同步和异步的区别
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去
直到收到返回信息，才会继续执行下去。
异步是指进程不需要一直等待下去，而是执行下面的操作，不管其他进程的状态，当有消息返回时，
系统会通知进程进行处理，这样可以提高进程的效率。
7.px和em的区别
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1.IE无法调整那些使用px作为单位的字体大小；2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3.Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点1.em的值并不是固定的；2.em会继承父级元素的字体大小。
。浏览器默认的字体高是16px,1em=16px。
REM
rem是CSS3新增的一个相对单位（rootem，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：p{font-size:14px;font-size:.875rem;}
8.什么叫优雅降级和渐进增强？
优雅降级是指刚开始就构建完整的功能，然后再针对低版本浏览器进行兼容；
渐进增强是指针对低版本浏览器构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、
交互等改进和追加功能，以达到更好的用户体验。
区别：
1）优雅降级是从复杂的现状开始，并试图减少用户体验的供给；
2）渐进增强是从浏览器最低版本做起，并不断的扩充，以适应未来环境的需要；
3）降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带；
9.浏览器的内核分别有什么？
IE：trident内核
Firefox:gecko内核
safari:webkit内核
Opera:Blink内核
chrome:Blink内核
9.对WEB标准以及W3C的理解与认识.
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以使页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点1).对于结构html要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）a.标签字母要小写b.标签要闭合c.标签不允许随意嵌套2).对于css和js来说a.尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。用户体验提高，代码维护简单，便于改版
[code]b.样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，
c.不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
10.xhtml和html有什么区别HTML与XHTML之间的差别，主要分为功能上的差别和书写习惯的差别两方面。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。下面列出了几条容易犯的错误，供理解。1)所有标签都必须小写在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。2)标签必须成双成对像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样3)标签顺序必须正确标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。4)所有属性都必须使用双引号在XHTML1.0中规定连单引号也不能使用，所以全程都得用双引号。不允许使用target="_blank"[code]从XHTML1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。
[/code]
11.Doctype是指什么?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
Doctype：(DocumentType)文档类型，它位于文档中最前面的位置，处于标签之前。它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。
为了获取正确的Doctype声明，关键就是让dtd与文档所遵循的标准对应。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
在标准模式中，浏览器根据规范呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，
但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
12.CSS引入的方式有哪些?link和@import的区别是?1).使用link标签将样式规则写在.css的样式文件中，再以<link>标签引入。<linkrel=stylesheettype="text/css"href="example.css">2).使用@import引入跟link方法很像，但必须放在<style>...</style>中<styletype="text/css"><!--@importurl(css/example.css);--></style>3).使用style标签将样式规则写在<style>...</style>标签之中。<styletype="text/css"><!--body{color:#666;background:#f0f0f0;font-size:12px;}td,p{color:#c00;font-size:12px;}--></style>4).使用style属性将style属性直接加在个别的元件标签里<元件(标签)style="性质(属性)1:设定值1;性质(属性)2:设定值2;...}5).使用<span></span>标记引入样式<spanstyle="font:12px/20px#000000;">cnwebshow.com</span>两者区别：
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import属于CSS范畴，只能加载CSS
2.加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会
等到页面全部被下载完再被加载。
3.link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持。
4.lin支持使用	JavaScript控制DOM去改变样式；而import不支持。
@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：main.css———————-@import“sub1.css”;@import“sub2.css”;这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了。服务器的压力增大，浏览量大的网站还是谨慎使用。
13.CSS选择符有哪些？哪些属性可以继承？内联和important哪个优先级高？1)通配选择符*{sRules}[code]2)类型选择符E{sRules}3)属性选择符E[attr]{sRules}E[attr=value]{sRules}E[attr~=value]{sRules}
E[attr|=value]{sRules}h[title]{color:blue;}/*所有具有title属性的h对象*/span[class=demo]{color:red;}div[speed="fast"][dorun="no"]{color:red;}a[rel~="copyright"]{color:black;}4)包含选择符E1E2{sRules}tabletd{font-size:14px;}5)子对象选择符E1>E2{sRules}divul>lip{font-size:14px;}6)ID选择符#ID{sRules}7)类选择符E.className{sRules}E1,E2,E3{sRules}8）伪类及伪对象选择符
9)选择符分组E:Pseudo-Classes{sRules}(Pseudo-Classes)[:link:hover:active:visited:focus:first-child:first:left:right:lang]E:Pseudo-Elements{sRules}
(Pseudo-Elements)[:first-letter:first-line:before:after]可以继承的有：font-sizefont-familycolor不可继承的一般有：borderpaddingmarginbackground-colorwidthheight等。
优先级顺序：id>class>标签选择
!important的优先级最高
使用!important可以改变优先级别为最高，其次是style对象，然后是id>class>tag，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
14.前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。[/code]
网页的结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。
标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
例如，P标签表达了这样一种语义：“这是一个文本段。”网页的表示层（presentationlayer）由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域。
15.标签上title与alt属性的区别是什么?alt当图片不显示时用文字代表。title为该属性提供信息[/code]
16.描述cssreset的作用和用途。Reset重置浏览器的css默认属性，因为浏览器的种类不同，样式不同，然后重置，让他们统一。
　reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。　　比如说，　　　　1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。　　　　2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。　　　　3）后面设置的属性将会覆盖前面重复设置的属性。期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
17.解释csssprites，如何使用。Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，
background-position可以用数字能精确的定位出背景图片的位置。
18.你如何对网站的文件和资源进行优化？
期待的解决方案包括：文件合并、文件最小化、文件压缩、使用CDN托管、缓存的使用（多个域名来提供缓存）。
19.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1）.优化图片2）.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）3）.优化CSS（压缩合并css，如margin-top,margin-left...)4）.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）5）.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）6）.减少http请求（合并文件，合并图片）。
20.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
解释浮动和工作原理
答:　　浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。关于清除浮动:清除浮动可以理解为打破横向5bc3a排列。clear:none|left|right|both对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。1）.使用空标签清除浮动。在浮动元素后面添加空标签clear:both;弊端就是增加了无意义标签。2）.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。3）.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。a.该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；b.content属性是必须的，但其值可以为空，content属性的值设为””父级div定义,使用伪类:after和zoom
　　zoom:1的作用：触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。
21置换元素（replacedelement）主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素。
进而可知，非置换元素（non-replacedelement）就是除了img,input,textarea,select,object等置换元素以外的元素。置换元素/替换元素1.1.一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。1.2.替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。1.3.例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。1.4.HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。非置换元素/不可替换元素2.1.HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：[code]<!--span是非置换元素因此helloword被展示出来而不是被替换成其他内容--><span>helloword</span>
display:none和visibility：hidden会产生回流与重绘吗？
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaintvisibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaintreflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流repaint:当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘通过上述定义，可以很明显看出，重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。重绘就好像给人染了一个头发，而回流相当于给人做了一次抽脂手术
二、什么会引起回流
页面渲染初始化DOM结构变化，比如删除了某个节点；骨头都被打断了，肯定比抽脂更严重，所以会引发回流render树变化，比如减少了padding；也就是进行抽脂手术窗口resize事件触发最复杂的一种：获取某些属性，引发回流很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。但是除了render树的直接变化。当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
你最喜欢的图片替换方法是什么，你如何选择使用?
方法一：通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果[/code]
方法二：使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值
22.简述一下你对HTML语义化的理解？
答：用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式CSS的情况下也以一种
文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易
将网站分块，便于阅读维护理解。
如何为有功能限制的浏览器提供网页?
答:功能限制的浏览器,比如低版本IE,手机浏览器,等会在很多功能上不符合Web标准,而应对方式主要有:只提供符合Web标准的页面提供另一个符合那些浏览器标准的页面兼容:两种思路:渐进增强:提供一个可用的原型，后来再为高级浏览器提供优化优雅降级:据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本相关技术:MediaQueryCSShack条件判断<!--[if!IE]><!-->除IE外都可识别<!--<![endif]-->
27.知道BFC吗?
答:BFC指的是BlockFormattingContext,它提供了一个环境,html元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局.决定了元素如何对其内容进行定位,以及和其他元素的关系和相互作用.　　其中:FC(FormattingContext):指的是页面中的一个渲染区域,并且拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用.　　BFC:块级格式化上下文,指的是一个独立的块级渲染区域,只有block-levelbox参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关.满足下面任意一条，都可以生成BFC:根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block,table-cell,table-captionposition的值为absolute或fixedBFC的约束规则生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。分解:内部的Box会在垂直方向上一个接一个的放置垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）BFC的区域不会与float的元素区域重叠计算BFC的高度时，浮动子元素也参与计算BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然BFC在布局中的应用不和浮动元素重叠:如果一个浮动元素后面跟着一个非浮动元素,就会产生覆盖防止margin重叠:同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode解决浮动相关问题父元素:overflow:hiddenIE:zoom:1(hasLayout)根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可，并不只有这两种方式。多栏布局比如左右两栏宽度固定,中间栏自适应则中间栏设置overflow:hidden生成BFC[/code]
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
[code]简单归纳一下BFC的效果：内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；处于同一个BFC中的元素相互影响，可能会发生margincollapse；每个元素的marginbox的左边，与容器块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；浮动盒区域不叠加到BFC上；
举例1：通过设置float:left来创建BFC
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>对BFC的认识</title><styletype="text/css">/*绿色框（’#left’）向左浮动，它创建了一个新BFC，但暂时不讨论它所创建的BFC。由于绿色框浮动了，它脱离了原本normalflow的位置，[/code]
因此，粉色框（’#right’）就被定位到灰色父元素的左上角（特性3：元素左边与容器左边相接触），与浮动绿色框发生了重叠。同时，由于灰色框（’#box’）并没有创建BFC，
因此在计算高度的时候，并没有考虑绿色框的区域（特性6：浮动区域不叠加到BFC区域上），发生了高度坍塌，这也是常见问题之一。*/*{margin:0;padding:0;}.left{background:#73DE80;/*绿色*/opacity:0.5;border:3pxsolid#F31264;width:200px;height:200px;float:left;//创建了一个BFC}.right{/*粉色*/background:#EF5BE2;opacity:0.5;border:3pxsolid#F31264;width:400px;min-height:100px;}.box{background:#888;height:100%;margin-left:50px;}</style></head><body><divclass='box'><divclass='left'></div><divclass='right'></div></div></body></html>
举例2：现在通过设置overflow:hidden来创建BFC
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>对BFC的认识</title><styletype="text/css">*{margin:0;padding:0;}.left{background:#73DE80;/*绿色*/opacity:0.5;border:3pxsolid#F31264;width:200px;height:200px;float:left;}.right{/*粉色*/background:#EF5BE2;opacity:0.5;border:3pxsolid#F31264;width:400px;min-height:100px;}.box{background:#888;height:100%;margin-left:50px;}.BFC{overflow:hidden;}<divclass='boxBFC'><divclass='left'></div><divclass='right'></div></div></style></head><body><divclass='boxBFC'><divclass='left'></div><divclass='right'></div></div></body></html>
灰色框创建了一个新的BFC后，高度发生了变化，计算高度时它将绿色框区域也考虑进去了（特性5：计算BFC的高度时，浮动元素也参与计算）；而绿色框和红色框的显示效果仍然没有任何变化。
举例3：现将一些小块添加到粉色框
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>对BFC的认识</title><styletype="text/css">*{margin:0;padding:0;}.left{background:#73DE80;/*绿色*/opacity:0.5;border:3pxsolid#F31264;width:200px;height:200px;float:left;}.right{/*粉色*/background:#EF5BE2;opacity:0.5;border:3pxsolid#F31264;width:400px;min-height:100px;}.box{background:#888;height:100%;margin-left:50px;}.BFC{overflow:hidden;}.little{background:#fff;width:50px;height:50px;margin:10px;float:left;}<divclass='boxBFC'><divclass='left'></div><divclass='right'></div></div></style></head><body><divclass='boxBFC'><divclass='left'></div><divclass='right'></div><divclass='little'></div><divclass='little'></div><divclass='little'></div></div></body></html>
由于粉色框没有创建新的BFC，因此粉色框中白色块受到了绿色框的影响，被挤到了右下边去了
举例4：为粉色框创建BFC：[/code]
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>对BFC的认识</title><styletype="text/css">*{margin:0;padding:0;}.left{background:#73DE80;/*绿色*/opacity:0.5;border:3pxsolid#F31264;width:200px;height:200px;float:left;}.right{/*粉色*/background:#EF5BE2;opacity:0.5;border:3pxsolid#F31264;width:400px;min-height:100px;}.box{background:#888;height:100%;margin-left:50px;}.BFC{overflow:hidden;}.little{background:#fff;width:50px;height:50px;margin:10px;float:left;}</style></head><body><divclass='boxBFC'><divclass='left'></div><divclass='rightBFC'></div><divclass='little'></div><divclass='little'></div><divclass='little'></div></div></body></html>
一旦粉色框创建了新的BFC以后，粉色框就不与绿色浮动框发生重叠了，同时内部的白色块处于隔离的空间
（特性4：BFC就是页面上的一个隔离的独立容器），白色块也不会受到绿色浮动框的挤压。
在实际中，利用BFC可以闭合浮动（实例二），防止与浮动元素重叠（实例四）。同时，由于BFC的隔离作用，
可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margincollapse。
position属性：
稳定排序和不稳定排序（7大排序的稳定性分析）
稳定排序有：插入排序、冒泡排序、归并排序、基数排序
不稳定排序：希尔排序、快速排序、选择排序、堆排序
【3】各种排序算法稳定性分析现在分析一下常见的排序算法的稳定性，每个都给出简单的理由。（1）冒泡排序冒泡排序就是把小的元素往前调（或者把大的元素往后调）。注意是相邻的两个元素进行比较，而且是否需要交换也发生在这两个元素之间。所以，如果两个元素相等，我想你是不会再无聊地把它们俩再交换一下。如果两个相等的元素没有相邻，那么即使通过前面的两两交换把两个元素相邻起来，最终也不会交换它俩的位置，所以相同元素经过排序后顺序并没有改变。所以冒泡排序是一种稳定排序算法。（2）选择排序选择排序即是给每个位置选择待排序元素中当前最小的元素。比如给第一个位置选择最小的，在剩余元素里面给第二个位置选择次小的，依次类推，直到第n-1个元素，第n个元素不用选择了，因为只剩下它一个最大的元素了。那么，在一趟选择时，如果当前锁定元素比后面一个元素大，而后面较小的那个元素又出现在一个与当前锁定元素相等的元素后面，那么交换后位置顺序显然改变了。呵呵！比较拗口，举个例子：序列58529，我们知道第一趟选择第1个元素5会与2进行交换，那么原序列中两个5的相对先后顺序也就被破坏了。所以选择排序不是一个稳定的排序算法。（3）插入排序插入排序是在一个已经有序的小序列的基础上，一次插入一个元素。当然，刚开始这个有序的小序列只有1个元素，也就是第一个元素（默认它有序）。比较是从有序序列的末尾开始，也就是把待插入的元素和已经有序的最大者开始比起，如果比它大则直接插入在其后面。否则一直往前找直到找到它该插入的位置。如果遇见一个与插入元素相等的，那么把待插入的元素放在相等元素的后面。所以，相等元素的前后顺序没有改变，从原无序序列出去的顺序仍是排好序后的顺序，所以插入排序是稳定的。（4）快速排序快速排序有两个方向，左边的i下标一直往右走（当条件a[i]<=a[center_index]时），其中center_index是中枢元素的数组下标，一般取为数组第0个元素。而右边的j下标一直往左走（当a[j]>a[center_index]时）。如果i和j都走不动了，i<=j,交换a[i]和a[j],重复上面的过程，直到i>j。交换a[j]和a[center_index]，完成一趟快速排序。在中枢元素和a[j]交换的时候，很有可能把前面的元素的稳定性打乱，比如序列为53343891011现在中枢元素5和3(第5个元素，下标从1开始计)交换就会把元素3的稳定性打乱。所以快速排序是一个不稳定的排序算法，不稳定发生在中枢元素和a[j]交换的时刻。（5）归并排序归并排序是把序列递归地分成短序列，递归出口是短序列只有1个元素(认为直接有序)或者2个序列(1次比较和交换)，然后把各个有序的段序列合并成一个有序的长序列，不断合并直到原序列全部排好序。可以发现，在1个或2个元素时，1个元素不会交换，2个元素如果大小相等也没有人故意交换，这不会破坏稳定性。那么，在短的有序序列合并的过程中，稳定是是否受到破坏？没有，合并过程中我们可以保证如果两个当前元素相等时，我们把处在前面的序列的元素保存在结果序列的前面，这样就保证了稳定性。所以，归并排序也是稳定的排序算法。（6）基数排序基数排序是按照低位先排序，然后收集；再按照高位排序，然后再收集；依次类推，直到最高位。有时候有些属性是有优先级顺序的，先按低优先级排序，再按高优先级排序，最后的次序结果就是高优先级高的在前，高优先级相同的情况下低优先级高的在前。基数排序基于分别排序，分别收集，所以其是稳定的排序算法。（7）希尔排序希尔排序是按照不同步长对元素进行插入排序，当刚开始元素很无序的时候，步长最大，所以插入排序的元素个数很少，速度很快；当元素基本有序时，步长很小，插入排序对于有序的序列效率很高。所以，希尔排序的时间复杂度会比O(N^2)好一些。由于多次插入排序，我们知道一次插入排序是稳定的，不会改变相同元素的相对顺序，但在不同的插入排序过程中，相同的元素可能在各自的插入排序中移动，最后其稳定性就会被打乱。所以shell排序是不稳定的排序算法。（8）堆排序(不稳定)我们知道堆的结构是节点i的孩子为2*i和2*i+1节点，大顶堆要求父节点大于等于其2个子节点，小顶堆要求父节点小于等于其2个子节点。在一个长为n的序列，堆排序的过程是从第n/2开始和其子节点共3个值选择最大（大顶堆）或者最小（小顶堆），这3个元素之间的选择当然不会破坏稳定性。但当为n/2-1,n/2-2,...1这些个父节点选择元素时，就会破坏稳定性。有可能第n/2个父节点交换把后面一个元素交换过去了，而第n/2-1个父节点把后面一个相同的元素没有交换，那么这2个相同的元素之间的稳定性就被破坏了。所以，堆排序不是稳定的排序算法。操作过程如下：1)初始化堆：将R[1..n]构造为堆；2)将当前无序区的堆顶元素R[1]同该区间的最后一个记录交换，然后将新的无序区调整为新的堆。因此对于堆排序，最重要的两个操作就是构造初始堆和调整堆，其实构造初始堆事实上也是调整堆的过程，只不过构造初始堆是对所有的非叶节点都进行调整。
二、JavaScript部分
1.怎样创建、添加、移除、移动、复制、和查找节点？
1）创建新节点
createDocumentFragment//创建一个DOM片段
createElement//创建一个元素
createTextNode//创建一个文本节点
2）添加、移除、替换、插入
appendChild();
removeChild();
replaceChild();
insertBefore();
3）查找
getElementsByTagName();
getElementsByName();
getElementById();
2.实现一个函数clone，可以对JavaScript中的5种主要的数据类型
（包括Number、String、Object、Array、Boolean）进行值复制。
functionclone(obj){
varo;
switch(typeofobj){
case"undefined"：
break;
case"string":
o=obj+"";
break;
case"number":
o=obj-0;
break;
case"boolean":
o=obj;
break;
case"object":
if(obj==null){
o=null;
}else{
if(object.prototype.toString.call(obj).slice(8,-1)==="Array"){//Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组
o=[];
for(vari=0;i<obj.length;i++){
o.push(clone(obj[i]));
}
}else{
o={};
for(varkinobj){
o(k)=clone(obj[k]);
}
}
}
break;
default:
o=obj;
break;
}
returno;
}
3.如何消除一个数组里面重复的元素？
functiondifferElement(){
vararr1=[1,2,3,2,4,3,2,1];
vararr2=[];
for(vari=0;i<arr1.length;i++){
if(arr2.indexOf(arr1[i])<0){//检索arr2中第一次出现arr2[i]元素的位置，如果arr2中没有该元素，则返回-1；
arr2.push(arr1[i]);
}
}
document.write(arr2);
}
4.Javascript中callee和caller的作用？
callee是返回正在被执行的function函数，也就是所指定的function的正文；
caller是返回对一个函数的引用，该函数调用了当前函数；
5.请描述一下cookies，webStorage，sessionStorage和localStorage的区别
cookies的容量大小受限，当你每次请求一个新的页面时，cookie都会被发送过去，这样就会无形中浪费了带宽，
cookie还需要指定作用域，不可以跨域调用；
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话的页面才会被访问，并且当会话结束时，
数据也会随之销毁，因此，sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储；
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
webStorage和cookie相似，区别是它的存储容量更大一些，并且拥有setItem,getItem,removeItem,clear等方法，
不像cookie需要前端开发者自己封装setCookie()、getCookie()方法；cookie的作用是与服务器进行交互，
作为HTTP规范的一部分存在，而webStorage仅仅是为了存储本地数据。
6.统计字符串中各个字母的个数或统计最多字母数。
functioncountStr(){
varstr="aaaabbbccddfgh";
obj={};//obj为对象
for(vari=0;i<str.length;i++){
varv=str.charAt(i);
if(obj[v]!=null&&obj[v]==v){
obj[v].count=++obj[v].count;
}else{
obj[v]={};
obj[v].count=1;
obj[v].value=v;
}
}
for(kinobj){
document.write(obj[key].value+'='+obj[key].count+ ");//a=4,b=3,c=2,d=2,f=1,g=1,h=1
}
}
1.javascript的typeof返回哪些数据类型Objectnumberfunctionbooleanundefinedstring2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（==–===）3.split()join()的区别前者是将字符串切割成数组的形式，后者是将数组转换成字符串。
4.数组方法pop()push()unshift()shift()Push()尾部添加pop()尾部删除Unshift()头部添加shift()头部删除
5.ajax请求时，如何解释json数据使用eval()方法或者JSON.parse()方法来解析json数据，但是鉴于安全性考虑使用JSON.parse()方法更靠谱6.js是什么，js和html的开发如何结合?js是一种基于对象和事件驱动，并具有安全性的脚本语言。可以html的三个地方编写js脚本语言：一是在网页文件的标签对中直接编写脚本程序代码；二是将脚本程序代码放置在一个单独的文件中，
在网页文件中引用这个脚本程序语言；三是将脚本程序代码作为某个元素的事件属性值或超链接的href属性值。
7.caller与callee的区别：
caller返回一个函数的引用，这个函数调用了当前的函数;callee放回正在执行的函数本身的引用，它是arguments的一个属性.
caller返回一个函数的引用，这个函数调用了当前的函数。使用这个属性要注意:1这个属性只有当函数在执行时才有用2如果在JavaScript程序中，函数是由顶层调用的，则返回null。
vara=function(){alert(a.caller);}varb=function(){a();}b();
上面的代码中，b调用了a，那么a.caller返回的是b的引用
返回：
如果直接调用a(即a在任何函数中被调用，也就是顶层调用),返回null:[javascript]viewplaincopyvara=function(){alert(a.caller);}varb=function(){a();}//b();a();
calleecallee返回正在执行的函数本身的引用，它是arguments的一个属性使用callee时要注意:1这个属性只有在函数执行时才有效2它有一个length属性，可以用来获得形参的个数，因此可以用来比较形参和实参个数是否一致，即比较arguments.length是否等于arguments.callee.length3它可以用来递归匿名函数。[javascript]viewplaincopyvara=function(){alert(arguments.callee);}varb=function(){a();}b();a在b中被调用，但是它返回了a本身的引用，结果如下:[javascript]viewplaincopyvara=function(){alert(arguments.callee);}8.apply和call的区别<scripttype="text/javascript">//apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.//Function.apply(obj,args)方法能接收两个参数//obj：这个对象将代替Function类里this对象//args：这个是数组，它将作为参数传给Function（args-->arguments）//call:和apply的意思一样,只不过是参数列表不一样.//Function.call(obj,[param1[,param2[,…[,paramN]]]])//obj：这个对象将代替Function类里this对象//params：这个是一个参数列表//apply示例//定义一个人类functionPerson(name,age){this.name=name;this.age=age;}//定义一个学生类functionStudent(name,age,grade){this.grade=grade;Person.apply(this,arguments);}varstudent=newStudent("xiaoli",22,"三年级");alert("name:"+student.name+","+"age:"+student.age+","+"grade:"+student.grade);</script>分析:Person.apply(this,arguments);this:在创建对象在这个时候代表的是studentarguments:是一个数组,也就是[“qian”,”21”,”一年级”];也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面//call示例//在Studen函数里面可以将apply中修改成如下://Person.call(this,name,age);什么情况下用apply,什么情况下用call在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的)就可以采用apply,如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));apply的一些其他巧妙用法细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this),第二个参数是一个数组集合,在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3]转换为param1,param2,param3)这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:a)Math.max可以实现得到数组中最大的一项因为Math.max参数里面不支持Math.max([param1,param2])也就是数组但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决varmax=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去b)Math.min可以实现得到数组中最小的一项同样和max是一个思想varmin=Math.min.apply(null,array);c)Array.prototype.push可以实现两个数组合并同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN)所以同样也可以通过apply来装换一下这个数组,即:vararr1=newArray("1","2","3");vararr2=newArray("4","5","6");Array.prototype.push.apply(arr1,arr2);也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!9.JavaScript代码中的"usestrict";是什么意思？使用它的区别是什么？[code]usestrict是一种ECMAscript5添加的（严格）运行模式,这种模式使得Javascript在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;提高编译器效率，增加运行速度；为未来新版本的Javascript标准化做铺垫。
10.new操作符具体干了什么呢？
(1)创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。(2)属性和方法被加入到this引用的对象中。(3)新创建的对象由this所引用，并且最后隐式的返回this。//varobj={};obj.__proto__=Base.prototype;Base.call(obj);
11.JavaScript中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是哪个？
hasOwnPropertyJavaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象中是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。使用方法：object.hasOwnProperty(proName)其中参数object是必选项，一个对象的实例。proName是必选项，一个属性名称的字符串值。如果object本身自己具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回true，反之则返回false。
12.你对JSON了解吗？[code]JSON(JavaScriptObjectNotation：javascript的对象表示方法)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。如：{"age":"12","name":"back"}
13.Ajax是什么？如何创建一个Ajax？[code]ajax的全称：AsynchronousJavascriptAndXML，异步传输+js+xml。所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。//(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息(3)设置响应HTTP请求状态变化的函数(4)发送HTTP请求(5)获取异步调用返回的数据(6)使用JavaScript和DOM实现局部刷新
14.同步和异步的区别？[code]同步的概念应该是来自于操作系统中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。//同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。//异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
15.如何解决跨域问题？[code]jsonp、iframe、window.name、window.postMessage、document.domain服务器上设置代理页面
16.谈一谈你对ECMAScript6的了解？
ECMAScript6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript2015。也就是说，ES6就是ES2015
17.ECMAScript6怎么写class，为何会出现class？
ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。//定义类classPoint{constructor(x,y){//构造方法this.x=x;//this关键字代表实例对象this.y=y;}toString(){return'('+this.x+','+this.y+')';}}
18.异步加载JS的方式有哪些？
(1)defer，只支持IE(2)async:(3)动态创建script，插入到DOM中，加载完毕后callBack
19.document.write和innerHTML有何区别？
document.write只能重绘整个页面innerHTML可以重绘页面的一部分
20.jQuery中如何将数组转化为json字符串，然后再转化回来？[code]jQuery中没有提供这个功能，所以需要先编写两个jQuery的扩展：$.fn.stringifyArray=function(array){returnJSON.stringify(array)}$.fn.parseArray=function(array){returnJSON.parse(array)}//然后调用:$("").stringifyArray(array)
21.前端MVC、MVVM
1、MVC
[code]模型（Model）：数据保存视图（View）：用户界面控制器（Controller）：业务逻辑(1)View传送指令到Controller(2)Controller完成业务逻辑后，要求Model改变状态(3)Model将新的数据发送到View，用户得到反馈所有通信都是单向的。
2、MVVM
[code]模型（Model）视图（View）视图模型（ViewModel）(1)各部分间都是双向通信(2)View与Model不发生联系，都通过ViewModel传递(3)View非常薄，不部署任何业务逻辑，称为“被动视图”（PassiveView），即没有任何主动性；而ViewModel非常厚，所有逻辑都部署在那里。采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。
22.检测浏览器版本有哪些方式？[code]功能检测、userAgent特征检测比如：navigator.userAgent
用JavaScript的内置对象navigator的属性userAgent的值来判断（navigator.userAgent）。navigator是javascript的内置对象，通常用于检测浏览器与操作系统的版本。常用的属性有
appCodeName--浏览器代码名的字符串表示appName--官方浏览器名的字符串表示appVersion--浏览器版本信息的字符串表示cookieEnabled--如果启用cookie返回true，否则返回falsejavaEnabled--如果启用java返回true，否则返回falseplatform--浏览器所在计算机平台的字符串表示plugins--安装在浏览器中的插件数组taintEnabled--如果启用了数据污点返回true，否则返回falseuserAgent--用户代理头的字符串表示（就是包含浏览器版本信息等的字符串）[/code]
23.如何实现浏览器内多个标签页之间的通信?
可通过调用localStorage,cookies等本地存储的方式。24.谈谈你对this的理解
1）this是js的一个关键字，随着函数使用场合的不同，this的值也会发生变化；
2）总有一个原则，this指的是调用函数的那个对象；
3）this一般情况下是：全局对象Global
三、HTTP
1.一次完整的HTTP事务是一个怎样的过程？
1）域名解析
2）发起TCP的三次握手
3）建立HTTP连接后发起http请求
4）服务器响应http请求，浏览器得到html代码
5）浏览器解析html代码，并请求html代码中的资源
6）浏览器对页面进行渲染，并呈现给用户
2.HTTP的状态码有哪些？
2开头（请求成功）表示成功处理了请求的状态代码。200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201（已创建）请求成功并且服务器创建了新的资源。202（已接受）服务器已接受请求，但尚未处理。203（非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。204（无内容）服务器成功处理了请求，但没有返回任何内容。205（重置内容）服务器成功处理了请求，但没有返回任何内容。206（部分内容）服务器成功处理了部分GET请求。3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。300（多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者(useragent)选择一项操作，或提供操作列表供请求者选择。301（永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对GET或HEAD请求的响应）时，会自动将请求者转到新位置。302（临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。303（查看其他位置）请求者应当对不同的位置使用单独的GET请求来检索响应时，服务器返回此代码。304（未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。305（使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。307（临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。400（错误请求）服务器不理解请求的语法。401（未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。403（禁止）服务器拒绝请求。404（未找到）服务器找不到请求的网页。405（方法禁用）禁用请求中指定的方法。406（不接受）无法使用请求的内容特性响应请求的网页。407（需要代理授权）此状态代码与401（未授权）类似，但指定请求者应当授权使用代理。408（请求超时）服务器等候请求时发生超时。409（冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。410（已删除）如果请求的资源已永久删除，服务器就会返回此响应。411（需要有效长度）服务器不接受不含有效内容长度标头字段的请求。412（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。413（请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。414（请求的URI过长）请求的URI（通常为网址）过长，服务器无法处理。415（不支持的媒体类型）请求的格式不受请求页面的支持。416（请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。417（未满足期望值）服务器未满足"期望"请求标头字段的要求。5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。500（服务器内部错误）服务器遇到错误，无法完成请求。501（尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。502（错误网关）服务器作为网关或代理，从上游服务器收到无效响应。503（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。504（网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。505（HTTP版本不受支持）服务器不支持请求中所用的HTTP协议版本。
3、https是如何实现加密的？[/code]https=http+ssl安全传输协议+ca身份认证；https是http的安全版，它不仅涵盖http协议，
而且加入了ssl安全加密传输协议保证数据传输的安全性，ca身份认证则验证服务器域名是否是真实可靠的。
浏览器把自身支持的一系列CipherSuite（密钥算法套件，后文简称Cipher）[C1,C2,C3,…]发给服务器；服务器接收到浏览器的所有Cipher后，与自己支持的套件作对比，如果找到双方都支持的Cipher，则告知浏览器；浏览器与服务器使用匹配的Cipher进行后续通信。如果服务器没有找到匹配的算法，浏览器将给出错误信息4、排序算法
1）快速排序算法
快速排序是对冒泡排序的一种改进，第一趟排序时将数据分成两部分，一部分比另一部分的所有数据都要小。然后递归调用，在两边都实行快速排序。//排序思想:1、在数据集中选取一个元素作为基准；//2、所有小于基准的元素都移到基准的左边，所有大于基准的元素都移到基准的右边//3、对基准的左边和右边分别重复第1、2步，直到所有子集只剩下一个元素为止。
[/code]
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>快速排序</title></head><body><scripttype="text/javascript">//functionquickSort(arr){if(arr.length<=1){returnarr;}varpivotIndex=Math.floor(arr.length/2);//取数组中间的元素作为基准varpivot=arr.splice(pivotIndex,1)[0];//splice从数组中删除中间一项。并返回被删除的元素，作为基准varleft=[];varright=[];for(vari=0;i<arr.length;i++){if(arr[i]<pivot){left.push(arr[i]);}else{right.push(arr[i]);}}returnquickSort(left).concat([pivot],quickSort(right));};vararr=[3,45,2,5,33,46,55,4,30];document.write(quickSort(arr));//2,3,4,5,30,33,45,46,55</script></body></html>
2）冒泡排序
[b]<!--冒泡排序:解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。　　　2.第一轮的时候最后一个元素应该是最大的一个。　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。-->[/b]
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>冒泡排序</title></head><body><scripttype="text/javascript">functionbubbleSort(arr){for(vari=0;i<arr.length-1;i++){for(varj=0;j<arr.length-1-i;j++){if(arr[j]>arr[j+1]){vartemp=arr[j];arr[j]=arr[j+1];arr[j+1]=temp;}}}returnarr;}vararr=[3,45,2,5,33,46,55,4,30];console.log(bubbleSort(arr));//2,3,4,5,30,33,45,46,55</script></body></html>
3）选择排序
首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，
再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
以此类推，直到所有元素均排序完毕。
[/code]
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>选择排序</title></head><body><scripttype="text/javascript">//functionselectSort(arr){varlen=arr.length;varminIndex,temp;for(vari=0;i<len-1;i++){minIndex=i;for(varj=i+1;j<len;j++){if(arr[j]<arr[minIndex]){//寻找最小数minIndex=j;//保存最小数的索引}}temp=arr[i];arr[i]=arr[minIndex];arr[minIndex]=temp;}returnarr;}vararr=[3,45,2,5,33,46,55,4,30];document.write(selectSort(arr));//2,3,4,5,30,33,45,46,55</script></body></html>
4）插入排序
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>插入排序</title></head><body><scripttype="text/javascript">functioninsertionSort(arr){vartemp,j;for(vari=1;i<arr.length;i++){temp=arr[i];j=i;while(j>=0&&temp<arr[j-1]){//在剩余的序列中找到最小的元素arr[j]=arr[j-1];--j;}arr[j]=temp;}}varelements=[10,9,8,7,6,5];console.log('before:'+elements);insertionSort(elements);console.log('after:'+elements);//[5,6,7,8,9,10]
</script>
</body>
</html>
5、二分法查找
思想：
1)、首先对所要查找的数据集进行排序，然后将目标元素与数据集中间位置的元素进行比较；
2)、若目标元素正好等于中间位置的元素，则结束查找，否则进行下一步；
3)、若目标元素大于或小于中间位置的元素，则在大于或小于中间位置元素的那一半进行查找，然后重复第一步；
4)、如果某一步的数组为空了，则表示找不到该元素；
非递归算法：
functionbinarySearch(arr,key){
varlow=0;
varhigh=arr.length-1;
while(low<=high){
varmid=parseInt((high+low)/2);
if(arr[mid]==key){
returnmid;
}elseif(key>arr[mid]){
low=mid+1;
}elseif(key<arr[mid]){
high=mid-1;
}else{
return-1;
}
}
};
vararr=[1,2,3,4,5,6,7,8,9,20];
varresult=binarySearch(arr,8);
alert(result);
递归算法：
functionbinarySearch(arr,low,high,key){
if(low>high){
return-1;
}
varmid=parseInt((low+high)/2);
if(arr[mid]==key){
returnmid;
}elseif(arr[mid]>key){
high=mid-1;
returnbinarySearch(arr,low,high,key);
}else(arr[mid]<key){
low=mid+1;
returnbinarySearch(arr,low,high,key);
}
}
vararr=[1,2,3,4,5,6,7,8,9,20];
varresult=binarySearch(arr,0,9,8);
returnresult;
四、设计模式
1.谈谈你对MVC的理解
MVC即Model-View-Controller,模型-视图-控制器，是一种设计模式，它强制性的把应用程序的输入、处理和输出分开。
MVC中的模型、视图、控制器分别承担着不同的任务
模型：表示业务数据和业务处理，一个模型能为多个视图提供数据，这提高了应用程序的重要性；
视图：是用户看到并与之交互的界面。视图向用户显示相关的数据，并接受用户的输入，视图不进行任何的业务逻辑处理；
控制器：当用户单击web页面中的提交按钮时，控制器接受相应的请求并调用相应的模型去处理，然后根据处理的结果
调用相应的视图来显示处理的结果。
MVC的处理过程：首先控制器接受用户的请求，调用相应的模型来进行业务处理，并返回数据给控制器，控制器再调用
相应的视图来显示处理的结果，通过视图呈现给用户。
五、浏览器兼容问题
(一）IE6下的Bug及解决办法
1.双倍边距问题
在IE6中，如果有两个并行的漂浮元素并且用了[code]margin
的话，会出现双倍
margin
值的问题给漂浮元素设置样式
display:inline
为IE6
hack
一下：
margin-left:10px;_margin-left:5px;
在
DOM
结构允许的情况下，左边的用
float:left
，右边的用
float:right
;2.固定定位fix[/code]
[code]position:fixed
这个样式有时候作用很大，尤其是在有浮动栏的时候，但是IE6中并不支持固定定位。[/code]
3.
默认高度问题
在IE6中，如果我们设置一个空白的[code]div
，会发现这个
div
会有一个默认的高度，因为IE6中有一个默认的字体大小，大致在
12-14px
之间，[/code]
IE6会认为这个层的高度不应该小于字体的行高，所以会出现这个问题。解决方法：[code]font-size:0;
[/code]
[code]4.
图片下方出现空白间隙
[/code]
设置图片为块级元素：[code]img{display:block;}
把父元素的字体大小设置为0：
font-size:0
设置图片的垂直对齐方式：
vertical-align:top
5.
IE6中3像素问题
[/code]
如果两个容器挨着，一个浮动，一个不浮动，在IE6中这两个容器之间就会有3像素的间隙，解决办法：给漂浮的容器添加样式[code]_margin-right:-3px;
[/code]
[code]6.
不支持背景透明的PNG
[/code]
在IE6中背景透明的[code]PNG
是不能生效的，所以最好用矩形或者背景颜色。[/code]
1）背景透明的[code]PNG
图片质量其实还是不错的，但是有时候我们为了方便，会为IE6用图片质量低一些的
GIF
图片：[/code]
[code].box{background:url("bg.png");_background:url("bg.gif");}
2）
用滤镜来解决比上面的方法要好：[/code]
.box{width:12px;height:12px;background:url("bg.png");_background:transparentnone;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png")}
3）
JS插件。如果仅仅是几个页面需要
PNG
背景透明的话，那么还是选择第2种方法为好，但是如果需要大范围使用的话，使用插件是不错的选择，插件的名称叫做
DD_belated
:[/code]
DD_belatedPNG.fix('#boximg');
[/code]7.IE6中的:hover在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。
最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。
8.IE6调整窗口大小的Bug当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。
9.最小高度IE6不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。
#container{min-height:200px;height:auto!important;height:200px;}
10.line-height默认行高bug解决方法：line-height设值
.div1{
width:500px;
height:500px;
border:1pxsolidblack;
position:relative;/*很重要,不能忘*/
}
.div2{
background:yellow;
width:300px;
height:200px;
margin:auto;
bottom:0;
top:0;
left:0;
right:0;
position:absolute;
一旦粉色框创建了新的BFC以后，粉色框就不与绿色浮动框发生重叠了，同时内部的白色块处于隔离的空间（特性4：BFC就是页面上的一个隔离的独立容器），白色块也不会受到绿色浮动框的挤压。png和jpg格式的区别：png属于无损压缩，jpg属于有损压缩，这意味着一张图片多次使用jpg格式压缩的话会逐渐失真。png格式的图片存储空间明显大于jpg格式的图片常见的Web攻击有哪些？（1）跨站脚本攻击（XSS）（2）分布式拒绝服务（DDOS）基本方法是利用合理的请求占用服务器的大量资源，使正常用户无法得到服务器的相应。（3）跨站请求伪造攻击（CSRF）攻击者通过各种方法伪造一个请求，模仿用户提交表单的行为，从而达到修改用户的数据，或者执行特定任务的目的。解决方法是尽量使用post请求。（4）sql注入攻击主要针对后台使用sql拼接方式查询的情况，攻击者注入类似or1=1的sql语句，致使表内的全部信息泄露。post请求和get请求的区别（1）get请求一般用来获得数据，而post请求一般用来发送数据。人们期望，get请求不会对服务器造成任何影响，而post请求则可能会影响服务器端的数据。get请求消耗的资源较post请求而言，会少一些，但相对安全性较差。发送同样大小的数据，get请求的效率最高可以达到post请求的2倍。（2）一般按照约定，使用get请求时，将数据通过url进行传递，而是用post请求时，将数据放在body里。但这并非硬性规定，因为method和data本身是正交的。post请求亦可将数据放在url中。（3）就协议底层实现而言，在get请求中，只产生一个TCP数据包，浏览器会将header和data一并发送出去，等待服务器的回应；而在post请求中，会产生2个TCP数据包。浏览器先发送header，服务器响应100continue，浏览器再发送data。JavaScript数组方法总结(上）JavaScript中提供了多种数组方法，如下：转换方法—toLocaleString()方法、toString()方法、valueOf()方法栈方法——push()方法、pop()方法队列方法——shift()方法、unshift()方法重排序方法——reverse()方法、sort()方法操作方法——concat()方法、slice()方法、splice()方法位置方法——indexOf()方法、lastIndexOf()方法迭代方法——every()方法、filter()方法、forEach()方法、map()方法、some()方法归并方法——reduce()方法、reduceRight()方法转换方法：①：toString()方法返回由数组中每个值的字符串形式拼接并且以逗号相隔的字符串②：valueOf()方法返回的还是数组③：toLocaleString()方法也会返回一个数组值以逗号相隔的字符串，但与toString()方法不同的是在返回日期对象时格式不同。具体看一下例子：varcolors=["red","blue","green"];console.log(colors.toString());//"red,blue,green"console.log(colors.valueOf());//red,blue,greenconsole.log(colors.toLocaleString());//"red,blue,green"//toLocaleString()方法与toString()方法在返回日期对象时格式不同vartoday=newDate();console.log(today.toString());//SunMar05201712:57:11GMT+0800(中国标准时间)console.log(today.toLocaleString());//2017/3/5下午12:57:11栈方法：①：push()方法可以接受任意数量的参数，逐个添加到数组末尾，返回修改后数组的长度②：pop()方法从数组末尾移除最后一项，返回被移除的项具体看下面例子：vararr=newArray();//使用构造函数创建数组varcount=arr.push("red","blue");//push()返回数组长度console.log("count="+count);//count=2console.log(arr);//red,bluecount=arr.push("black");//count=3varitem=arr.pop();console.log("item="+item);//pop返回被移除的项--item=black队列方法：①：shift()方法移除数组的第一次项并返回该项②：unshift()方法在数组前端添加任意项，并返回新数组的长度具体看一下例子：varcolors=newArray();//创建数组varcount=colors.unshift("red","green");//在数组前端添加两项console.log(count);//2count=colors.unshift("black");//此时数组各项顺序为"black","red","green"console.log(count)//3item=colors.shift();console.log(item);//black由栈方法跟队列方法可知，在这两种方法中添加数组项的方法返回新数组的长度，移除数组项的方法返回被移除项
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                前端
                                                面试
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航