1.HTML悴了， HTTP才沧，web綜合問題

1、前端需要注意哪些SEO

• 合理的title、description彬檀、keywords：搜索對著三項的權(quán)重逐個減小坤学，title值強(qiáng)調(diào)重點即可眠冈，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同；keywords列舉出重要關(guān)鍵詞即可
• 語義化的HTML代碼襟诸，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
• 重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下澜驮，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容一定會被抓取
• 重要內(nèi)容不要用js輸出：爬蟲不會執(zhí)行js獲取內(nèi)容
• 少用iframe：搜索引擎不會抓取iframe中的內(nèi)容
• 非裝飾性圖片必須加alt
• 提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)

2、<img>的title和alt有什么區(qū)別

• 通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示
• alt是<img>的特有屬性劲藐，是圖片內(nèi)容的等價描述缝龄，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值鲁冯，搜索引擎會重點分析综慎。

3、HTTP的幾種請求方法用途

• 1、GET方法
  • 發(fā)送一個請求來取得服務(wù)器上的某一資源
• 2隘竭、POST方法
  • 向URL指定的資源提交數(shù)據(jù)或附加新的數(shù)據(jù)
• 3、PUT方法
  • 跟POST方法很像，也是想服務(wù)器提交數(shù)據(jù)。但是，它們之間有不同。PUT指定了資源在服務(wù)器上的位置窃爷，而POST沒有
• 4钱慢、HEAD方法
  • 只請求頁面的首部
• 5草描、DELETE方法
  • 刪除服務(wù)器上的某資源
• 6逛绵、OPTIONS方法
  • 它用于獲取當(dāng)前URL所支持的方法。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的信息
• 7鲤孵、TRACE方法
  • TRACE方法被用于激發(fā)一個遠(yuǎn)程的琉兜，應(yīng)用層的請求消息回路
• 8梧疲、CONNECT方法
  • 把請求連接轉(zhuǎn)換到透明的TCP/IP通道

4、從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據(jù)請求的URL交給DNS域名解析，找到真實IP，向服務(wù)器發(fā)起請求妻顶；
• 服務(wù)器交給后臺處理完成后返回數(shù)據(jù)，瀏覽器接收文件（HTML钝鸽、JS、CSS河爹、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析茬故，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
• 載入解析到的資源文件磺芭，渲染頁面赁炎，完成钾腺。

5徙垫、如何進(jìn)行網(wǎng)站性能優(yōu)化

• content方面
  1. 減少HTTP請求：合并文件、CSS精靈放棒、inline Image
  2. 減少DNS查詢：DNS緩存姻报、將資源分布到恰當(dāng)數(shù)量的主機(jī)名
  3. 減少DOM元素數(shù)量
• Server方面
  1. 使用CDN
  2. 配置ETag
  3. 對組件使用Gzip壓縮
• Cookie方面
  1. 減小cookie大小
• css方面
  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達(dá)式
  3. 使用<link>不使用@import
• Javascript方面
  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不需要的腳本
  5. 減少DOM訪問
• 圖片方面
  1. 優(yōu)化圖片：根據(jù)實際顏色需要選擇色深、壓縮
  2. 優(yōu)化css精靈
  3. 不要在HTML中拉伸圖片

6间螟、HTTP狀態(tài)碼及其含義

• 1XX
  

  ：信息狀態(tài)碼

  • 100 Continue 繼續(xù)吴旋，一般在發(fā)送post請求時，已發(fā)送了http header之后服務(wù)端將返回此信息厢破，表示確認(rèn)荣瑟，之后發(fā)送具體參數(shù)信息

• 2XX
  

  ：成功狀態(tài)碼

  • 200 OK 正常返回信息
  • 201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
  • 202 Accepted 服務(wù)器已接受請求，但尚未處理

• 3XX
  

  ：重定向

  • 301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置摩泪。
  • 302 Found 臨時性重定向褂傀。
  • 303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI加勤。
  • 304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過同波。

• 4XX
  

  ：客戶端錯誤

  • 400 Bad Request 服務(wù)器無法理解請求的格式鳄梅，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
  • 401 Unauthorized 請求未授權(quán)未檩。
  • 403 Forbidden 禁止訪問戴尸。
  • 404 Not Found 找不到如何與 URI 相匹配的資源。

• 5XX
  

  服務(wù)器錯誤

  • 500 Internal Server Error 最常見的服務(wù)器端錯誤冤狡。
  • 503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護(hù)）孙蒙。

7项棠、語義化的理解

• 用正確的標(biāo)簽做正確的事情！
• html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化挎峦，便于對瀏覽器香追、搜索引擎解析；
• 在沒有樣式CSS情況下也以一種文檔格式顯示坦胶，并且是容易閱讀的透典。
• 搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO顿苇。
• 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊峭咒，便于閱讀維護(hù)理解

8、介紹一下你對瀏覽器內(nèi)核的理解纪岁？

• 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
• 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML凑队、XML、圖像等等）幔翰、整理訊息（例如加入CSS等）漩氨，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)导匣。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同才菠，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器贡定、電子郵件客戶端以及其它需要編輯赋访、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核
• JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果
• 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立缓待，內(nèi)核就傾向于只指渲染引擎

9蚓耽、html5有哪些新特性、移除了那些元素旋炒？

• HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集胀溺，主要是關(guān)于圖像，位置翘狱，存儲盖溺，多任務(wù)等功能的增加
  • 繪畫 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
  • sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
  • 語意化更好的內(nèi)容元素铣除，比如article谚咬、footer、header尚粘、nav择卦、section
  • 表單控件，calendar、date秉继、time祈噪、email、url尚辑、search
  • 新的技術(shù)webworker, websocket, Geolocation
• 移除的元素：
  • 純表現(xiàn)的元素：basefont辑鲤，big，center腌巾，font, s遂填，strike，tt澈蝙，u`
  • 對可用性產(chǎn)生負(fù)面影響的元素：frame吓坚，frameset，noframes
• 支持HTML5新標(biāo)簽：
  • IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽
  • 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽
  • 瀏覽器支持新標(biāo)簽后灯荧，還需要添加標(biāo)簽?zāi)J(rèn)的樣式
• 當(dāng)然也可以直接使用成熟的框架礁击、比如html5shim

10、HTML5的離線儲存怎么使用逗载，工作原理能不能解釋一下哆窿？

• 在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用厉斟，在用戶與因特網(wǎng)連接時挚躯，更新用戶機(jī)器上的緩存文件
• 原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源擦秽，這些資源就會像cookie一樣被存儲了下來码荔。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示
• 如何使用：
  • 頁面頭部像下面一樣加入一個manifest的屬性感挥；
  • 在cache.manifest文件的編寫離線存儲的資源
  • 在離線狀態(tài)時缩搅，操作window.applicationCache進(jìn)行需求實現(xiàn)

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

11、瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢

• 在線的情況下触幼，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性硼瓣，它會請求manifest文件，如果是第一次訪問app置谦，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲堂鲤。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面媒峡，然后瀏覽器會對比新的manifest文件與舊的manifest文件瘟栖，如果文件沒有發(fā)生改變，就不做任何操作丝蹭，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
• 離線的情況下奔穿，瀏覽器就直接使用離線存儲的資源镜沽。

12、請描述一下 cookies贱田，sessionStorage 和 localStorage 的區(qū)別缅茉？

• cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）
• cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞
• sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器男摧，僅在本地保存
• 存儲大惺叨铡：
  • cookie數(shù)據(jù)大小不能超過4k
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多耗拓，可以達(dá)到5M或更大
• 有期時間：
  • localStorage 存儲持久數(shù)據(jù)拇颅，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
  • sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除
  • cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

13乔询、iframe有那些缺點樟插？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
• iframe和主頁面共享連接池竿刁，而瀏覽器對相同域的連接有限制黄锤，所以會影響頁面的并行加載
• 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe食拜，最好是通過javascript動態(tài)給iframe添加src屬性值鸵熟，這樣可以繞開以上兩個問題

14、WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?

• 標(biāo)簽閉合负甸、標(biāo)簽小寫流强、不亂嵌套、使用外鏈css和js惑惶、結(jié)構(gòu)行為表現(xiàn)的分離

15煮盼、xhtml和html有什么區(qū)別?

• 一個是功能上的差別
  • 主要是XHTML可兼容各大瀏覽器、手機(jī)以及PDA带污，并且瀏覽器也能快速正確地編譯網(wǎng)頁
• 另外是書寫習(xí)慣的差別
  • XHTML 元素必須被正確地嵌套僵控，閉合，區(qū)分大小寫鱼冀，文檔必須擁有根元素

16报破、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

• 頁面被加載的時千绪，link會同時被加載充易，而@imort頁面被加載的時，link會同時被加載荸型，而@import引用的CSS會等到頁面被加載完再加載
  import只在IE5以上才能識別盹靴，而link是XHTML標(biāo)簽，無兼容問題
  link方式的樣式的權(quán)重 高于@import的權(quán)重
• <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前稿静。告知瀏覽器的解析器梭冠， 用什么文檔類型 規(guī)范來解析這個文檔
• 嚴(yán)格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行
• 在混雜模式中，頁面以寬松的向后兼容的方式顯示改备。模擬老式瀏覽器的行為以防止站點無法工作控漠。 DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)

17、行內(nèi)元素有哪些悬钳？塊級元素有哪些盐捷？ 空(void)元素有那些？行內(nèi)元素和塊級元素有什么區(qū)別默勾？

• 行內(nèi)元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內(nèi)元素不可以設(shè)置寬高碉渡，不獨占一行
• 塊級元素可以設(shè)置寬高，獨占一行

18灾测、HTML全局屬性(global attribute)有哪些

• class:為元素設(shè)置類標(biāo)識
• data-*: 為元素增加自定義屬性
• draggable: 設(shè)置元素是否可拖拽
• id: 元素id爆价，文檔內(nèi)唯一
• lang: 元素內(nèi)容的的語言
• style: 行內(nèi)css樣式
• title: 元素相關(guān)的建議信息

2.CSS部分

1、css sprite是什么,有什么優(yōu)缺點

• 概念：將多個小圖片拼接到一個圖片中媳搪。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案铭段。
• 優(yōu)點：
  • 減少HTTP請求數(shù)，極大地提高頁面加載速度
  • 增加圖片信息重復(fù)度秦爆，提高壓縮比序愚，減少圖片大小
  • 更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
• 缺點：
  • 圖片合并麻煩
  • 維護(hù)麻煩等限，修改一個圖片可能需要從新布局整個圖片爸吮，樣式

2、display: none;與visibility: hidden;的區(qū)別

• 聯(lián)系：它們都能讓元素不可見
• 區(qū)別：
  • display:none;會讓元素完全從渲染樹中消失望门，渲染的時候不占據(jù)任何空間形娇；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續(xù)占據(jù)空間筹误，只是內(nèi)容不可見
  • display: none;是非繼承屬性桐早，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示厨剪；visibility: hidden;是繼承屬性哄酝，子孫節(jié)點消失由于繼承了hidden，通過設(shè)置visibility: visible;可以讓子孫節(jié)點顯式
  • 修改常規(guī)流中元素的display通常會造成文檔重排祷膳。修改visibility屬性只會造成本元素的重繪陶衅。
  • 讀屏器不會讀取display: none;元素內(nèi)容；會讀取visibility: hidden;元素內(nèi)容

3直晨、link與@import的區(qū)別

1. link是HTML方式搀军， @import是CSS方式
2. link最大限度支持并行下載膨俐，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC
3. link可以通過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早于@import罩句，可以使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規(guī)則之前吟策，可以在css文件中引用其他文件
6. 總體來說：link優(yōu)于@import

4、什么是FOUC?如何避免

• Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認(rèn)樣式顯示文檔的止，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍着撩。
• 解決方法：把樣式表放到文檔的head

5诅福、如何創(chuàng)建塊級格式化上下文(block formatting context),BFC有什么用

• 創(chuàng)建規(guī)則：
  • 根元素
  • 浮動元素（float不是none）
  • 絕對定位元素（position取值為absolute或fixed）
  • display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素
• 作用：
  • 可以包含浮動元素
  • 不被浮動元素覆蓋
  • 阻止父子元素的margin折疊

6、display,float,position的關(guān)系

• 如果display為none拖叙，那么position和float都不起作用氓润，這種情況下元素不產(chǎn)生框
• 否則，如果position值為absolute或者fixed薯鳍，框就是絕對定位的咖气，float的計算值為none，display根據(jù)下面的表格進(jìn)行調(diào)整挖滤。
• 否則崩溪，如果float不是none，框是浮動的斩松，display根據(jù)下表進(jìn)行調(diào)整
• 否則伶唯，如果元素是根元素，display根據(jù)下表進(jìn)行調(diào)整
• 其他情況下display的值為指定值
• 總結(jié)起來：絕對定位惧盹、浮動乳幸、根元素都需要調(diào)整display

7、清除浮動的幾種方式钧椰，各自的優(yōu)缺點

• 使用空標(biāo)簽清除浮動clear:both（缺點粹断，增加無意義的標(biāo)簽）
• 使用overflow:auto（使用zoom:1用于兼容IE，缺點：內(nèi)部寬高超過父級div時嫡霞，會出現(xiàn)滾動條）
• 用afert偽元素清除浮動(IE8以上和非IE瀏覽器才支持瓶埋，目前：大型網(wǎng)站都有使用

8、為什么要初始化CSS樣式?

• 因為瀏覽器的兼容問題秒际，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的悬赏，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
• 當(dāng)然娄徊，初始化樣式會對SEO有一定的影響闽颇，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

9寄锐、css3有哪些新特性

• 新增各種css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉(zhuǎn)transform

CSS3新增偽類有那些兵多？

• p:first-of-type 選擇屬于其父元素的首個<p>元素的每個<p> 元素尖啡。
• p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個<p> 元素。
• p:only-of-type 選擇屬于其父元素唯一的 <p>元素的每個 <p> 元素剩膘。
• p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素衅斩。
• p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
• :after 在元素之前添加內(nèi)容,也可以用來做清除浮動怠褐。
• :before 在元素之后添加內(nèi)容
• :enabled
• :disabled 控制表單控件的禁用狀態(tài)畏梆。
• :checked 單選框或復(fù)選框被選中

10、display有哪些值奈懒？說明他們的作用

• block 象塊類型元素一樣顯示奠涌。
• none 缺省值。象行內(nèi)元素類型一樣顯示磷杏。
• inline-block 象行內(nèi)元素一樣顯示溜畅，但其內(nèi)容象塊類型元素一樣顯示。
• list-item 象塊類型元素一樣顯示极祸，并添加樣式列表標(biāo)記慈格。
• table 此元素會作為塊級表格來顯示
• inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值

11、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型遥金？低版本IE的盒子模型有什么不同的浴捆？

• 有兩種， IE盒子模型稿械、W3C盒子模型叠萍；
• 盒模型： 內(nèi)容(content)诈火、填充(padding)想罕、邊界(margin)屎蜓、 邊框(border)；
• 區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;

12茂嗓、CSS優(yōu)先級算法如何計算餐茵？

• 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)
• 載入樣式以最后載入的定位為準(zhǔn)
• 優(yōu)先級為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高

13述吸、對BFC規(guī)范的理解忿族？

• 它決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用

14、談?wù)劯雍颓宄?/h3>

• 浮動的框可以向左或向右移動蝌矛，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止道批。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣入撒。浮動的塊框會漂浮在文檔普通流的塊框上

15隆豹、position的值， relative和absolute定位原點是

• absolute：生成絕對定位的元素茅逮，相對于 static 定位以外的第一個父元素進(jìn)行定位
• fixed：生成絕對定位的元素璃赡，相對于瀏覽器窗口進(jìn)行定位
• relative：生成相對定位的元素判哥，相對于其正常位置進(jìn)行定位
• static 默認(rèn)值。沒有定位碉考，元素出現(xiàn)在正常的流中
• inherit 規(guī)定從父元素繼承 position 屬性的值

16塌计、display:inline-block 什么時候不會顯示間隙？(攜程)

• 移除空格
• 使用margin負(fù)值
• 使用font-size:0
• letter-spacing
• word-spacing

17侯谁、PNG,GIF,JPG的區(qū)別及如何選

• GIF

  • 8位像素锌仅，256色
  • 無損壓縮
  • 支持簡單動畫
  • 支持boolean透明
  • 適合簡單動畫

• JPEG

  • 顏色限于256
  • 有損壓縮
  • 可控制壓縮質(zhì)量
  • 不支持透明
  • 適合照片

• PNG
  

  • 有PNG8和truecolor PNG
  • PNG8類似GIF顏色上限為256，文件小墙贱，支持alpha透明度技扼，無動畫
  • 適合圖標(biāo)、背景嫩痰、按鈕

3.JavaScript

1、閉包

• 閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)窍箍，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)串纺，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域
• 閉包的特性：
  • 函數(shù)內(nèi)再嵌套函數(shù)
  • 內(nèi)部函數(shù)可以引用外層的參數(shù)和變量
  • 參數(shù)和變量不會被垃圾回收機(jī)制回收

說說你對閉包的理解

• 使用閉包主要是為了設(shè)計私有的方法和變量。閉包的優(yōu)點是可以避免全局變量的污染椰棘，缺點是閉包會常駐內(nèi)存纺棺，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露邪狞。在js中祷蝌，函數(shù)即閉包，只有函數(shù)才會產(chǎn)生作用域的概念

2帆卓、說說你對作用域鏈的理解

• 作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的巨朦，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止剑令，作用域鏈向下訪問變量是不被允許的
• 簡單的說糊啡，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期

3吁津、JavaScript原型棚蓄，原型鏈 ? 有什么特點？

• 每個對象都會在其內(nèi)部初始化一個屬性碍脏，就是prototype(原型)梭依，當(dāng)我們訪問一個對象的屬性時
• 如果這個對象內(nèi)部不存在這個屬性，那么他就會去prototype里找這個屬性典尾，這個prototype又會有自己的prototype役拴，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念
• 關(guān)系：instance.constructor.prototype = instance.__proto__
• 特點：
  • JavaScript對象是通過引用來傳遞的钾埂，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本扎狱。當(dāng)我們修改原型時侧到，與之相關(guān)的對象也會繼承這一改變
• 當(dāng)我們需要一個屬性的時，Javascript引擎會先看當(dāng)前對象中是否有這個屬性淤击， 如果沒有的
• 就會查找他的Prototype對象是否有這個屬性匠抗，如此遞推下去，一直檢索到 Object內(nèi)建對象

4污抬、請解釋什么是事件代理

• 事件代理（Event Delegation）汞贸，又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧印机。顧名思義矢腻，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)射赛。事件代理的原理是DOM元素的事件冒泡多柑。使用事件代理的好處是可以提高性能
• 可以大量節(jié)省內(nèi)存占用，減少事件注冊楣责，比如在table上代理所有td的click事件就非常棒
• 可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定

5竣灌、Javascript如何實現(xiàn)繼承？

• 構(gòu)造繼承
• 原型繼承
• 實例繼承
• 拷貝繼承
• 原型prototype機(jī)制或apply和call方法去實現(xiàn)較簡單秆麸，建議使用構(gòu)造函數(shù)與原型混合方式

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent初嘹，通過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被繼承的屬性
  }

6、談?wù)凾his對象的理解

• this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
• 如果有new關(guān)鍵字沮趣，this指向new出來的那個對象
• 在事件中屯烦，this指向觸發(fā)這個事件的對象，特殊的是房铭，IE中的attachEvent中的this總是指向全局對象Window

7驻龟、事件模型

• 冒泡型事件：當(dāng)你使用事件冒泡時，子級元素先觸發(fā)缸匪，父級元素后觸發(fā)
• 捕獲型事件：當(dāng)你使用事件捕獲時迅脐，父級元素先觸發(fā)，子級元素后觸發(fā)
• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
• 阻止冒泡：在W3c中豪嗽，使用stopPropagation（）方法谴蔑；在IE下設(shè)置cancelBubble = true
• 阻止捕獲：阻止事件的默認(rèn)行為，例如click - <a>后的跳轉(zhuǎn)龟梦。在W3c中隐锭，使用preventDefault（）方法，在IE下設(shè)置window.event.returnValue = false

8计贰、new操作符具體干了什么呢?

• 創(chuàng)建一個空對象钦睡，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型
• 屬性和方法被加入到 this 引用的對象中
• 新創(chuàng)建的對象由 this 所引用躁倒，并且最后隱式的返回 this

9荞怒、Ajax原理

• Ajax的原理簡單來說是在用戶和服務(wù)器之間加了—個中間層(AJAX引擎)洒琢，通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)褐桌，然后用javascript來操作DOM而更新頁面衰抑。使用戶操作與服務(wù)器響應(yīng)異步化。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)
• Ajax的過程只涉及JavaScript荧嵌、XMLHttpRequest和DOM呛踊。XMLHttpRequest是ajax的核心機(jī)制

 // 1. 創(chuàng)建連接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 連接服務(wù)器
    xhr.open('get', url, true)
    // 3. 發(fā)送請求
    xhr.send(null);
    // 4. 接受請求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

10、如何解決跨域問題?

• jsonp啦撮、 iframe谭网、window.name、window.postMessage赃春、服務(wù)器上設(shè)置代理頁面

11愉择、模塊化開發(fā)怎么做？

• 立即執(zhí)行函數(shù),不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

12织中、異步加載JS的方式有哪些锥涕？

• defer，只支持IE
• async：
• 創(chuàng)建script抠璃，插入到DOM中，加載完畢后callBack

13脱惰、那些操作會造成內(nèi)存泄漏搏嗡？

• 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
• setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏
• 閉包使用不當(dāng)

14拉一、XML和JSON的區(qū)別采盒？

• 數(shù)據(jù)體積方面
  • JSON相對于XML來講，數(shù)據(jù)的體積小蔚润，傳遞的速度更快些磅氨。
• 數(shù)據(jù)交互方面
  • JSON與JavaScript的交互更加方便，更容易解析處理嫡纠，更好的數(shù)據(jù)交互
• 數(shù)據(jù)描述方面
  • JSON對數(shù)據(jù)的描述性比XML較差
• 傳輸速度方面
  • JSON的速度要遠(yuǎn)遠(yuǎn)快于XML

15烦租、談?wù)勀銓ebpack的看法

• WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴除盏，并編繹輸出模塊們所需的靜態(tài)文件叉橱。它能夠很好地管理、打包Web開發(fā)中所用到的HTML者蠕、Javascript窃祝、CSS以及各種靜態(tài)文件（圖片、字體等）踱侣，讓開發(fā)過程更加高效粪小。對于不同類型的資源大磺，webpack有對應(yīng)的模塊加載器。webpack模塊打包器會分析模塊間的依賴關(guān)系探膊，最后 生成了優(yōu)化且合并后的靜態(tài)資源

16杠愧、說說你對AMD和Commonjs的理解

• CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范突想。CommonJS規(guī)范加載模塊是同步的殴蹄，也就是說，只有加載完成猾担，才能執(zhí)行后面的操作袭灯。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)
• AMD推薦的風(fēng)格通過返回一個對象做為模塊對象绑嘹，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的

17稽荧、常見web安全及防護(hù)原理

• sql注入原理
  • 就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令
• 總的來說有以下幾點
  • 永遠(yuǎn)不要信任用戶的輸入工腋，要對用戶的輸入進(jìn)行校驗姨丈，可以通過正則表達(dá)式，或限制長度擅腰，對單引號和雙"-"進(jìn)行轉(zhuǎn)換等
  • 永遠(yuǎn)不要使用動態(tài)拼裝SQL蟋恬，可以使用參數(shù)化的SQL或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取
  • 永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接
  • 不要把機(jī)密信息明文存放趁冈，請加密或者hash掉密碼和敏感的信息

XSS原理及防范

• Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標(biāo)簽或者javascript代碼歼争。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后渗勘，竊取cookie中的用戶私密信息沐绒；或者攻擊者在論壇中加一個惡意表單，當(dāng)用戶提交表單的時候旺坠，卻把信息傳送到攻擊者的服務(wù)器中乔遮，而不是用戶原本以為的信任站點

XSS防范方法

• 首先代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode取刃，避免不小心把html tag弄出來蹋肮。這一個層面做好，至少可以堵住超過一半的XSS 攻擊

XSS與CSRF有什么區(qū)別嗎璧疗？

• XSS是獲取信息括尸，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作病毡，需要知道其他用戶頁面的代碼和數(shù)據(jù)包濒翻。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟
• 登錄受信任網(wǎng)站A，并在本地生成Cookie
• 在不登出A的情況下有送，訪問危險網(wǎng)站B

CSRF的防御

• 服務(wù)端的CSRF方式方法很多樣淌喻，但總的思想都是一致的，就是在客戶端頁面增加偽隨機(jī)數(shù)
• 通過驗證碼的方法

18雀摘、用過哪些設(shè)計模式裸删？

• 工廠模式：
  • 工廠模式解決了重復(fù)實例化的問題，但還有一個問題,那就是識別問題阵赠，因為根本無法
  • 主要好處就是可以消除對象間的耦合涯塔，通過使用工程方法而不是new關(guān)鍵字
• 構(gòu)造函數(shù)模式
  • 使用構(gòu)造函數(shù)的方法，即解決了重復(fù)實例化的問題清蚀，又解決了對象識別的問題匕荸，該模式與工廠模式的不同之處在于
  • 直接將屬性和方法賦值給 this對象;

19、為什么要有同源限制枷邪？

• 同源策略指的是：協(xié)議榛搔，域名，端口相同东揣，同源策略是一種安全協(xié)議
• 舉例說明：比如一個黑客程序践惑，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名嘶卧，密碼登錄時尔觉，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名芥吟，密碼就輕松到手了侦铜。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別

• offsetWidth/offsetHeight返回值包含content + padding + border运沦，效果與e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding泵额，如果有滾動條配深，也不包含滾動條
• scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸

21携添、javascript有哪些方法定義對象

• 對象字面量： var obj = {};
• 構(gòu)造函數(shù)： var obj = new Object();
• Object.create(): var obj = Object.create(Object.prototype);

22、常見兼容性問題篓叶？

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景烈掠，解決方案是做成PNG8
• 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一,缸托，但是全局效率很低左敌，一般是如下這樣解決：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

• IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性
• Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

22、說說你對promise的了解

• 依照 Promise/A+ 的定義俐镐，Promise 有四種狀態(tài)：
  • pending: 初始狀態(tài), 非 fulfilled 或 rejected.
  • fulfilled: 成功的操作.
  • rejected: 失敗的操作.
  • settled: Promise已被fulfilled或rejected矫限，且不是pending
• 另外， fulfilled與 rejected一起合稱 settled
• Promise 對象用來進(jìn)行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構(gòu)造函數(shù)

• 構(gòu)造一個 Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

• Promise 實例擁有 then 方法（具有 then 方法的對象叼风，通常被稱為thenable）取董。它的使用方法如下：

  promise.then(onFulfilled, onRejected)
  

• 接收兩個函數(shù)作為參數(shù)，一個在 fulfilled 的時候被調(diào)用无宿，一個在rejected的時候被調(diào)用茵汰，接收參數(shù)就是 future，onFulfilled 對應(yīng)resolve, onRejected對應(yīng) reject

23孽鸡、你覺得jQuery源碼有哪些寫的好的地方

• jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中蹂午，有助于防止變量的全局污染，然后通過傳入window對象參數(shù)彬碱，可以使window對象作為局部變量使用豆胸，好處是當(dāng)jquery中訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了堡妒，從而可以更快的訪問window對象配乱。同樣，傳入undefined參數(shù)皮迟，可以縮短查找undefined時的作用域鏈
• jquery將一些原型屬性和方法封裝在了jquery.prototype中搬泥，為了縮短名稱，又賦值給了jquery.fn伏尼，這是很形象的寫法
• 有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到忿檩，jQuery將其保存為局部變量以提高訪問速度
• jquery實現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個對象爆阶，可以提高代碼效率

24燥透、vue、react、angular

• Vue.js
  一個用于創(chuàng)建 web 交互界面的庫，是一個精簡的 MVVM丐枉。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來余爆。實際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters
• AngularJS
  是一個比較完善的前端MVVM框架，包含模板瞬逊，數(shù)據(jù)雙向綁定，路由，模塊化理盆，服務(wù)，依賴注入等所有功能凑阶，模板功能強(qiáng)大豐富猿规，自帶了豐富的 Angular指令
• react
React 僅僅是 VIEW 層是facebook公司。推出的一個用于構(gòu)建UI的一個庫宙橱，能夠?qū)崿F(xiàn)服務(wù)器端的渲染姨俩。用了virtual dom蘸拔，所以性能很好。

25环葵、Node的應(yīng)用場景

• 特點：
  • 1都伪、它是一個Javascript運行環(huán)境
  • 2、依賴于Chrome V8引擎進(jìn)行代碼解釋
  • 3积担、事件驅(qū)動
  • 4陨晶、非阻塞I/O
  • 5、單進(jìn)程帝璧，單線程
• 優(yōu)點：
  • 高并發(fā)（最重要的優(yōu)點）
• 缺點：
  • 1先誉、只支持單核CPU，不能充分利用CPU
  • 2的烁、可靠性低褐耳，一旦代碼某個環(huán)節(jié)崩潰，整個系統(tǒng)都崩潰

26渴庆、談?wù)勀銓MD铃芦、CMD的理解

• CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個規(guī)范襟雷。CommonJS規(guī)范加載模塊是同步的刃滓，也就是說，只有加載完成耸弄，才能執(zhí)行后面的操作咧虎。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)
• AMD推薦的風(fēng)格通過返回一個對象做為模塊對象计呈，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的

27砰诵、那些操作會造成內(nèi)存泄漏？

• 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
• setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話捌显，會引發(fā)內(nèi)存泄漏
• 閉包茁彭、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時扶歪，就會產(chǎn)生一個循環(huán)）

28理肺、web開發(fā)中會話跟蹤的方法有哪些

• cookie
• session
• url重寫
• 隱藏input
• ip地址

29、介紹js的基本數(shù)據(jù)類型

• Undefined击罪、Null哲嘲、Boolean贪薪、Number媳禁、String

30、介紹js有哪些內(nèi)置對象画切？

• Object 是 JavaScript 中所有對象的父對象
• 數(shù)據(jù)封裝類對象：Object竣稽、Array、Boolean、Number 和 String
• 其他對象：Function毫别、Arguments娃弓、Math、Date岛宦、RegExp台丛、Error

31、說幾條寫JavaScript的基本規(guī)范砾肺？

• 不要在同一行聲明多個變量
• 請使用===/!==來比較true/false或者數(shù)值
• 使用對象字面量替代new Array這種形式
• 不要使用全局函數(shù)
• Switch語句必須帶有default分支
• If語句必須使用大括號
• for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域挽霉，從而避免作用域污

32、JavaScript有幾種類型的值变汪？侠坎，你能畫一下他們的內(nèi)存圖嗎？

• 棧：原始數(shù)據(jù)類型（Undefined裙盾，Null实胸，Boolean，Number番官、String）
• 堆：引用數(shù)據(jù)類型（對象庐完、數(shù)組和函數(shù)）
• 兩種類型的區(qū)別是：存儲位置不同；
• 原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段徘熔，占據(jù)空間小假褪、大小固定，屬于被頻繁使用數(shù)據(jù)近顷，所以放入棧中存儲生音；
• 引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定,如果存儲在棧中窒升，將會影響程序運行的性能缀遍；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址饱须。當(dāng)解釋器尋找引用值時域醇，會首先檢索其
• 在棧中的地址，取得地址后從堆中獲得實體

[圖片上傳失敗...(image-dd3875-1617124585794)]
**

33蓉媳、javascript創(chuàng)建對象的幾種方式譬挚？

javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象，當(dāng)然還可以用JSON酪呻；但寫法有很多種减宣，也能混合使用

• 對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

• 用function來模擬無參的構(gòu)造函數(shù)

 function Person(){}
    var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

• 用function來模擬參構(gòu)造函數(shù)來實現(xiàn)（用this關(guān)鍵字定義構(gòu)造的上下文屬性）

function Pet(name,age,hobby){
       this.name=name;//this作用域：當(dāng)前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化玩荠、創(chuàng)建對象
    maidou.eat();//調(diào)用eat方法

• 用工廠方式來創(chuàng)建（內(nèi)置對象）

var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

• 用原型方式來創(chuàng)建

function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

• 用混合方式來創(chuàng)建

 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"漆腌，我現(xiàn)在賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

34贼邓、eval是做什么的？

• 它的功能是把對應(yīng)的字符串解析成JS代碼并運行
• 應(yīng)該避免使用eval闷尿，不安全塑径，非常耗性能（2次，一次解析成js語句填具，一次執(zhí)行）
• 由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval统舀，var obj =eval('('+ str +')')

35、null劳景，undefined 的區(qū)別绑咱？

• undefined 表示不存在這個值。
• undefined :是一個表示"無"的原始值或者說表示"缺少值"枢泰，就是此處應(yīng)該有一個值描融，但是還沒有定義。當(dāng)嘗試讀取時會返回 undefined
• 例如變量被聲明了衡蚂，但沒有賦值時窿克，就等于undefined
• null 表示一個對象被定義了，值為“空值”
• null : 是一個對象(空對象, 沒有任何屬性和方法)
• 例如作為函數(shù)的參數(shù)毛甲，表示該函數(shù)的參數(shù)不是對象；
• 在驗證null時只损，一定要使用　=== 七咧，因為 ==無法分別null 和　undefined

36艾栋、["1", "2", "3"].map(parseInt) 答案是多少？

• [1, NaN, NaN]因為 parseInt 需要兩個參數(shù) (val, radix)蝗砾，其中radix 表示解析時用的基數(shù)先较。
• map傳了 3個(element, index, array)，對應(yīng)的 radix 不合法導(dǎo)致解析失敗悼粮。

37闲勺、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

• use strict是一種ECMAscript 5 添加的（嚴(yán)格）運行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理扣猫、不嚴(yán)謹(jǐn)之處菜循，減少一些怪異行為

38、JSON 的了解苞笨？**

• JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式
• 它是基于JavaScript的一個子集债朵。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小
• JSON字符串轉(zhuǎn)換為JSON對象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

• JSON對象轉(zhuǎn)換為JSON字符串：

var last=obj.toJSONString();
var last=JSON.stringify(obj);

39、js延遲加載的方式有哪些瀑凝？

• defer和async序芦、動態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

40粤咪、同步和異步的區(qū)別?

• 同步：瀏覽器訪問服務(wù)器請求谚中，用戶看得到頁面刷新，重新發(fā)請求,等請求完寥枝，頁面刷新宪塔，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作
• 異步：瀏覽器訪問服務(wù)器請求，用戶正常操作抄囚，瀏覽器后端進(jìn)行請求。等請求完，頁面不刷新攒驰，新內(nèi)容也會出現(xiàn)玻粪，用戶看到新內(nèi)容

41、漸進(jìn)增強(qiáng)和優(yōu)雅降級

• 漸進(jìn)增強(qiáng) ：針對低版本瀏覽器進(jìn)行構(gòu)建頁面很洋，保證最基本的功能谓苟，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗仑撞。
• 優(yōu)雅降級 ：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容

42沮翔、defer和async

• defer并行加載js文件，會按照頁面上script標(biāo)簽的順序執(zhí)行
• async并行加載js文件搏存，下載完成立即執(zhí)行读虏，不會按照頁面上script標(biāo)簽的順序執(zhí)行

43灾螃、說說嚴(yán)格模式的限制

• 變量必須聲明后再使用
• 函數(shù)的參數(shù)不能有同名屬性，否則報錯
• 不能使用with語句
• 禁止this指向全局對象

44熄赡、attribute和property的區(qū)別是什么？

• attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性词渤；
• property就是dom元素在js中作為對象擁有的屬性赏参。
• 對于html的標(biāo)準(zhǔn)屬性來說，attribute和property是同步的韧掩，是會自動更新的
• 但是對于自定義的屬性來說，他們是不同步的

45滑臊、談?wù)勀銓S6的理解

• 新增模板字符串（為JavaScript提供了簡單的字符串插值功能）
• 箭頭函數(shù)
• for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值。）
• arguments對象可被不定參數(shù)和默認(rèn)參數(shù)完美代替关划。
• ES6將promise對象納入規(guī)范，提供了原生的Promise對象。
• 增加了let和const命令，用來聲明變量扣孟。
• 增加了塊級作用域鸽斟。
• let命令實際上就增加了塊級作用域。
• 還有就是引入module模塊的概念

4.編程題

1、寫一個通用的事件偵聽器函數(shù)

 // event(事件)工具集，來源：github.com/markyun
    markyun.Event = {

        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型寝志、需要執(zhí)行的函數(shù)乐导、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默認(rèn)行為
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標(biāo)
        getTarget : function(event) {
            return event.target || event.srcElement;
        }

2、如何判斷一個對象是否為數(shù)組

function isArray(arg) {
    if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
    }
    return false;
}

3、冒泡排序

• 每次比較相鄰的兩個數(shù)规丽，如果后一個比前一個小赌莺，換位置

var arr = [3, 1, 4, 6, 5, 7, 2];

function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
    for(var j = 0; j < arr.length - 1; j++) {
        if(arr[j + 1] < arr[j]) {
            var temp;
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
return arr;
}

console.log(bubbleSort(arr));

4、快速排序

• 采用二分法，取出中間數(shù)，數(shù)組每次和中間數(shù)比較掠哥，小的放到左邊目代，大的放到右邊

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空數(shù)組
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

console.log(quickSort(arr));

5屈梁、編寫一個方法 求一個字符串的字節(jié)長度

• 假設(shè)：一個英文字符占用一個字節(jié)嗤练，一個中文字符占用兩個字節(jié)

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

5.其他

1、談?wù)勀銓χ貥?gòu)的理解

• 網(wǎng)站重構(gòu)：在不改變外部行為的前提下在讶，簡化結(jié)構(gòu)煞抬、添加可讀性，而在網(wǎng)站前端保持一致的行為残拐。也就是說是在不改變UI的情況下雀瓢，對網(wǎng)站進(jìn)行優(yōu)化智政， 在擴(kuò)展的同時保持一致的UI
• 對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：
  • 表格(table)布局改為DIV+CSS
  • 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS页慷、如對IE6有效的)
  • 對于移動平臺的優(yōu)化
  • 針對于SEO進(jìn)行優(yōu)化

2、什么樣的前端代碼是好的

• 高復(fù)用低耦合亥至，這樣文件小睡榆，好維護(hù)，而且好擴(kuò)展疑务。

3虫溜、對前端工程師這個職位是怎么樣理解的镰惦？它的前景會怎么樣扮匠？

• 前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理晴竞、運營昂验、安全都近
  • 實現(xiàn)界面交互
  • 提升用戶體驗
  • 有了Node.js屠列，前端可以實現(xiàn)服務(wù)端的一些事情
• 前端是最貼近用戶的程序員扭吁，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好盲镶，

• 與團(tuán)隊成員侥袜，UI設(shè)計，產(chǎn)品經(jīng)理的溝通溉贿；
• 做好的頁面結(jié)構(gòu)枫吧，頁面重構(gòu)和用戶體驗；

4宇色、你覺得前端工程的價值體現(xiàn)在哪

• 為簡化用戶使用提供技術(shù)支持（交互部分）
• 為多個瀏覽器兼容性提供支持
• 為提高用戶瀏覽速度（瀏覽器性能）提供支持
• 為跨平臺或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
• 為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

5九杂、平時如何管理你的項目颁湖？

• 先期團(tuán)隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等例隆；
• 編寫習(xí)慣必須一致（例如都是采用繼承式的寫法甥捺，單樣式都寫成一行）；
• 標(biāo)注樣式編寫人镀层，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）镰禾；
• 頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）；
• CSS跟HTML 分文件夾并行存放唱逢，命名都得統(tǒng)一（例如style.css）吴侦；
• JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。
• 圖片采用整合的 images.png png8 格式文件使用 - 盡量整合在一起使用方便將來的管理

6坞古、7答案（省略）