轉(zhuǎn)自CSDN雄領(lǐng)IT

iframe有哪些優(yōu)點(diǎn)和缺點(diǎn)：

缺點(diǎn)：
① iframe會(huì)阻塞主頁面的Onload事件；
② 搜索引擎的檢索程序無法解讀這種頁面雀鹃，不利于SEO;
③ 會(huì)影響頁面的并行加載。
什么是并行加載：同一時(shí)間針對同一域名下的請求唉堪。一般情況院喜，iframe和所在頁面在同一個(gè)域下面，而瀏覽器的并加載的數(shù)量是有限制的录豺。
怎樣解決：使用js動(dòng)態(tài)給iframe的src加載頁面內(nèi)容，示例代碼如下

 <iframe id="fram"></iframe>
 document.getelementbyid("fram").src="a2.html" 

優(yōu)點(diǎn)：
1.iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁展現(xiàn)出來饭弓。
2.如果有多個(gè)網(wǎng)頁引用iframe双饥，那么你只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁面內(nèi)容的更改弟断，方便快捷咏花。
3.網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的阀趴，就可以寫成一個(gè)頁面昏翰，用iframe來嵌套，可以增加代碼的可重用刘急。
4.如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告棚菊，這些問題可以由iframe來解決。
5.重載頁面時(shí)不需要重載整個(gè)頁面叔汁，只需要重載頁面中的一個(gè)框架頁(減少了數(shù)據(jù)的傳輸统求，增加了網(wǎng)頁下載速度)
6.方便制作導(dǎo)航欄

盒子模型你是怎么理解的？

1）盒子模型有兩種据块，W3C和IE盒子模型

（1）W3C定義的盒子模型包括margin码邻、border、padding另假、content 像屋，元素的width=content的寬度

（2）IE盒子模型與W3C的盒子模型唯一區(qū)別就是元素的寬度，元素的width=content+padding+border

回答：
我個(gè)人認(rèn)為W3C定義盒子模型與IE定義的盒子模型边篮，IE定義的比較合理己莺，元素的寬度應(yīng)該包含border（邊框）和padding（填充）因苹，這個(gè)和我們現(xiàn)實(shí)生活的盒子是一樣的，W3C也認(rèn)識到自己的問題了篇恒，所以在CSS3中新增了一個(gè)樣式box-sizing，包含兩個(gè)屬性content-box 和 border-box凶杖。
（1） content-box 元素的width=content+padding+border
（2） border-box 元素的width=width（用樣式指定的寬度）
（3）對于行級元素胁艰，margin-top和margin-bottom對于上下元素?zé)o效，margin-left和margin-right有效
（4）對于相鄰的塊級元素margin-bottom和margin-top 取值方式
1） 都是正數(shù)： 取最大值

距離=Math.max(margin-botton,margin-top)

2） 都是負(fù)數(shù)： 取最小值

距離=Math.min(margin-botton,margin-top)

3）上面是正數(shù)智蝠，下面是負(fù)數(shù)或者 上面是負(fù)數(shù)腾么，下面是正數(shù)： 正負(fù)相加

距離=margin-botton+margin-top

元素定位有哪些？

position為元素定位屬性杈湾，包含以下屬性值

1. absolute絕對定位

相對位置為父元素為非static的第一個(gè)父元素進(jìn)行定位解虱。

2. fixed 固定定位（老IE6不支持）

相對于瀏覽器窗口進(jìn)行定位。

3. relative相對定位

相對于其正常（默認(rèn)布局）位置進(jìn)行定位漆撞。

加分項(xiàng)：

1.所有的定位如果left殴泰、top、right浮驳、bottom屬性都為默認(rèn)值悍汛，則為默認(rèn)定位
2.absolute定位會(huì)脫離文檔，浮動(dòng)起來至会，多個(gè)層重疊可以使用z-index屬性改變層疊順序
3.absolute定位忽略padding离咐，相對位置為相對定位容器的左上角內(nèi)邊框

樣式導(dǎo)入有哪些方式？

樣式導(dǎo)入方式

• link
• import

使用方式

• link的使用

 <link href="index.css" rel="stylesheet">

• import的使用

<style type="text/css">
 @import "index.css";
 </style>

不同點(diǎn)
link除了引用樣式文件奉件，還可以引用圖片等資源文件宵蛀，而import只引用樣式文件
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask >
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />
兼容性不同，link不存在兼容性的問題县貌，import在IE5以上支持术陶，是css2.1新增的
在樣式表文件可以使用import導(dǎo)入其它的樣式表文件，而link不可以
link引用CSS時(shí)煤痕，在頁面載入時(shí)同時(shí)加載瞳别；@import需要頁面網(wǎng)頁完全載入以后加載。
link支持使用Javascript控制DOM去改變樣式杭攻；而@import不支持祟敛。

加分項(xiàng)

import的寫法比較多
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
推薦使用 @import url(index.css);

::before 和:before有什么區(qū)別？

相同點(diǎn)
都可以用來表示偽類對象兆解，用來設(shè)置對象前的內(nèi)容
:befor和::before寫法是等效的
不同點(diǎn)
:befor是Css2的寫法馆铁，::before是Css3的寫法
:before的兼容性要比::before好 ，不過在H5開發(fā)中建議使用::before比較好

加分項(xiàng)

偽類對象要配合content屬性一起使用
偽類對象不會(huì)出現(xiàn)在DOM中锅睛，所以不能通過js來操作埠巨，僅僅是在 CSS 渲染層加入
偽類對象的特效通常要使用:hover偽類樣式來激活

css樣式的優(yōu)先級是怎么樣的历谍？

樣式優(yōu)先級規(guī)則
1.優(yōu)先級順序?yàn)椋?important>style>權(quán)重值

2. 如果權(quán)重相同，則最后定義的樣式的起作用辣垒，應(yīng)該避免這種情況出現(xiàn)
   權(quán)重規(guī)則
   標(biāo)簽的權(quán)重為1
   class的權(quán)重為10
   id的權(quán)重為100

如何居中一個(gè)元素（正常望侈、絕對定位、浮動(dòng)元素）?

（一）元素水平居中的方式
1）行級元素水平居中對齊（父元素設(shè)置 text-align:center）

2. 塊級元素水平居中對齊（margin: 0 auto）
   3）浮動(dòng)元素水平居中

寬度不固定的浮動(dòng)元素

.outerbox{
float:left; 
position:relative; 
left:50%; 
} 
.innerbox{  
float:left; 
position:relative; 
right:50%; 
}

 <div class="outerbox">
  <div class="innerbox">我是浮動(dòng)的</div>
 </div>

寬度固定的互動(dòng)元素

 .outerbox{
     background-color:pink; /*方便看效果 */  
     width:500px ; 
     height:300px; /*高度可以不設(shè)*/
     margin: -150px 0 0 -250px; /*使用marin向左移動(dòng)250px勋桶，保證元素居中*/
     position:relative;   /*相對定位*/
     left:50%;
     top:50%;
 }

<div class="outerbox">
   <div>我是浮動(dòng)的</div>
</div>

4）讓絕對定位的元素水平居中對齊

.center{
         position: absolute; /*絕對定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略脱衙，且為0*/
         right: 0; /*此處不能省略，且為0*/
}

（二）元素垂直居中對齊
1）對行級元素垂直居中（heiht與line-height的值一樣）
2）對塊級元素垂直居中對齊
2.1 父元素高度固定的情況

1）父元素的height與line-height值相同

2）需要垂直居中的元素

vertical-align:middle;// 垂直居中對齊

display:inline|inline-block 塊級元素轉(zhuǎn)行級元素
2.2 父元素高度不固定的情況

父元素的padding-top和padding-bottom一樣

CSS樣式-display有哪些作用例驹？

元素默認(rèn)的display值的情況如下
block(塊級元素)
<div>捐韩、<p> <ul> <ol> <form> ……
inline（內(nèi)聯(lián)元素）
<span> <a> <img> <input> <select> <label> ……
list-item（項(xiàng)目列表）
<li>
none(不顯示)
<head>（頭部元素都是） <title>
<thead> <tbody> <tfoot>

• 常見的屬性值（屬性值太多，只要說常用的就好）
  none：元素隱藏
  block：塊級元素
  inline-block：內(nèi)聯(lián)塊級元素
  list-item:列表項(xiàng)目
  表格系列方面的顯示
  table
  table-row

一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?

1. 元素水平居中對齊

1. 使用margin對齊(推薦)

2)使用left：50%

3)使用text-align

2. 元素對相對窗口定位

1. 使用filxed（推薦）

2)使用absolute定位

3. 使用html和body的width和height填?這個(gè)窗口

3.元素左右定位

1)使用float左右浮動(dòng)

2)使用絕對定位進(jìn)行左右定位（推薦）

用純CSS創(chuàng)建一個(gè)三角形的原理是什么鹃锈？

1.采用的是均分原理
盒子都是一個(gè)矩形或正方形荤胁，從形狀的中心，向4個(gè)角上下左右劃分4個(gè)部
2.代碼的實(shí)現(xiàn)
第一步 保證元素是塊級元素
第二步 設(shè)置元素的邊框
第三步 不需要顯示的邊框使用透明色

CSS樣式-如何清除元素浮動(dòng)屎债？

1.使用clear:both清除浮動(dòng)
示例1：使用div

<div class="box">

 <div class="div"></div>

 <div class="clear"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

示例2:使用<br clear="all">

<div class="box">

 <div class="div"></div>

   <br clear="all"/>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

偽類對象::after+zoom:1(推薦使用)

<div class="box clear">

 <div class="div"></div>

</div>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow屬性

<div class="box">

 <div class="div1"></div>

</div>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}
注意：overflow:auto;仅政、overflow:hidden;都可以

3.使用display屬性

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，在父元素使用text-align:center解決   

4.父級元素浮動(dòng)

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中盆驹，可以使用定位解決    

position: relative;

left: 50%;

margin-left: -150px;

JavaScript中如何翻轉(zhuǎn)一個(gè)字符串已旧？

1）使用字符串函數(shù)

str.split('').reverse().join('');

2）使用for循環(huán)

function reverseString(str) {   
var newStr="";
for(var i=str.length-1;i>=0;i--){
newStr+=str[i];
}
return newStr;
}

3）使用遞歸

function reverseString(str) {
 if (str === "") {
 return "";
 } else {
 return reverseString(str.substr(1)) + str.charAt(0);
 }
}
reverseString("hello"); // => olleh

如何向數(shù)組中間插入或刪除元素？

第一種方法 使用splice方法

splice(start, deleteCount, value, ...)

start
開始插入和(或)刪除的數(shù)組元素的下標(biāo)召娜。
deleteCount
從start開始运褪，包括start所指的元素在內(nèi)要?jiǎng)h除的元素個(gè)數(shù)。這個(gè)參數(shù)是可選的玖瘸，如果沒有指定它秸讹，splice()將刪除從start開始到原數(shù)組結(jié)尾的所有元素。
value, ...
要插入數(shù)組的零個(gè)或多個(gè)值雅倒，從start所指的下標(biāo)處開始插入璃诀。
第二種方法 比較常規(guī)

var str = [0, 1, 3, 4, 6, 7];//原始字符串
var insWord = 5;//待插入字符串
var index = 4;//待插入位置
//待插入位置的元素全部向后移動(dòng)一位
for(var i=str.length-1;i>=index;i--){
 str[i+1]=str[i];
}
str[index]=insWord;//移動(dòng)完后，將待插入的位置賦值為待插入的值
console.log(str);//[0, 1, 3, 4, 5, 6, 7]

用js實(shí)現(xiàn)千位分隔符蔑匣，怎么實(shí)現(xiàn)?

方法一：使用正則表達(dá)式

<span style="font-size:14px;">function format (num) {
    var reg=/\d{1,3}(?=(\d{3})+$)/g; 
    return (num + '').replace(reg, '$&,');
}</span>
正則表達(dá)式 \d{1,3}(?=(\d{3})+$)  表示前面有1~3個(gè)數(shù)字劣欢，后面的至少由一組3個(gè)數(shù)字結(jié)尾。
?=表示正向引用裁良，可以作為匹配的條件凿将，但匹配到的內(nèi)容不獲取，并且作為下一次查詢的開始价脾。
$& 表示與正則表達(dá)式相匹配的內(nèi)容牧抵，具體的使用可以查看字符串replace()方法的

第二種：方法-正常思維算法

function format(num){
 num=num+'';//數(shù)字轉(zhuǎn)字符串
  var str="";//字符串累加
  for(var i=num.length- 1,j=1;i>=0;i--,j++){
      if(j%3==0 && i!=0){//每隔三位加逗號咐旧，過濾正好在第一個(gè)數(shù)字的情況
          str+=num[i]+",";//加千分位逗號
          continue;
      }
      str+=num[i];//倒著累加數(shù)字
  }
  return str.split('').reverse().join("");//字符串=>數(shù)組=>反轉(zhuǎn)=>字符串
}

怎樣創(chuàng)建碳褒、添加盐固、移除罗标、移動(dòng)、和查找節(jié)點(diǎn)?

1.createDocumentFragment()
創(chuàng)建一個(gè)虛擬節(jié)點(diǎn)對象,對于頻繁操作DOM時(shí)推薦使用获枝，減少對頁面重繪頻率從而提高頁面響應(yīng)的速度蠢正。
2.createElement()
根據(jù)標(biāo)簽名稱創(chuàng)建一個(gè)具體的元素，對應(yīng)的屬性為innerHTML省店，此方法使用的頻率高嚣崭，創(chuàng)建元素基本上都會(huì)選擇這種方法。
3.createTextNode()
創(chuàng)建一個(gè)文本節(jié)點(diǎn)萨西，對應(yīng)的屬性為innerText。
移除元素
parentNode.removeChild(childNode)

替換元素
parentNode.replaceChild(newChild,oldChild);//替換元素

插入元素
parentNode.insertBefore(newChild,refChild)//在refChild前插入節(jié)點(diǎn)

追加元素
parentNode.appendChild(childNode)

查找

1. parentNode.getElementsByTagName(tagName)獲取所在父節(jié)點(diǎn)下的指定標(biāo)簽名節(jié)點(diǎn),返回HTMLCollection類型
2. document.getElementsByClassName(className)//根據(jù)類名獲取節(jié)點(diǎn)旭旭，返回HTMLCollection
3. document.getElementById(id)//通過元素Id谎脯，唯一性
4. 高級選擇器 document.querySelector

事件是什么？如何阻止事件冒泡持寄？

事件用于監(jiān)聽瀏覽器的操作行為源梭，瀏覽器觸發(fā)動(dòng)作時(shí)被捕捉到而調(diào)用相應(yīng)的函數(shù)。

事件執(zhí)行三個(gè)階段
① 事件捕獲階段
② 處于目標(biāo)階段
③ 事件冒泡階段
捕獲型事件是自上而下稍味，而冒泡型事件是自下而上的废麻，而我們程序員通常要做的就是第二階段，完成事件的動(dòng)作模庐。而第一烛愧、三階段由系統(tǒng)封裝自動(dòng)調(diào)用完成。

冒泡阻止
event.stopPropagation()
IE瀏覽器
event.cancelBubble = true;

談一下Jquery中的bind,live,delegate,on的區(qū)別掂碱？

• bind：把事件綁定到每一個(gè)匹配的元素上
  1.兼容性比較好
  2.綁定事件到所有選出來的元素上
  3.不會(huì)綁定事件到動(dòng)態(tài)添加的那些元素上
  4.當(dāng)元素很多時(shí)怜姿，會(huì)出現(xiàn)效率問題，特別是嵌套層次比較深的元素疼燥。
• live：把所有的事件都綁定到j(luò)query對象$(document) 沧卢，主要特點(diǎn)：
  1.事件只需要綁定一次，不需要綁定到篩選出來的元素上醉者。
  2.動(dòng)態(tài)添加元素后依然擁有綁定事件但狭。
  3.不能使用event.stopPropagation() 來阻止事件的冒泡。
• delegate：將事件綁定到指定的父元素上撬即，和live類似但比較能活立磁。主要特點(diǎn)：
  1.可以用在動(dòng)態(tài)添加的元素上
  2.綁定的父元素可以采用就近原則，減少查詢的次數(shù)剥槐，比live的性能好
  3.在live和delegate兩者推薦使用delegate
• On：是jQuery1.7中新增的息罗，前面的三種方法都是依賴on方法來實(shí)現(xiàn)的。才沧，主要特點(diǎn)：
  1.事件的添加和卸載都要是通過on來實(shí)現(xiàn)的迈喉，提供一種統(tǒng)一的事件處理方法绍刮。
  2.增加了使用的難度，對于不熟悉on的使用的挨摸，很有可能就勿用孩革，導(dǎo)致性能下降。

原型是什么得运？原型鏈?zhǔn)鞘裁矗?/h5>

• 原型是什么膝蜈？
  在JavaScript中原型是一個(gè)prototype對象，用于表示類型之間的關(guān)系熔掺。

• 原型鏈?zhǔn)鞘裁矗?br> JavaScript萬物都是對象饱搏，對象和對象之間也有關(guān)系，并不是孤立存在的置逻。對象之間的繼承關(guān)系推沸，在JavaScript中是通過prototype對象指向父類對象，直到指向Object對象為止券坞，這樣就形成了一個(gè)原型指向的鏈條鬓催，專業(yè)術(shù)語稱之為原型鏈。

什么是閉包恨锚，為什么要用它宇驾？

閉包是什么
我個(gè)人理解，閉包是就是函數(shù)中的函數(shù)猴伶，里面的函數(shù)可以訪問外面函數(shù)的變量课舍，外面的變量的是這個(gè)內(nèi)部函數(shù)的一部分。
輔助理解

<script>
    function  outer(){
        var num=0;//內(nèi)部變量
       return  function add(){//通過return返回add函數(shù)他挎，就可以在outer函數(shù)外訪問了布卡。
            num++;//內(nèi)部函數(shù)有引用，作為add函數(shù)的一部分了
           console.log(num);
        };
    }
    var func1=outer();//
    func1();//實(shí)際上是調(diào)用add函數(shù)雇盖， 輸出1
    func1();//輸出2
    var func2=outer();
    func2();// 輸出1
    func2();// 輸出2
</script>

閉包的作用
1.使用閉包可以訪問函數(shù)中的變量忿等。
2.可以使變量長期保存在內(nèi)存中，生命周期比較長崔挖。

加分項(xiàng)

閉包不能濫用贸街，否則會(huì)導(dǎo)致內(nèi)存泄露，影響網(wǎng)頁的性能狸相。閉包使用完了后薛匪，要立即釋放資源，將引用變量指向null脓鹃。

Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax逸尖？

Ajax是什么
我理解Ajax 是一種異步請求數(shù)據(jù)的一種技術(shù)，對于改善用戶的體驗(yàn)和程序的性能很有幫助。
Ajax的使用
1.創(chuàng)建Ajax核心對象XMLHttpRequest

var xmlhttp;
if (window.XMLHttpRequest)
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// 兼容 IE6, IE5
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  }

2.向服務(wù)器發(fā)送請求

xmlhttp.open(method,url,async);
send(string)

• 注意：open 的參數(shù)要牢記娇跟，很多面試官愛問這樣的細(xì)節(jié)
  method：請求的類型岩齿；GET 或 POST
  url：文件在服務(wù)器上的位置
  async：true（異步）或 false（同步）
  send(string)方法post請求時(shí)才使用字符串參數(shù)，否則不用帶參數(shù)苞俘。
• 注意：post請求一定要設(shè)置請求頭的格式內(nèi)容

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3.服務(wù)器響應(yīng)處理
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)盹沈。
responseXML 獲得XML 形式的響應(yīng)數(shù)據(jù)。
3.1 同步處理

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

直接在send()后面處理返回來的數(shù)據(jù)吃谣。
3.2 異步處理
異步處理相對比較麻煩乞封，要在請求狀態(tài)改變事件中處理。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &&xmlhttp.status==200)
    {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

• 一共有5中請求狀態(tài)岗憋，從0 到 4 發(fā)生變化肃晚。

0: 請求未初始化

1: 服務(wù)器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應(yīng)已就緒

• xmlhttp.status：響應(yīng)狀態(tài)碼仔戈。這個(gè)也是面試比較愛問的关串，這個(gè)必須知道4個(gè)以上，比較常見的有：

200: "OK"

403 （禁止） 服務(wù)器拒絕請求杂穷。

404 （未找到） 服務(wù)器找不到請求的網(wǎng)頁悍缠。

408 （請求超時(shí)） 服務(wù)器等候請求時(shí)發(fā)生超時(shí)卦绣。

500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤耐量，無法完成請求。

JavaScript有幾種類型的值滤港？你能畫一下他們的內(nèi)存圖嗎廊蜒？

兩大類：

棧：原始數(shù)據(jù)類型（Undefined，Null溅漾，Boolean山叮，Number、String）

堆：引用數(shù)據(jù)類型（對象添履、數(shù)組和函數(shù)）

區(qū)別：

兩種類型的區(qū)別是：存儲(chǔ)位置不同屁倔；

原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小暮胧、大小固定锐借，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲(chǔ)往衷；

引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對象,占據(jù)空間大钞翔、大小不固定,如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能席舍；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針布轿，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其

在棧中的地址汰扭，取得地址后從堆中獲得實(shí)體

談?wù)勀銓his的理解

this的指向

this表示當(dāng)前對象稠肘，this的指向是根據(jù)調(diào)用的上下文來決定的，默認(rèn)指向window對象东且，指向window對象時(shí)可以省略不寫启具，例如：

this.alert() <=> window.alert()<=> alert();

調(diào)用的上下文環(huán)境包括全局和局部

• 全局環(huán)境

全局環(huán)境就是在<script></script>里面，這里的this始終指向的是window對象

• 局部環(huán)境

1）在全局作用域下直接調(diào)用函數(shù)珊泳，this指向window
2）對象函數(shù)調(diào)用鲁冯，哪個(gè)對象調(diào)用就指向哪個(gè)對象

<input type="button"id="btnOK" value="OK">
<script>
varbtnOK=document.getElementById("btnOK");
btnOK.onclick=function(){
console.log(this);//this指向的是btnOK對象
}
</script>

3）使用 new 實(shí)例化對象，在構(gòu)造函數(shù)中的this指向?qū)嵗瘜ο蟆?/p>

var Show=function(){
    this.myName="Mr.Cao";   //這里的this指向的是obj對象
}
var obj=new Show();

4）使用call或apply改變this的指向

var Go=function(){
     this.address="深圳";
}
var Show=function(){
     console.log(this.address);//輸出 深圳
}
var go=new Go();
Show.call(go);//改變Show方法的this指向go對象

• 加分項(xiàng)

1. 用于區(qū)分全局變量和局部變量色查，需要使用this
   2.返回函數(shù)當(dāng)前的對象薯演，看jquery1.8.3源碼。
   3.將當(dāng)前的對象傳遞到下一個(gè)函數(shù)秧了，看jquery1.8.3源碼跨扮。

同步和異步有什么區(qū)別？

• 同步的概念

同步验毡，我的理解是一種線性執(zhí)行的方式衡创，執(zhí)行的流程不能跨越。一般用于流程性比較強(qiáng)的程序晶通，我們做的用戶登錄功能也是同步處理的璃氢，必須用戶通過用戶名和密碼驗(yàn)證后才能進(jìn)入系統(tǒng)的操作。

• 異步的概念

異步狮辽，是一種并行處理的方式一也，不必等待一個(gè)程序執(zhí)行完，可以執(zhí)行其它的任務(wù)喉脖。在程序中異步處理的結(jié)果通常使用回調(diào)函數(shù)來處理結(jié)果椰苟。在JavaScript中實(shí)現(xiàn)異步的方式主要有Ajax和H5新增的Web Worker。

談?wù)勀銓δK化開發(fā)的理解树叽？

什么是模塊化

所謂的模塊化開發(fā)就是封裝細(xì)節(jié)舆蝴，提供使用接口，彼此之間互不影響题诵，每個(gè)模塊都是實(shí)現(xiàn)某一特定的功能洁仗。模塊化開發(fā)的基礎(chǔ)就是函數(shù)
（一）使用函數(shù)封裝

functionfunc1(){
　　　　//...
}
functionfunc2(){
　　　　//...
}

上面的函數(shù)func1 ()和func2 ()，組成一個(gè)模塊仇轻。使用的時(shí)候京痢，直接調(diào)用就行了。這種做法的缺點(diǎn)很明顯："污染"了全局變量篷店，無法保證不與其他模塊發(fā)生變量名沖突祭椰，而且模塊成員之間看不出直接關(guān)系臭家。
（二）使用對象封裝

為了解決上面的缺點(diǎn)，可以把模塊寫成一個(gè)對象方淤，所有的模塊成員都放到這個(gè)對象里面钉赁。

varobj = {
    age : 0,
    func1 : function (){
        //...
    },
    func2 : function (){
        //...
    }
};

上面的函數(shù)func1 ()和func2 (），都封裝在obj對象里携茂。使用的時(shí)候你踩，就是調(diào)用這個(gè)對象的屬性。
　obj.func1();
這樣做也是有問題的讳苦，變量可以被外面隨意改變而導(dǎo)致不安全带膜。比如，年齡被修成負(fù)數(shù)鸳谜。
obj.age = -100;
如何保證對象的屬性不被訪問了膝藕？
（三）立即執(zhí)行函數(shù)寫法

使用"立即執(zhí)行函數(shù)"（Immediately-Invoked FunctionExpression，IIFE）咐扭，可以達(dá)到不暴露私有成員的目的芭挽。這個(gè)也是閉包處理的一種方式。

var oj= (function(){
　　　　var _age= 0;
　　　　var func1= function(){
　　　　　　//...
　　　　};
　　　　var func2= function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : func1,
　　　　　　m2 : func2
　　　　};
})();

使用上面的寫法蝗肪，外部代碼無法讀取內(nèi)部的age變量袜爪。
console.info(obj.age);//undefined
（四）放大模式
如果一個(gè)模塊很大，必須分成幾個(gè)部分薛闪，或者一個(gè)模塊需要繼承另一個(gè)模塊辛馆，這時(shí)就有必要采用"放大模式"（augmentation）。在原有的基礎(chǔ)上擴(kuò)展更多的方法逛绵。

var obj =(function (mod){
　　　　mod.func3= function () {
　　　　　　//...
　　　　};
　　　　returnmod;//方便方法連續(xù)調(diào)用
})(obj);

（五）寬放大模式（Loose augmentation）

在瀏覽器環(huán)境中怀各，模塊的各個(gè)部分通常都是從網(wǎng)上獲取的倔韭，有時(shí)無法知道哪個(gè)部分會(huì)先加載术浪。如果采用上面的寫法，第一個(gè)執(zhí)行的部分有可能加載一個(gè)不存在空對象寿酌，這時(shí)就要采用"寬放大模式"胰苏。

　　var obj =( function (mod){
　　　　//...
　　　　returnmod;
　　})(window.obj|| {});//確保對象不為空

（六）輸入全局變量

獨(dú)立性是模塊的重要特點(diǎn)，模塊內(nèi)部最好不與程序的其他部分直接交互醇疼。為了在模塊內(nèi)部調(diào)用全局變量硕并，必須顯式地將其他變量輸入模塊。

(function(window, undefined ) {
  ……
})(window );

這是jQuery框架的源碼秧荆，將window對象作為參數(shù)傳入倔毙，這樣做除了保證模塊的獨(dú)立性，還使得模塊之間的依賴關(guān)系變得明顯乙濒。

目前陕赃，通行的JavaScript模塊規(guī)范共有兩種：CommonJS和AMD卵蛉。

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

• 方法一：使用localStorage
  使用localStorage.setItem(key,value);添加內(nèi)容
  使用storage事件監(jiān)聽添加、修改么库、刪除的動(dòng)作

window.addEventListener("storage",function(event){
        $("#name").val(event.key+”=”+event.newValue);
});

方法二傻丝、使用cookie+setInterval

<inputid="name"><input type="button" id="btnOK"value="發(fā)送">
 $(function(){
        $("#btnOK").click(function(){
            varname=$("#name").val();
            document.cookie="name="+name;
        });
    });
    //獲取Cookie天的內(nèi)容
    function getKey(key) {
        return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
    }
    //每隔1秒獲取Cookie的內(nèi)容
    setInterval(function(){
        console.log(getKey("name"));
     },1000);

call() 和 apply() 的區(qū)別？

• 相同點(diǎn)：兩個(gè)方法產(chǎn)生的作用是完全一樣的诉儒，都用來改變當(dāng)前函數(shù)調(diào)用的對象葡缰。
• 不同點(diǎn)：調(diào)用的參數(shù)不同，比較精辟的總結(jié)：
  foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
• 使用
  1.call的使用
  語法
  call([thisObj[,arg1[, arg2[, [,.argN]]]]])
  參數(shù)
  thisObj 可選項(xiàng)忱反。將被用作當(dāng)前對象的對象泛释。
  arg1,arg2, , argN 可選項(xiàng)。將被傳遞方法參數(shù)序列温算。
  說明
  call 方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法胁澳。call 方法可將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。如果沒有提供 thisObj 參數(shù)米者，那么 Global 對象被用作 thisObj韭畸。

<input id="myText">
<script>
    function Obj()
    {
       this.value="對象！";
    }
    varvalue="global 變量";
    function Fun1(a,b){
       alert(this.value);
    }
    window.Fun1();   //global 變量
    Fun1.call(window,1,2);  //global 變量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //對象蔓搞！
</script>

2.apply()
apply與call的功能幾乎一樣胰丁，第一個(gè)參數(shù)意義都一樣，只是第二個(gè)參數(shù)有點(diǎn)不同apply傳入的是一個(gè)參數(shù)數(shù)組喂分，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入锦庸，call從第二個(gè)參數(shù)開始，依次傳值給調(diào)用函數(shù)的參數(shù)

eval是做什么的蒲祈？

eval()的作用
把字符串參數(shù)解析成JS代碼并運(yùn)行甘萧，并返回執(zhí)行的結(jié)果；

eval("2+3");//執(zhí)行加運(yùn)算梆掸，并返回運(yùn)算值扬卷。
eval("varage=10");//聲明一個(gè)age變量

eval的作用域

functiona(){
 eval("var x=1"); //等效于 var x=1;
 console.log(x); //輸出1
}
a();
console.log(x);//錯(cuò)誤 x沒有定義

說明作用域在它所有的范圍內(nèi)容有效

• 注意事項(xiàng)
  應(yīng)該避免使用eval，不安全酸钦，非常耗性能（2次怪得，一次解析成js語句，一次執(zhí)行）卑硫。
• 其它作用
  由JSON字符串轉(zhuǎn)換為JSON對象的時(shí)候可以用eval

js延遲加載的方式有哪些徒恋？

1.defer 屬性
<scriptsrc="file.js" defer></script>
瀏覽器會(huì)并行下載 file.js和其它有 defer 屬性的script，而不會(huì)阻塞頁面后續(xù)處理欢伏。defer屬性在IE 4.0中就實(shí)現(xiàn)了入挣，超過10多年了！Firefox從 3.5 開始支持defer屬性 硝拧。
注：所有的defer腳本保證是按順序依次執(zhí)行的径筏。
2.async 屬性
<scriptsrc="file.js" async></script>
async屬性是HTML5新增的风皿。作用和defer類似，但是它將在下載后盡快執(zhí)行匠璧，不能保證腳本會(huì)按順序執(zhí)行桐款。它們將在onload 事件之前完成。
Firefox3.6夷恍、Opera 10.5魔眨、IE 9和 最新的Chrome 和 Safari 都支持 async 屬性∧鹧可以同時(shí)使用 async 和 defer遏暴，這樣IE 4之后的所有IE 都支持異步加載。
3.動(dòng)態(tài)創(chuàng)建DOM方式

<script type="text/javascript">
   function downloadJSAtOnload() {
       varelement = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
   }
   if (window.addEventListener)
      window.addEventListener("load",downloadJSAtOnload, false);
   else if (window.attachEvent)
      window.attachEvent("onload",downloadJSAtOnload);
   else window.onload =downloadJSAtOnload;
</script>

4.使用Jquery的getScript()方法

  $.getScript("outer.js",function(){//回調(diào)函數(shù)指黎，成功獲取文件后執(zhí)行的函數(shù)
        console.log("腳本加載完成")
  });

new操作符具體干了什么呢?

new共經(jīng)過了4個(gè)階段
1朋凉、創(chuàng)建一個(gè)空對象

var obj=new Object();

2、設(shè)置原型鏈

var result =Func.call(obj);

3醋安、讓Func中的this指向obj杂彭，并執(zhí)行Func的函數(shù)體。

var result =Func.call(obj);

4吓揪、判斷Func的返回值類型：
如果是值類型亲怠，返回obj。如果是引用類型柠辞，就返回這個(gè)引用類型的對象团秽。

if (typeof(result) == "object"){
  func=result;
}
else{
    func=obj;;
}

CSS3有哪些新特性？

1.CSS3的選擇器

1）E:last-child 匹配父元素的最后一個(gè)子元素E叭首。
2）E:nth-child(n)匹配父元素的第n個(gè)子元素E习勤。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第n個(gè)子元素E。

2. @Font-face 特性

Font-face 可以用來加載字體樣式焙格，而且它還能夠加載服務(wù)器端的字體文件图毕，讓客戶端顯示客戶端所沒有安裝的字體。

3. 圓角
4. 多列布局 （multi-column layout）
   5.陰影（Shadow）
   6.CSS3 的漸變效果
   7.css彈性盒子模型
5. CSS3制作特效

1. Transition 對象變換時(shí)的過渡效果

transition-property 對象參與過渡的屬性
transition-duration 過渡的持續(xù)時(shí)間
transition-timing-function 過渡的類型
transition-delay 延遲過渡的時(shí)間

2. Transforms 2D轉(zhuǎn)換效果

主要包括 translate（水平移動(dòng)）间螟、rotate（旋轉(zhuǎn)）吴旋、scale（伸縮）损肛、skew（傾斜）

3. Animation動(dòng)畫特效

html5有哪些新特性厢破、移除了那些元素？

（一）.H5新特性
增強(qiáng)了圖形渲染治拿、影音摩泪、數(shù)據(jù)存儲(chǔ)、多任務(wù)處理等處理能力主要表現(xiàn)在

1. 繪畫 canvas;
2. 本地離線存儲(chǔ) localStorage
   長期存儲(chǔ)數(shù)據(jù)劫谅，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
   1.特點(diǎn)
   數(shù)據(jù)永久存儲(chǔ)见坑，沒有時(shí)間限制嚷掠；大小限制5M(夠用了)；只存儲(chǔ)字符串荞驴。
   2.數(shù)據(jù)存取方式

localStorage.a = 3;//設(shè)置a為"3"
localStorage["a"] = "sfsf";//設(shè)置a為"sfsf"不皆，覆蓋上面的值
localStorage.setItem("b","isaac");//設(shè)置b為"isaac"
var a1 = localStorage["a"];//獲取a的值
var a2 = localStorage.a;//獲取a的值
var b = localStorage.getItem("b");//獲取b的值
var b2= localStorage.key(0);//獲取第一個(gè)key的內(nèi)容
localStorage.removeItem("c");//清除c的值
localStorage.clear();//清除所有的數(shù)據(jù)

推薦使用：
getItem()
setItem()
removeItem()
3.事件監(jiān)聽

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);//
}else if(window.attachEvent){ //兼容IE
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 }

對象e為localStorage對象，Chrome熊楼、Firefox支持差霹娄，IE支持較好。

3. sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;操作參考localStorage

4. 用于媒介回放的 video和 audio 元素;

5. 語意化更好的內(nèi)容元素鲫骗，比如article犬耻、footer、header执泰、nav枕磁、section;

6. 表單控件，calendar术吝、date计济、time、email排苍、url峭咒、search;

7. 新的技術(shù)webworker(專用線程)

8. websocketsocket通信

9. Geolocation 地理定位
   （二）移除的元素

• 純表現(xiàn)的元素
  <basefont> 默認(rèn)字體，不設(shè)置字體纪岁，以此渲染
  <font> 字體標(biāo)簽
  <center> 水平居中
  <u> 下劃線
  <big> 大字體
  <strike> 中橫線
  <tt> 文本等寬
• 框架集
  <frameset>
  <noframes>
  <frame>

如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域凑队？

1. map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>

2. border-radius（H5）

<style>
 .disc{
     width:100px;
     height:100px;
     background-color:dimgray;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     left:50px;
     top:50px;  
     line-height: 100px;
     text-align: center;
     color: white;
 }
</style>
<div class="disc">智學(xué)無憂</div>

3. 純js實(shí)現(xiàn)
   需要求一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
   兩點(diǎn)之間的距離計(jì)算公式

上面公式對于JavaScript代碼如下：

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs()求絕對值
Math.pow(底數(shù),指數(shù))
Math.sqrt()求平方根
示例：
假設(shè)圓心為（100,100）,半徑為50幔翰，在圓內(nèi)點(diǎn)擊彈出相應(yīng)的信息漩氨，在圓外顯示不在圓內(nèi)的信息

document.onclick=function(e){
    var r=50;//圓的半徑
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//計(jì)算鼠標(biāo)點(diǎn)的位置與圓心的距離
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("內(nèi)")
    }else{
        console.log("外")
    }
 }

請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別遗增？

相同點(diǎn)：都存儲(chǔ)在客戶端
不同點(diǎn)：
1.存儲(chǔ)大小
cookie數(shù)據(jù)大小不能超過4k叫惊。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多做修，可以達(dá)到5M或更大霍狰。
2.有效時(shí)間
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)饰及；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除蔗坯。
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

3. 數(shù)據(jù)與服務(wù)器之間的交互方式
   cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器燎含，服務(wù)器端也可以寫cookie到客戶端
   sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器宾濒，僅在本地保存。

• 額外拓展【加分項(xiàng)】：Cookie的操作（有點(diǎn)小難度）防止面試官細(xì)問cookie的操作屏箍。
• 設(shè)置Cookie
  cookie的幾個(gè)要素
  cookie的內(nèi)容：采用 key=value;key=value……存儲(chǔ)绘梦，參數(shù)名自定義
  cookie的過期時(shí)間：使用參數(shù)expires
  cookie的路徑：使用參數(shù)path橘忱，"/"表示這個(gè)網(wǎng)站的頁面，不推薦!容易產(chǎn)生沖突
  注意：形如“/pro/index.html”路徑卸奉，在google瀏覽器正常钝诚，在IE瀏覽器得不到值

var name = "jack";
var pwd = "123";
var now = new Date();
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//轉(zhuǎn)毫秒
var path = "/";//可以是具體的網(wǎng)頁
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼

• 讀取cookie
  獲取cookie內(nèi)容
  vardata=document.cookie;//獲取對應(yīng)頁面的cookie
  解析cookie
• 方式1：截取字符串

function getKey(key) {
    var data = document.cookie;
    var findStr = key + "=";
    //找到key的位置
    var index = data.indexOf(findStr);
    if (index == -1)
        return null;
    var subStr = data.substring(index +findStr.length);
    var lastIndex = subStr.indexOf(";");
    if (lastIndex == -1) {
        return subStr;
 } else {
        return subStr.substring(0,lastIndex);
 }
}

• 方式2：使用正則表達(dá)式+JSON

function getKey(key) {
    return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}

清除cookie

var name = null;
var pwd = null;
var now = new Date();
var path = "/";//可以是具體的網(wǎng)頁
document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名
document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密碼

什么是響應(yīng)式開發(fā)？

什么是響應(yīng)式
顧名思義榄棵，同一個(gè)網(wǎng)站兼容不同的大小的設(shè)備敲长。如PC端、移動(dòng)端（平板秉继、橫屏祈噪、豎排）的顯示風(fēng)格。
需要用到的技術(shù)

1. Media Query（媒體查詢）
   用于查詢設(shè)備是否符合某一特定條件尚辑，這些特定條件包括屏幕尺寸辑鲤，是否可觸摸，屏幕精度杠茬，橫屏豎屏等信息月褥。
2. 使用em或rem做尺寸單位
   用于文字大小的響應(yīng)和彈性布局。
3. 禁止頁面縮放
   <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
4. 屏幕尺寸響應(yīng)
   a) 固定布局：頁面居中瓢喉，兩邊留白宁赤，他能適應(yīng)大于某個(gè)值一定范圍的寬度，但是如果太寬就會(huì)有很多留白栓票，太窄會(huì)出現(xiàn)滾動(dòng)條决左，在PC頁面上很常見。
   b) 流動(dòng)布局：屏幕尺寸在一定范圍內(nèi)變化時(shí)走贪，不改變模塊布局佛猛，只改變模塊尺寸比例。比固定布局更具響應(yīng)能力坠狡，兩邊不留白继找，但是也只能適應(yīng)有限的寬度變化范圍，否則模塊會(huì)被擠（拉）得不成樣子逃沿。
   c) 自定義布局：上面幾種布局方式都無法跨域大尺寸變化婴渡，所以適當(dāng)時(shí)候我們需要改變模塊的位置排列或者隱藏一些次要元素。
   d) 柵格布局：這種布局方式使得模塊之間非常容易對齊凯亮，易于模塊位置的改變用于輔助自定義布局边臼。
   響應(yīng)式設(shè)計(jì)注意事項(xiàng)
   1.寬度不固定，可以使用百分比
   head{width:100%;}
   content{width:50%;}
5. 圖片處理
   圖片的寬度和高度設(shè)置等比縮放触幼，可以設(shè)置圖片的width為百分比硼瓣，height:auto;
   背景圖片可以使用background-size 指定背景圖片的大小。