前端開發知識點

• HTML&CSS

  • 對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、HTML五、CSS三、Flexbox

• JavaScript：

  • 數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript

• 其餘：

  • 移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協做、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

• DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

• DOM操做 —— 如何添加、移除、移動、複製、建立和查找節點等。

• 事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

• XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

• 嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

• 盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

• 塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

• 浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

• HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。

• JSON —— 做用、用途、設計結構

HTML

---

Doctype做用？標準模式與兼容模式各有什麼區別?

• 聲明位於位於HTML文檔中的第一行，處於 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現
• 標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做

HTML5 爲何只須要寫 ？

• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）
• 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

• 首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素

• 行內元素有：a b span img input select strong（強調的語氣）

• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

• 常見的空元素：

  ---

   

頁面導入樣式時，使用link和@import有什麼區別？

• link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
• 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
• import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

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

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

常見的瀏覽器內核有哪些？

• Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
• Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
• Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和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

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn
	/trunk/html5.js"</script>
 <![endif]-->

• 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

簡述一下你對HTML語義化的理解？

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

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

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

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

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

• cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

• cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

• sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

• 存儲大小：

  • cookie數據大小不能超過4k。
  • sessionStorage和localStorage
  • 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

• 有期時間：

  • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
  • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
  • cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

iframe有那些缺點？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
• 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
• 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

Label的做用是什麼？是怎麼用的？

• label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上

<label for="Name">Number:</label>
<input type=「text「name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

HTML5的form如何關閉自動完成功能？

• 給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

• WebSocket、SharedWorker
• 也能夠調用localstorge、cookies等本地存儲方式
• localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件,咱們經過監聽事件，控制它的值來進行頁面信息通訊；
• 注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

webSocket如何兼容低瀏覽器？(阿里)

• Adobe Flash Socket 、
• ActiveX HTMLFile (IE) 、
• 基於 multipart 編碼發送 XHR 、
• 基於長輪詢的 XHR

頁面可見性（Page Visibility API） 能夠有哪些用途？

• 經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
• 在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放

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

• map+area或者svg
• border-radius
• 純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果

• <div style="height:1px;overflow:hidden;background:red"></div>

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題

• 區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水
• 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試

title與h1的區別、b與strong的區別、i與em的區別？

• title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響

• strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展現強調內容

• i內容展現爲斜體，em表示強調的文本；

• Physical Style Elements -- 天然樣式標籤 b, i, u, s, pre

• Semantic Style Elements -- 語義樣式標籤 strong, em, ins, del, code

CSS

---

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

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

CSS選擇符有哪些？哪些屬性能夠繼承？

• id選擇器（ # myid）

• 類選擇器（.myclassname）

• 標籤選擇器（div, h1, p）

• 相鄰選擇器（h1 + p）

• 子選擇器（ul > li）

• 後代選擇器（li a）

• 通配符選擇器（ * ）

• 屬性選擇器（a[rel = "external"]）

• 僞類選擇器（a:hover, li:nth-child）

• 可繼承的樣式： font-size font-family color, UL LI DL DD DT

• 不可繼承的樣式：border padding margin width height

CSS優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準

• 載入樣式以最後載入的定位爲準

• 優先級爲:

  • 同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
  • !important > id > class > tag
  • important 比 內聯優先級高

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 單選框或複選框被選中

如何居中div？

• 水平居中：給div設置一個寬度，而後添加margin:0 auto屬性

div{
	width:200px;
	margin:0 auto;
 }

• 讓絕對定位的div居中

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

• 水平垂直居中一
  • 肯定容器的寬高 寬500 高 300 的層
  • 設置層的外邊距

div {
	position: relative;		/* 相對定位或絕對定位都可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;     	/* 外邊距爲自身寬高的一半 */
	background-color: pink;	 	/* 方便看效果 */

 }

• 水平垂直居中二
  • 未知容器的寬高，利用 transform 屬性

div {
	position: absolute;		/* 相對定位或絕對定位都可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink;	 	/* 方便看效果 */

}

• 水平垂直居中三

  • 利用 flex 佈局
  • 實際使用時應考慮兼容性

.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px;
	height: 100px;
	background-color: pink;		/* 方便看效果 */
}

display有哪些值？說明他們的做用。

• block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
• none 缺省值。象行內元素類型同樣顯示。
• inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示
• inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。
• list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
• table 此元素會做爲塊級表格來顯示。
• inherit 規定應該從父元素繼承 display 屬性的值

position的值relative和absolute定位原點是？

• absolute
  • 生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
• fixed （老IE不支持）
  • 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
• relative
  • 生成相對定位的元素，相對於其正常位置進行定位。
• static
  • 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
• inherit
  • 規定從父元素繼承 position 屬性的值

CSS3有哪些新特性？

• 新增各類CSS選擇器 （: not(.input)：全部 class 不是「input」的節點）
• 圓角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 陰影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow、）
• 文字渲染 （Text-decoration）
• 線性漸變 （gradient）
• 旋轉 （transform）
• 縮放,定位,傾斜,動畫,多背景
• 例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

• 一個用於頁面佈局的全新CSS3功能，Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間
• 較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現
• 採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。
• 它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"
• 常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應
• 在佈局上有了比之前更加靈活的空間

用純CSS建立一個三角形的原理是什麼？

• 把上、左、右三條邊隱藏掉（顏色設爲 transparent）

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一個滿屏 品 字佈局 如何設計?

• 簡單的方式：
  • 上面的div寬100%，
  • 下面的兩個div分別寬50%，
  • 而後用float或者inline使其不換行便可

css多列等高如何實現？

• 利用padding-bottom|margin-bottom正負值相抵；
• 設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度
• 當它裏面的任 一列高度增長了，則父容器的高度被撐到裏面最高那列的高度
• 其餘比這列矮的列會用它們的padding-bottom補償這部分高度差

常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧

• png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8
• 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一
• IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大
• 浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
• 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
• 漸進識別的方式，從整體中逐漸排除局部
• 首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
• 接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別

.bb{
      background-color:red;/*全部識別*/
      background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/
  }

• IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,也能夠使用getAttribute()獲取自定義屬性;

• Firefox下,只能使用getAttribute()獲取自定義屬性

• 解決方法:統一經過getAttribute()獲取自定義屬性。

• IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性

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

• 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

• Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

• 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

• 超連接訪問事後hover樣式就不出現了。被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

• L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

• 行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了

爲何要初始化CSS樣式

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別
• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化
• 最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

• 不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：

• 一、若此元素爲 inline 元素，則 containing block爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；

• 二、不然,則由這個祖先元素的 padding box 構成。若是都找不到，則爲 initial containing block。

• 補充：

  • 1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
  • 2. absolute: 向上找最近的定位爲absolute/relative的元素
  • 3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

• 對於普通元素visibility:collapse;會將元素徹底隱藏,不佔據頁面佈局空間,與display:none;表現相同.
• 若是目標元素爲table,visibility:collapse;將table隱藏,可是會佔據頁面佈局空間.
• 僅在Firefox下起做用,IE會顯示元素,Chrome會將元素隱藏,可是佔據空間.

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

• 若是元素的display爲none,那麼元素不被渲染,position,float不起做用,
• 若是元素擁有position:absolute;或者position:fixed;屬性那麼元素將爲絕對定位,float不起做用.
• 若是元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其餘元素margin摺疊

對BFC規範(塊級格式化上下文：block formatting context)的理解？

• 一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響

css定義的權重

• 如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}

• 若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

請解釋一下爲何須要清除浮動？清除浮動的方式

• 清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示
• 父級div定義height
• 父級div 也一塊兒浮動；
• 常規的使用一個class；

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

• SASS編譯的時候，浮動元素的父級div定義僞類:after

&:after,&:before{
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

• 解析原理：

  • display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間
  • height:0 避免生成內容破壞原有佈局的高度。
  • visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互
  • 經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:".",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙
  • zoom：1 觸發IE hasLayout

• 經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0

什麼是外邊距合併？

• 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距
• 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

zoom:1的清除浮動原理?

• 清除浮動，觸發hasLayout；
• Zoom屬性是IE瀏覽器的專有屬性，它能夠設置或檢索對象的縮放比例。解決ie下比較奇葩的bug
• 譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等

移動端的佈局用過媒體查詢嗎？

• 假設你如今正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，而顯示設備、屏幕投影和打印等這些媒介都有本身的特色，CSS就是爲文檔提供在不一樣媒介上展現的適配方法

• • 當媒體查詢爲真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。
  • 當媒體查詢返回假， 標籤上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）
• • 包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式
  • CSS3加入的媒體查詢使得無需修改內容即可以使樣式應用於某些特定的設備範圍

<style>
@media (min-width: 700px) and (orientation: landscape){
  .sidebar {
    display: none;
  }
}
</style>

使用 CSS 預處理器嗎？喜歡那個？

• SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)

CSS優化、提升性能的方法有哪些？

• 關鍵選擇器（key selector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）；
• 若是規則擁有 ID 選擇器做爲其關鍵選擇器，則不要爲規則增長標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
• 提取項目的通用公有樣式，加強可複用性，按模塊編寫組件；加強項目的協同開發性、可維護性和可擴展性;
• 使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）

瀏覽器是怎樣解析CSS選擇器的？

• 樣式系統從關鍵選擇器開始匹配，而後左移查找規則選擇器的祖先元素
• 只要選擇器的子樹一直在工做，樣式系統就會持續左移，直到和規則匹配，或者是由於不匹配而放棄該規則

margin和padding分別適合什麼場景使用？

• margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
• margin用於佈局分開元素使元素與元素互不相干；
• padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段

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

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
• 雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器須要同時支持舊的已經存在的僞元素寫法
• 好比:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的僞元素則不容許再支持舊的單冒號的寫法。
• 想讓插入的內容出如今其它內容前，使用::before，否者，使用::after；在代碼順序上，::after生成的內容也比::before生成的內容靠後。
• 若是按堆棧視角，::after生成的內容會在::before生成的內容之上

如何修改chrome記住密碼後自動填充表單的黃色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}

設置元素浮動後，該元素的display值是多少？

• 自動變成了 display:block

怎麼讓Chrome支持小於12px 的文字？

• 用圖片：若是是內容固定不變狀況下，使用將小於12px文字內容切出作圖片，這樣不影響兼容也不影響美觀
• 使用12px及12px以上字體大小：爲了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，若是是接單的這個時候就須要給客戶講解小於12px瀏覽器不兼容等事宜
• 繼續使用小於12px字體大小樣式設置：若是不考慮chrome能夠不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，作到最大兼容考慮
• 使用12px以上字體：爲了兼容、爲了代碼更簡單 重新考慮權重下兼容性。

讓頁面裏的字體變清晰，變細用CSS怎麼作？

• -webkit-font-smoothing: antialiased;

font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？

• 傾斜的字體樣式

position:fixed;在android下無效怎麼處理？

• fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，原來的網頁還好好的在那，fixed的內容也沒有變過位置，
• 因此說並非iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的
• <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

• 多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

display:inline-block 何時會顯示間隙？(攜程)

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

什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）

• 若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，因此不如隔離開。
• 由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的
• 同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，提升了webserver的http請求的解析速度。

什麼是CSS 預處理器 / 後處理器？

• 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。
• 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

JavaScript

---

介紹js的基本數據類型

• Undefined、Null、Boolean、Number、String、 ECMAScript 2015 新增:Symbol(建立後獨一無二且不可變的數據類型 )

介紹js有哪些內置對象？

• Object 是 JavaScript 中全部對象的父對象
• 數據封裝類對象：Object、Array、Boolean、Number 和 String
• 其餘對象：Function、Arguments、Math、Date、RegExp、Error

說幾條寫JavaScript的基本規範？

• 1.不要在同一行聲明多個變量。
• 2.請使用 ===/!==來比較true/false或者數值
• 3.使用對象字面量替代new Array這種形式
• 4.不要使用全局函數。
• 5.Switch語句必須帶有default分支
• 6.函數不該該有時候有返回值，有時候沒有返回值。
• 7.For循環必須使用大括號
• 8.If語句必須使用大括號
• 9.for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染。

JavaScript原型，原型鏈 ? 有什麼特色？

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

function Func(){}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
  return this.name;
}
var person = new Func();//如今能夠參考var person = Object.create(oldObject);
console.log(person.getInfo());//它擁有了Func的屬性和方法
//"Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}

JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

• 棧：原始數據類型（Undefined，Null，Boolean，Number、String）

• 堆：引用數據類型（對象、數組和函數）

• 兩種類型的區別是：存儲位置不一樣；

  • 原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；

• 引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定。若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體

如何將字符串轉化爲數字，例如'12.3b'?

• parseFloat('12.3b');
• 正則表達式，'12.3b'.match(/(\d)+(.)?(\d)+/g)[0] * 1, 可是這個不太靠譜，提供一種思路而已

如何將浮點數點左邊的數每三位添加一個逗號，如12000000.11轉化爲『12,000,000.11』?

function commafy(num){
	return num && num
		.toString()
		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
			return $2 + ',';
		});
}

如何實現數組的隨機排序？

• 方法一：

var arr = [1,2,3,4,5,6,7,8,9,10]; function randSort1(arr){ for(var i = 0,len = arr.length;i < len; i++ ){ var rand = parseInt(Math.random()*len); var temp = arr[rand]; arr[rand] = arr[i]; arr[i] = temp; } return arr; } console.log(randSort1(arr)); 

• 方法二：

var arr = [1,2,3,4,5,6,7,8,9,10]; function randSort2(arr){ var mixedArray = []; while(arr.length > 0){ var randomIndex = parseInt(Math.random()*arr.length); mixedArray.push(arr[randomIndex]); arr.splice(randomIndex, 1); } return mixedArray; } console.log(randSort2(arr)); 

• 方法三：

var arr = [1,2,3,4,5,6,7,8,9,10]; arr.sort(function(){ return Math.random() - 0.5; }) console.log(arr);

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);//獲得被繼承的屬性 

javascript建立對象的幾種方式？

• javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用

• 一、對象字面量的方式

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

• 二、用function來模擬無參的構造函數

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

• 三、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

function Pet(name,age,hobby){
   this.name=name;//this做用域：當前對象
   this.age=age;
   this.hobby=hobby;
   this.eat=function(){
      alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
   }
}
var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象
maidou.eat();//調用eat方法

• 四、用工廠方式來建立（內置對象）

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

• 五、用原型方式來建立

function Dog(){

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

• 六、用混合方式來建立

function Car(name,price){
  this.name=name;
  this.price=price;
}
 Car.prototype.sell=function(){
   alert("我是"+this.name+"，我如今賣"+this.price+"萬元");
  }
var camry =new Car("凱美瑞",27);
camry.sell();

Javascript做用鏈域?

• 全局函數沒法查看局部函數的內部細節，但局部函數能夠查看其上層的函數細節，直至全局細節。
• 當須要從局部函數查找某一屬性或方法時，若是當前做用域沒有找到，就會上溯到上層做用域查找，直至全局函數，這種組織形式就是做用域鏈

談談This對象的理解。

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

eval是作什麼的？

• 它的功能是把對應的字符串解析成JS代碼並運行；
• 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）
• 由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')');

什麼是window對象? 什麼是document對象?

• window對象是指瀏覽器打開的窗口。
• document對象是Documentd對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性

null，undefined 的區別？

• null 表示一個對象是「沒有值」的值，也就是值爲「空」；

• undefined 表示一個變量聲明瞭沒有初始化(賦值)；

• undefined不是一個有效的JSON，而null是；

• undefined的類型(typeof)是undefined；

• null的類型(typeof)是object；

• Javascript將未賦值的變量默認值設爲undefined；

• Javascript歷來不會將變量設爲null。它是用來讓程序員代表某個用var聲明的變量時沒有值的

• typeof undefined

  • undefined :
    • 是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined；
    • 例如變量被聲明瞭，但沒有賦值時，就等於undefined

• typeof null //"object"

  • null : 是一個對象(空對象, 沒有任何屬性和方法)；
  • 例如做爲函數的參數，表示該函數的參數不是對象；

• 注意：

  • 在驗證null時，必定要使用　=== ，由於 == 沒法分別 null 和　undefined
  • null == undefined // true
  • null === undefined // false

寫一個通用的事件偵聽器函數。

// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
	// 頁面加載完成後
	readyEvent : function(fn) {
		if (fn==null) {
			fn=document;
		}
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = fn;
		} else {
			window.onload = function() {
				oldonload();
				fn();
			};
		}
	},
	// 視能力分別使用dom0||dom2||IE方式 來綁定事件
	// 參數： 操做的元素,事件名稱 ,事件處理程序
	addEvent : function(element, type, handler) {
		if (element.addEventListener) {
			//事件類型、須要執行的函數、是否捕捉
			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;
		}
	},
	// 取消事件的默認行爲
	preventDefault : function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	// 獲取事件目標
	getTarget : function(event) {
		return event.target || event.srcElement;
	},
	// 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
	getEvent : function(e) {
		var ev = e || window.event;
		if (!ev) {
			var c = this.getEvent.caller;
			while (c) {
				ev = c.arguments[0];
				if (ev && Event == ev.constructor) {
					break;
				}
				c = c.caller;
			}
		}
		return ev;
	}
};

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

• parseInt() 函數能解析一個字符串，並返回一個整數，須要兩個參數 (val, radix)，其中 radix 表示要解析的數字的基數

function parseInt(str, radix) {
    return str+'-'+radix;
};
var a=["1", "2", "3"];
a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大於radix

• 由於二進制裏面，沒有數字3,致使出現超範圍的radix賦值和不合法的進制解析，纔會返回NaN因此["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

事件是？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

• 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲
• 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件
• ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

什麼是閉包（closure），爲何要用它？

• 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部

• 閉包的特性：

  • 函數內再嵌套函數
  • 內部函數能夠引用外層的參數和變量
  • 參數和變量不會被垃圾回收機制回收

//li節點的onclick事件都能正確的彈出當前被點擊的li索引
 <ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<script type="text/javascript">
  	var nodes = document.getElementsByTagName("li");
	for(i = 0;i<nodes.length;i+= 1){
	    nodes[i].onclick = (function(i){
	              return function() {
	                 console.log(i);
	              } //不用閉包的話，值每次都是4
	            })(i);
	}
</script>

• 執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在
• 使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源
• 由於say667()的內部函數的執行須要依賴say667()中的變量
• 這是對閉包做用的很是直白的描述

function say667() {
	// Local variable that ends up within closure
	var num = 666;
	var sayAlert = function() {
		alert(num);
	}
	num++;
	return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//執行結果應該彈出的667

javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

• use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,
• 使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲。
• 默認支持的糟糕特性都會被禁用，好比不能用with，也不能在乎外的狀況下給全局變量賦值;
• 全局變量的顯示聲明,函數必須聲明在頂層，不容許在非函數代碼塊內聲明函數,arguments.callee也不容許使用；
• 消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行爲和非嚴格模式的也不相同;
• 提升編譯器效率，增長運行速度；爲將來新版本的Javascript標準化作鋪墊。

如何判斷一個對象是否屬於某個類？

if(a instanceof Person){
       alert('yes');
   }

new操做符具體幹了什麼呢?

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

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

• javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具備指定名稱的屬性。此方法沒法檢查該對象的原型鏈中是否具備該屬性；該屬性必須是對象自己的一個成員
• 使用方法： object.hasOwnProperty(proName)
• 其中參數object是必選項。一個對象的實例。
• proName是必選項。一個屬性名稱的字符串值。
• 若是 object 具備指定名稱的屬性，那麼JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。

JSON 的瞭解？

• JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
• 它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
• 如：{"age":"12", "name":"back"}
• JSON字符串轉換爲JSON對象:

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

JSON對象轉換爲JSON字符串：
var last=obj.toJSONString();
var last=JSON.stringify(obj);

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

• defer和async、動態建立DOM方式（用得最多）、按需異步載入js

Ajax 是什麼? 如何建立一個Ajax？

• ajax的全稱：Asynchronous Javascript And XML。

• 異步傳輸+js+xml

• 所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗

• (1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

• (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

• (3)設置響應HTTP請求狀態變化的函數

• (4)發送HTTP請求

• (5)獲取異步調用返回的數據

• (6)使用JavaScript和DOM實現局部刷新

Ajax 解決瀏覽器緩存問題？

• 一、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

• 二、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

• 三、在URL後面加上一個隨機數： "fresh=" + Math.random();。

• 四、在URL後面加上時間搓："nowtime=" + new Date().getTime();。

• 五、若是是使用jQuery，直接這樣就能夠了 $.ajaxSetup({cache:false})。這樣頁面的全部ajax都會執行這條語句就是不須要保存緩存記錄

同步和異步的區別?

• 同步的概念應該是來自於OS中關於同步的概念:不一樣進程爲協同完成某項工做而在前後次序上調整(經過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.異步則不存在這種順序性.
• 同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
• 異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

如何解決跨域問題?

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

模塊化開發怎麼作？

• 不暴露私有成員

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

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

• Asynchronous Module Definition，異步模塊定義，全部的模塊將被異步加載，模塊加載不影響後面語句運行。全部依賴某些模塊的語句均放置在回調函數中
• 區別：
  • 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible
  • CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴能夠就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})

異步加載JS的方式有哪些？

• (1) defer，只支持IE

• (2) async：

• (3) 建立script，插入到DOM中，加載完畢後callBack

documen.write和 innerHTML的區別

• document.write只能重繪整個頁面
• innerHTML能夠重繪頁面的一部分

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點?

• （1）建立新節點
  • createDocumentFragment() //建立一個DOM片斷
  • createElement() //建立一個具體的元素
  • createTextNode() //建立一個文本節點
• （2）添加、移除、替換、插入
  • appendChild()
  • removeChild()
  • replaceChild()
  • insertBefore() //在已有的子節點前插入一個新的子節點
• （3）查找
  • getElementsByTagName() //經過標籤名稱
  • getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
  • getElementById() //經過元素Id，惟一性

.call() 和 .apply() 的區別？

• 例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);
• 注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

function add(a,b)
{
    alert(a+b);
}

function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);

jquery.extend 與 jquery.fn.extend的區別？

• jquery.extend 爲jquery類添加類方法，能夠理解爲添加靜態方法
• jquery.fn.extend:源碼中jquery.fn = jquery.prototype，因此對jquery.fn的擴展，就是爲jquery類添加成員函數 使用：
• jquery.extend擴展，須要經過jquery類來調用，而jquery.fn.extend擴展，全部jquery實例均可以直接調用

Jquery與jQuery UI 有啥區別？

• jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等
• jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件
• 提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

• jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
    return JSON.parse(array)
}

而後調用：
$("").stringifyArray(array)

針對 jQuery 的優化方法？

• 基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。
• 頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好
  • 好比：var str=$("a").attr("href");
• for (var i = size; i < arr.length; i++) {}
  • for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：
  • for (var i = size, length = arr.length; i < length; i++) {}

如何判斷當前腳本運行在瀏覽器仍是node環境中？（阿里）

• this === window ? 'browser' : 'node';
• 經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

jQuery 的 slideUp動畫 ，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

• jquery stop(): 如：$("#div").stop().animate({width:"100px"},100);

那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• 垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環)

JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

• 多個事件同一個函數：$("div").on("click mouseover", function(){});
• 多個事件不一樣函數

$("div").on({
	click: function(){},
	mouseover: function(){}
});

知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼?

• Chrome,Safari瀏覽器內核

檢測瀏覽器版本版本有哪些方式？

• 功能檢測、userAgent特徵檢測
• 好比：navigator.userAgent

//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
		  (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

What is a Polyfill?

• polyfill 是「在舊版瀏覽器上覆制標準 API 的 JavaScript 補充」,能夠動態地加載 JavaScript 代碼或庫，在不支持這些標準 API 的瀏覽器中模擬它們
• 例如，geolocation（地理位置）polyfill 能夠在 navigator 對象上添加全局的 geolocation 對象，還能添加 getCurrentPosition 函數以及「座標」回調對象
• 全部這些都是 W3C 地理位置 API 定義的對象和函數。由於 polyfill 模擬標準 API，因此可以以一種面向全部瀏覽器將來的方式針對這些 API 進行開發
• 一旦對這些 API 的支持變成絕對大多數，則能夠方便地去掉 polyfill，無需作任何額外工做。

作的項目中，有沒有用過或本身實現一些 polyfill 方案（兼容性處理方案）？

• 好比： html5shiv、Geolocation、Placeholder

使用JS實現獲取文件擴展名？

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

• String.lastIndexOf()

  • 方法返回指定值（本例中的'.'）在調用該方法的字符串中最後出現的位置，若是沒找到則返回 -1。對於'filename'和'.hiddenfile'，lastIndexOf的返回值分別爲0和-1無符號右移操做符(»>)
  • 將-1轉換爲4294967295，將-2轉換爲4294967294，這個方法能夠保證邊緣狀況時文件名不變

• String.prototype.slice()

  • 從上面計算的索引處提取文件的擴展名。若是索引比文件名的長度大，結果爲""

ECMAScript6 相關

---

Object.is() 與原來的比較操做符「 ===」、「 ==」的區別？

• 兩等號判等，會在比較時進行類型轉換；
• 三等號判等(判斷嚴格)，比較時不進行隱式類型轉換,（類型不一樣則會返回false）；
• Object.is 在三等號判等的基礎上特別處理了 NaN 、-0 和 +0 ，保證 -0 和 +0 再也不相同，但 Object.is(NaN, NaN) 會返回 true
• Object.is 應被認爲有其特殊的用途，而不能用它認爲它比其它的相等對比更寬鬆或嚴格。

其餘問題

---

頁面重構怎麼操做？

• 網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI

• 對於傳統的網站來講重構一般是：

  • 表格(table)佈局改成DIV+CSS

  • 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

  • 對於移動平臺的優化

  • 針對於SEO進行優化

  • 深層次的網站重構應該考慮的方面

  • 減小代碼間的耦合

  • 讓代碼保持彈性

  • 嚴格按規範編寫代碼

  • 設計可擴展的API

  • 代替舊有的框架、語言(如VB)

  • 加強用戶體驗

  • 一般來講對於速度的優化也包含在重構中

  • 壓縮JS、CSS、image等前端資源(一般是由服務器來解決)

  • 程序的性能優化(如數據讀寫)

  • 採用CDN來加速資源加載

  • 對於JS DOM的優化

  • HTTP服務器的文件緩存

列舉IE與其餘瀏覽器不同的特性？

• 事件不一樣之處：
  • 觸發事件的元素被認爲是目標（target）。而在 IE 中，目標包含在 event 對象的 srcElement 屬性；
  • 獲取字符代碼、若是按鍵表明一個字符（shift、ctrl、alt除外），IE 的 keyCode 會返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的，要獲取字符代碼，須要使用 charCode 屬性；
  • 阻止某個事件的默認行爲，IE 中阻止某個事件的默認行爲，必須將 returnValue 屬性設置爲 false，Mozilla 中，須要調用 preventDefault() 方法；
  • 中止事件冒泡，IE 中阻止事件進一步冒泡，須要設置 cancelBubble 爲 true，Mozzilla 中，須要調用 stopPropagation()

什麼叫優雅降級和漸進加強？

• 優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底不能用
• 漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增長不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。
• 如：默認使用flash上傳，但若是瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實現更好的體驗

是否瞭解公鑰加密和私鑰加密

• 通常狀況下是指私鑰用於對數據進行簽名，公鑰用於對簽名進行驗證;
• HTTP網站在瀏覽器端用公鑰加密敏感數據，而後在服務器端再用私鑰解密

WEB應用從服務器主動推送Data到客戶端有那些方式？

• html5提供的Websocket
• 不可見的iframe
• WebSocket經過Flash
• XHR長時間鏈接
• XHR Multipart Streaming
• <script>標籤的長時間鏈接(可跨域)

對Node的優勢和缺點提出了本身的見解？

• （優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。
• （缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

你有用過哪些前端性能優化的方法？

• （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

• （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

• （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

• （4） 當須要設置的樣式不少時設置className而不是直接操做style。

• （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

• （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

• （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳

• （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢

• 對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的

http狀態碼有那些？分別表明是什麼意思？

• 100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

• 200 OK 正常返回信息

• 201 Created 請求成功而且服務器建立了新的資源

• 202 Accepted 服務器已接受請求，但還沒有處理

• 301 Moved Permanently 請求的網頁已永久移動到新位置。

• 302 Found 臨時性重定向。

• 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

• 304 Not Modified 自從上次請求後，請求的網頁未修改過。

• 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

• 401 Unauthorized 請求未受權。

• 403 Forbidden 禁止訪問。

• 404 Not Found 找不到如何與 URI 相匹配的資源。

• 500 Internal Server Error 最多見的服務器端錯誤。

• 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

注：這題勝在區分度高，知識點覆蓋廣，再不懂的人，也能答出幾句，而高手能夠根據本身擅長的領域自由發揮，從URL規範、HTTP協議、DNS、CDN、數據庫查詢、 到瀏覽器流式解析、CSS規則構建、layout、paint、onload/domready、JS執行、JS API綁定等等

• 詳細版：

• 一、瀏覽器會開啓一個線程來處理這個請求，對 URL 分析判斷若是是 http 協議就按照 Web 方式來處理;

• 二、調用瀏覽器內核中的對應方法，好比 WebView 中的 loadUrl 方法;

• 三、經過DNS解析獲取網址的IP地址，設置 UA 等信息發出第二個GET請求;

• 四、進行HTTP協議會話，客戶端發送報頭(請求報頭);

• 五、進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務器;

• 六、進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;

• 七、處理結束回饋報頭，此處若是瀏覽器訪問過，緩存上有對應資源，會與服務器最後修改時間對比，一致則返回304;

• 八、瀏覽器開始下載html文檔(響應報頭，狀態碼200)，同時使用緩存;

• 九、文檔樹創建，根據標記請求所需指定MIME類型的文件（好比css、js）,同時設置了cookie;

• 十、頁面開始渲染DOM，JS根據DOM API操做DOM,執行事件綁定等，頁面顯示完成。

• 簡潔版：

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

你用的駕輕就熟用的熟練地編輯器&開發環境是什麼樣子？

• Sublime Text 3 + 相關插件編寫前端代碼
• Google chrome 、Mozilla Firefox瀏覽器 +firebug - 兼容測試和預覽頁面UI、動畫效果和交互功能
• Node.js+Gulp
• git 用於版本控制和Code Review

對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

• 前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

  • 一、實現界面交互
  • 二、提高用戶體驗
  • 三、有了Node.js，前端能夠實現服務端的一些事情

• 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

• 參與項目，快速高質量完成實現效果圖，精確到1px；

• 與團隊成員，UI設計，產品經理的溝通

• 作好的頁面結構，頁面重構和用戶體驗

• 處理hack，兼容、寫出優美的代碼格式

• 針對服務器的優化、擁抱最新前端技術

平時如何管理你的項目？

• 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

• 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

• 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

• 頁面進行標註（例如 頁面 模塊 開始和結束）；

• CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

• JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

• 圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理

說說最近最流行的一些東西吧？常去哪些網站？

• ES6\WebAssembly\Node\MVVM\Web Components\React\React Native\Webpack 組件化

移動端（Android IOS）怎麼作好用戶體驗?

• 清晰的視覺縱線、
• 信息的分組、極致的減法、
• 利用選擇代替輸入、
• 標籤及文字的排布方式、
• 依靠明文確認密碼、
• 合理的鍵盤利用、