前端問題整理_ZenDei技術網路在線

先放一枚花生日記邀請碼 : SDHS420 有做推廣聯盟賺錢的朋友可以瞭解下花生日記 $HTML， HTTP，web綜合問題 1、前端需要註意哪些SEO 合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而 ...

先放一枚花生日記邀請碼 : SDHS420

有做推廣聯盟賺錢的朋友可以瞭解下花生日記

$HTML， HTTP，web綜合問題

1、前端需要註意哪些SEO

合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提高網站速度：網站速度是搜索引擎排序的一個重要指標

2、img的title和alt有什麼區別

通常當滑鼠滑動到元素上的時候顯示
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片無法載入時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

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

1、GET方法
- 發送一個請求來取得伺服器上的某一資源
2、POST方法
- 向URL指定的資源提交數據或附加新的數據
3、PUT方法
- 跟POST方法很像，也是想伺服器提交數據。但是，它們之間有不同。PUT指定了資源在伺服器上的位置，而POST沒有
4、HEAD方法
- 只請求頁面的首部
5、DELETE方法
- 刪除伺服器上的某資源
6、OPTIONS方法
- 它用於獲取當前URL所支持的方法。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的信息
7、TRACE方法
- TRACE方法被用於激發一個遠程的，應用層的請求消息迴路
8、CONNECT方法
- 把請求連接轉換到透明的TCP/IP通道

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

瀏覽器根據請求的URL交給DNS功能變數名稱解析，找到真實IP，向伺服器發起請求；
伺服器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。

5、如何進行網站性能優化

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

6、HTTP狀態碼及其含義

1XX：信息狀態碼
- 100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息
2XX：成功狀態碼
- 200 OK 正常返回信息
- 201 Created 請求成功並且伺服器創建了新的資源
- 202 Accepted 伺服器已接受請求，但尚未處理
3XX：重定向
- 301 Moved Permanently 請求的網頁已永久移動到新位置。
- 302 Found 臨時性重定向。
- 303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
- 304 Not Modified 自從上次請求後，請求的網頁未修改過。
4XX：客戶端錯誤
- 400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
- 401 Unauthorized 請求未授權。
- 403 Forbidden 禁止訪問。
- 404 Not Found 找不到如何與 URI 相匹配的資源。
5XX: 伺服器錯誤
- 500 Internal Server Error 最常見的伺服器端錯誤。
- 503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

7、語義化的理解

用正確的標簽做正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

8、介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核
JS引擎則：解析和執行javascript來實現網頁的動態效果
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎

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

HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加
- 繪畫 canvas
- 用於媒介回放的 video 和 audio 元素
- 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
- sessionStorage 的數據在瀏覽器關閉後自動刪除
- 語意化更好的內容元素，比如article、footer、header、nav、section
- 表單控制項，calendar、date、time、email、url、search
- 新的技術webworker, websocket, Geolocation
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u`
- 對可用性產生負面影響的元素：frame，frameset，noframes
支持HTML5新標簽：
- IE8/IE7/IE6支持通過document.createElement方法產生的標簽
- 可以利用這一特性讓這些瀏覽器支持HTML5新標簽
- 瀏覽器支持新標簽後，還需要添加標簽預設的樣式
當然也可以直接使用成熟的框架、比如html5shim

10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

在用戶沒有與網際網路連接時，可以正常訪問站點或應用，在用戶與網際網路連接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示
如何使用：
- 頁面頭部像下麵一樣加入一個manifest的屬性；
- 在cache.manifest文件的編寫離線存儲的資源
- 在離線狀態時，操作window.applicationCache進行需求實現

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

11、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢

線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源併進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

12、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞
sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存
存儲大小：
- cookie數據大小不能超過4k
- sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
有期時間：
- localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
- sessionStorage 數據在當前瀏覽器視窗關閉後自動刪除
- cookie 設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

13、iframe有那些缺點？

iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程式無法解讀這種頁面，不利於SEO
iframe和主頁面共用連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題

14、WEB標準以及W3C標準是什麼?

標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結構行為表現的分離

15、xhtml和html有什麼區別?

一個是功能上的差別
- 主要是XHTML可相容各大瀏覽器、手機以及PDA，並且瀏覽器也能快速正確地編譯網頁
另外是書寫習慣的差別
- XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

16、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

頁面被載入的時，link會同時被載入，而@imort頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入
import只在IE5以上才能識別，而link是XHTML標簽，無相容問題
link方式的樣式的權重高於@import的權重
<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標簽之前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔
嚴格模式的排版和 JS 運作模式是以該瀏覽器支持的最高標準運行
在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現

17、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

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

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

class:為元素設置類標識
data-*: 為元素增加自定義屬性
draggable: 設置元素是否可拖拽
id: 元素id，文檔內唯一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議信息

19、Canvas和SVG有什麼區別？

svg繪製出來的每一個圖形的元素都是獨立的DOM節點，能夠方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
svg輸出的圖形是矢量圖形，後期可以修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片一樣，放大會失真或者鋸齒

20、HTML5 為什麼只需要寫？

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

21、如何在頁面上實現一個圓形的可點擊區域？

svg
border-radius
純js實現需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等

22、網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題

區分用戶是電腦還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水
有效防止黑客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試

$CSS部分

1、css sprite是什麼,有什麼優缺點

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。
優點：
- 減少HTTP請求數，極大地提高頁面載入速度
- 增加圖片信息重覆度，提高壓縮比，減少圖片大小
- 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現
缺點：
- 圖片合併麻煩
- 維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

2、display: none;與visibility: hidden;的區別

聯繫：它們都能讓元素不可見
區別：
- display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
- display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式
- 修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。
- 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

3、link與@import的區別

link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套導致串列下載，出現FOUC
link可以通過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，可以使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則之前，可以在css文件中引用其他文件
總體來說：link優於@import

4、什麼是FOUC?如何避免

Flash Of Unstyled Content：用戶定義樣式表載入之前瀏覽器使用預設樣式顯示文檔，用戶樣式載入渲染之後再從新顯示文檔，造成頁面閃爍。
解決方法：把樣式表放到文檔的head

5、如何創建塊級格式化上下文(block formatting context),BFC有什麼用

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

6、display,float,position的關係

如果display為none，那麼position和float都不起作用，這種情況下元素不產生框
否則，如果position值為absolute或者fixed，框就是絕對定位的，float的計算值為none，display根據下麵的表格進行調整。
否則，如果float不是none，框是浮動的，display根據下表進行調整
否則，如果元素是根元素，display根據下表進行調整
其他情況下display的值為指定值
總結起來：絕對定位、浮動、根元素都需要調整display

7、清除浮動的幾種方式，各自的優缺點

父級div定義height
結尾處加空div標簽clear:both
父級div定義偽類:after和zoom
父級div定義overflow:hidden
父級div也浮動，需要定義寬度
結尾處加br標簽clear:both
比較好的是第3種方式，好多網站都這麼用

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

因為瀏覽器的相容問題，不同瀏覽器對有些標簽的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

9、css3有哪些新特性

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

CSS3新增偽類有那些？

p:first-of-type 選擇屬於其父元素的首個元素的每個 元素。
p:last-of-type 選擇屬於其父元素的最後  元素的每個 元素。
p:only-of-type 選擇屬於其父元素唯一的 元素的每個  元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個  元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個  元素。
:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之後添加內容
:enabled
:disabled 控製表單控制項的禁用狀態。
:checked 單選框或覆選框被選中

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

block 象塊類型元素一樣顯示。
none 預設值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值

11、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

有兩種， IE盒子模型、W3C盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE的content部分把 border 和 padding計算了進去;

12、CSS優先順序演算法如何計算？

優先順序就近原則，同權重情況下樣式定義最近者為準
載入樣式以最後載入的定位為準
優先順序為: !important > id > class > tag important 比內聯優先順序高

13、對BFC規範的理解？

它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用

14、談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上

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

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
static 預設值。沒有定位，元素出現在正常的流中
inherit 規定從父元素繼承 position 屬性的值

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

移除空格
使用margin負值
使用font-size:0
letter-spacing
word-spacing

17、PNG,GIF,JPG的區別及如何選

GIF
- 8位像素，256色
- 無損壓縮
- 支持簡單動畫
- 支持boolean透明
- 適合簡單動畫
JPEG
- 顏色限於256
- 有損壓縮
- 可控制壓縮質量
- 不支持透明
- 適合照片
PNG
- 有PNG8和truecolor PNG
- PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫
- 適合圖標、背景、按鈕

18、行內元素float:left後是否變為塊級元素？

浮動後，行內元素不會成為塊狀元素，但是可以設置寬高。行內元素要想變成塊狀元素，占一行，直接設置display:block;。但如果元素設置了浮動後再設置display:block;那就不會占一行。

19、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

偶數字型大小相對更容易和 web 設計的其他部分構成比例關係

20、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素
用於區分偽類和偽元素

21、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿裡）

多數顯示器預設頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

22、CSS合併方法

避免使用@import引入多個css文件，可以使用CSS工具將CSS合併為一個CSS文件，例如使用Sass\Compass等

23、CSS不同選擇器的權重(CSS層疊的規則)

！important規則最重要，大於其它規則
行內樣式規則，加1000
對於選擇器中給定的各個ID屬性值，加100
對於選擇器中給定的各個類屬性、屬性選擇器或者偽類選擇器，加10
對於選擇其中給定的各個元素標簽選擇器，加1
如果權值一樣，則按照樣式規則的先後順序來應用，順序靠後的覆蓋靠前的規則

24、列出你所知道可以改變頁面佈局的屬性

position、display、float、width、height、margin、padding、top、left、right、`

25、CSS在性能優化方面的實踐

css壓縮與合併、Gzip壓縮
css文件放在head里、不要用@import
儘量用縮寫、避免用濾鏡、合理使用選擇器

26、CSS3動畫（簡單動畫的實現，如旋轉等）

依靠CSS3中提出的三個屬性：transition、transform、animation
transition：定義了元素在變化過程中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定義元素的變化結果，包含rotate、scale、skew、translate。
animation：動畫定義了動作的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

27、base64的原理及優缺點

優點可以加密，減少了http請求
缺點是需要消耗CPU進行編解碼

28、幾種常見的CSS佈局

流體佈局

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

聖杯佈局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

雙飛翼佈局

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

29、stylus/sass/less區別

均具有“變數”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性
Scss和LESS語法較為嚴謹，LESS要求一定要使用大括弧“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關係
Scss無全局變數的概念，LESS和Stylus有類似於其它語言的作用域概念
Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫後進行編譯；

30、postcss的作用

可以直觀的理解為：它就是一個平臺。為什麼說它是一個平臺呢？因為我們直接用它，感覺不能幹什麼事情，但是如果讓一些插件在它上面跑，那麼將會很強大
PostCSS 提供了一個解析器，它能夠將 CSS 解析成抽象語法樹
通過在 PostCSS 這個平臺上，我們能夠開發一些插件，來處理我們的CSS，比如熱門的：autoprefixer
postcss可以對sass處理過後的css再處理最常見的就是autoprefixer

$JavaScript

1、閉包

閉包就是能夠讀取其他函數內部變數的函數
閉包是指有權訪問另一個函數作用域中變數的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變數,利用閉包可以突破作用鏈域
閉包的特性：
- 函數內再嵌套函數
- 內部函數可以引用外層的參數和變數
- 參數和變數不會被垃圾回收機制回收

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全局變數的污染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體泄露。在js中，函數即閉包，只有函數才會產生作用域的概念
閉包的最大用處有兩個，一個是可以讀取函數內部的變數，另一個就是讓這些變數始終保持在記憶體中
閉包的另一個用處，是封裝對象的私有屬性和私有方法
好處：能夠實現封裝和緩存等；
壞處：就是消耗記憶體、不正當使用會造成記憶體溢出的問題

使用閉包的註意點

由於閉包會使得函數中的變數都被保存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致記憶體泄露
解決方法是，在退出函數之前，將不使用的局部變數全部刪除

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

作用域鏈的作用是保證執行環境里有權訪問的變數和函數是有序的，作用域鏈的變數只能向上訪問，變數訪問到window對象即被終止，作用域鏈向下訪問變數是不被允許的
簡單的說，作用域就是變數與函數的可訪問範圍，即作用域控制著變數與函數的可見性和生命周期

3、JavaScript原型，原型鏈 ? 有什麼特點？

每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時
如果這個對象內部不存在這個屬性，那麼他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念
關係：instance.constructor.prototype = instance.__proto__
特點：
- JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變
當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，如果沒有的
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

4、請解釋什麼是事件代理

事件代理（Event Delegation），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能
可以大量節省記憶體占用，減少事件註冊，比如在table上代理所有td的click事件就非常棒
可以實現當新增子對象時無需再次對其綁定

5、Javascript如何實現繼承？

構造繼承
原型繼承
實例繼承
拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

 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、談談This對象的理解

this總是指向函數的直接調用者（而非間接調用者）
如果有new關鍵字，this指向new出來的那個對象
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window

7、事件模型

W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true
阻止捕獲：阻止事件的預設行為，例如click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

8、new操作符具體幹了什麼呢?

創建一個空對象，並且 this 變數引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新創建的對象由 this 所引用，並且最後隱式的返回 this

9、Ajax原理

Ajax的原理簡單來說是在用戶和伺服器之間加了—個中間層(AJAX引擎)，通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得數據，然後用javascript來操作DOM而更新頁面。使用戶操作與伺服器響應非同步化。這其中最關鍵的一步就是從伺服器獲得請求數據
Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

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

ajax 有那些優缺點?

優點：
- 通過非同步模式，提升了用戶體驗.
- 優化了瀏覽器和伺服器之間的傳輸，減少不必要的數據往返，減少了帶寬占用.
- Ajax在客戶端運行，承擔了一部分本來由伺服器承擔的工作，減少了大用戶量下的伺服器負載。
- Ajax可以實現動態不刷新（局部刷新）
缺點：
- 安全問題 AJAX暴露了與伺服器交互的細節。
- 對搜索引擎的支持比較弱。
- 不容易調試。

10、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、伺服器上設置代理頁面

11、模塊化開發怎麼做？

立即執行函數,不暴露私有成員

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

12、非同步載入JS的方式有哪些？

defer，只支持IE
async：
創建script，插入到DOM中，載入完畢後callBack

13、那些操作會造成記憶體泄漏？

記憶體泄漏指任何對象在您不再擁有或需要它之後仍然存在
setTimeout 的第一個參數使用字元串而非函數的話，會引發記憶體泄漏
閉包使用不當

14、XML和JSON的區別？

數據體積方面
- JSON相對於XML來講，數據的體積小，傳遞的速度更快些。
數據交互方面
- JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
數據描述方面
- JSON對數據的描述性比XML較差
傳輸速度方面
- JSON的速度要遠遠快於XML

15、談談你對webpack的看法

WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它能夠很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊載入器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源

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

CommonJS是伺服器端模塊的規範，Node.js採用了這個規範。CommonJS規範載入模塊是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模塊，允許指定回調函數
AMD推薦的風格通過返回一個對象做為模塊對象，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

17、常見web安全及防護原理

sql註入原理
- 就是通過把SQL命令插入到Web表單遞交或輸入功能變數名稱或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL命令
總的來說有以下幾點
- 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，可以通過正則表達式，或限制長度，對單引號和雙"-"進行轉換等
- 永遠不要使用動態拼裝SQL，可以使用參數化的SQL或者直接使用存儲過程進行數據查詢存取
- 永遠不要使用管理員許可權的資料庫連接，為每個應用使用單獨的許可權有限的資料庫連接
- 不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標簽或者javascript代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的伺服器中，而不是用戶原本以為的信任站點

XSS防範方法

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

XSS與CSRF有什麼區別嗎？

XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

前端問題整理

先放一枚花生日記 邀請碼 : SDHS420

$HTML， HTTP，web綜合問題

1、前端需要註意哪些SEO

2、img的title和alt有什麼區別

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

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

5、如何進行網站性能優化

6、HTTP狀態碼及其含義

7、語義化的理解

8、介紹一下你對瀏覽器內核的理解？

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

10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

11、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢

12、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

13、iframe有那些缺點？

14、WEB標準以及W3C標準是什麼?

15、xhtml和html有什麼區別?

16、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

17、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？

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

19、Canvas和SVG有什麼區別？

20、HTML5 為什麼只需要寫 ？

21、如何在頁面上實現一個圓形的可點擊區域？

22、網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題

$CSS部分

1、css sprite是什麼,有什麼優缺點

2、display: none;與visibility: hidden;的區別

3、link與@import的區別

4、什麼是FOUC?如何避免

5、如何創建塊級格式化上下文(block formatting context),BFC有什麼用

6、display,float,position的關係

7、清除浮動的幾種方式，各自的優缺點

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

9、css3有哪些新特性

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

11、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

12、CSS優先順序演算法如何計算？

13、對BFC規範的理解？

14、談談浮動和清除浮動

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

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

17、PNG,GIF,JPG的區別及如何選

18、行內元素float:left後是否變為塊級元素？

19、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

20、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用

21、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿裡）

22、CSS合併方法

23、CSS不同選擇器的權重(CSS層疊的規則)

24、列出你所知道可以改變頁面佈局的屬性

25、CSS在性能優化方面的實踐

26、CSS3動畫（簡單動畫的實現，如旋轉等）

27、base64的原理及優缺點

28、幾種常見的CSS佈局

流體佈局

聖杯佈局

雙飛翼佈局

29、stylus/sass/less區別

30、postcss的作用

$JavaScript

1、閉包

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

3、JavaScript原型，原型鏈 ? 有什麼特點？

4、請解釋什麼是事件代理

5、Javascript如何實現繼承？

6、談談This對象的理解

7、事件模型

8、new操作符具體幹了什麼呢?

9、Ajax原理

10、如何解決跨域問題?

11、模塊化開發怎麼做？

12、非同步載入JS的方式有哪些？

13、那些操作會造成記憶體泄漏？

14、XML和JSON的區別？

15、談談你對webpack的看法

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

17、常見web安全及防護原理

先放一枚花生日記邀請碼 : SDHS420

17、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

20、HTML5 為什麼只需要寫？

20、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用