前端-網上收集到的

時間 2019-11-11

標籤前端網上收集简体版

原文原文鏈接

參考：
碰到的一些面試問題 - CSDN 博客javascript

position 的值， relative 和 absolute 分別是相對於誰進行定位的？

absolute : 生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。
fixed （老 IE 不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

如何解決跨域問題

1.JSONP

原理是：動態插入 script 標籤，經過 script 標籤引入一個 js 文件，這個 js 文件載入成功後會執行咱們在 url 參數中指定的函數，而且會把咱們須要的 json 數據做爲參數傳入。css

因爲同源策略的限制，XmlHttpRequest 只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過 script 標籤實現跨域請求，而後在服務端輸出 JSON 數據並執行回調函數，從而解決了跨域的數據請求。html

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持 GET 請求。前端

Jsonp(JSON with Padding) 是 json 的一種 "使用模式"，可讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。html5

前端：java

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    function callback(data){
      document.write('jsonp獲取到的數據：'+JSON.stringify(data));
    }
  </script>
  <script type="text/javascript" src="http://localhost:8848"></script>
</body>
</html>

後端（Node.js）：mysql

const http = require('http')

http.createServer(function(request, response){  
  response.write('callback('+JSON.stringify({a:123,b:456})+')');
  response.end();
}).listen(8848);

2. 經過修改 document.domain 來跨域

將頁面的 document.domain 設爲同一個域名。前提條件：這兩個域名必須屬於同一個基礎域名（一級域名），並且所用的協議，端口都要一致，不然沒法利用 document.domain 進行跨域。jquery

eg：css3

www.domain.com
blog.domain.com
設置document.domain爲domain.com  


qqq.www.domain.com
ppp.www.domain.com
設置document.domain爲www.domain.com

3. 使用 window.name 來進行跨域

window 對象有個 name 屬性，該屬性有個特徵：即在一個窗口 (window) 的生命週期內, 窗口載入的全部的頁面都是共享一個 window.name 的，每一個頁面對 window.name 都有讀寫的權限，window.name 是持久存在一個窗口載入過的全部頁面中的程序員

4. 使用 HTML5 中新引進的 window.postMessage 方法來跨域傳送數據

5.flash、在服務器上設置代理頁面等跨域方式。

XML 和 JSON 的區別？

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

說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到 window 對象即被終止，做用域鏈向下訪問變量是不被容許的。

建立 AJAX 過程

建立 XMLHttpRequest 對象, 也就是建立一個異步調用對象.
建立一個新的 HTTP 請求, 並指定該 HTTP 請求的方法、URL 及驗證信息.
設置響應 HTTP 請求狀態變化的函數.
發送 HTTP 請求.
獲取異步調用返回的數據.
使用 JavaScript 和 DOM 實現局部刷新.

Node.js：

const http = require('http')
const url = require('url')

http.createServer(function(request, response){
  var params = url.parse(request.url, true).query;
  if(undefined == params.t){
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var XHR = new XMLHttpRequest();
    XHR.open('get', 'http://localhost:8848?t=a');
    XHR.send(null);
    XHR.onreadystatechange = function () {
        if (XHR.readyState === 4) {
            if ( XHR.status === 200 ) {
              document.write('AJAX獲取到的內容爲：'+XHR.responseText);
            }
        }
    }
  </script>
</body>
</html>`;
    response.write(html);
    response.end();
  }
  if('a' == params.t){
    response.write('hello world');
    response.end();
  }
}).listen(8848);

HTTP 和 HTTPS

HTTP 協議一般承載於 TCP 協議之上，在 HTTP 和 TCP 之間添加一個安全協議層（SSL 或 TSL），這個時候，就成了咱們常說的 HTTPS。

默認 HTTP 的端口號爲 80，HTTPS 的端口號爲 443。

爲何 HTTPS 安全

由於網絡請求須要有不少的服務器路由器的轉發。中間的節點均可能篡改信息，而若是使用 HTTPS，密鑰在你和終點站纔有。https 之因此比 http 安全，是由於他利用 SSL 或 TSL 協議傳輸。它包含證書，卸載，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer 傳遞等。保障了傳輸過程的安全性。

對前端模塊化的認識

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

AMD 是提早執行，CMD 是延遲執行。

AMD 推薦的風格經過返回一個對象作爲模塊對象，CommonJS 的風格經過對 module.exports 或 exports 的屬性賦值來達到暴露模塊對象的目的。

CMD 模塊方式

define(function(require, exports, module) {

  // 模塊代碼

});

談談性能優化問題

代碼層面：避免使用 css 表達式，避免使用高級選擇器，通配選擇器。
緩存利用：緩存 Ajax，使用 CDN，使用外部 js 和 css 文件以便緩存，添加 Expires 頭，服務端配置 Etag，減小 DNS 查找等
請求數量：合併樣式和腳本，使用 css 圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。
請求帶寬：壓縮文件，開啓 GZIP
開啓了 GPU 硬件加速模式：
以下設置實際上是爲了渲染 3D 樣式，但咱們設置值爲 0 後，並無真正使用 3D 效果，但瀏覽器卻所以開啓了 GPU 硬件加速模式。這種 GPU 硬件加速在當今 PC 機及移動設備上都已普及，在移動端的性能提高是至關顯著地，因此建議你們在作動畫時能夠嘗試一下開啓 GPU 硬件加速。

-webkit-transform:transition3d(0,0,0)
// 或者
-webkit-transform:translateZ(0)

棧和隊列的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

棧和堆的區別？

棧區（stack）— 由編譯器自動分配釋放，存放函數的參數值，局部變量的值等。

堆區（heap） — 通常由程序員分配釋放，若程序員不釋放，程序結束時可能由 OS 回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

快速排序

肯定 low，high 和 pivotkey
從 high 向前找第一個小於 pivotkey 的進行交換
從 low 向後找第一個大於 pivotkey 的進行交換
直到 low==high
由 pivotkey 分紅兩半遞歸 1-4

你以爲 jQuery 或 zepto 源碼有哪些寫的好的地方

jquery 源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入 window 對象參數，可使 window 對象做爲局部變量使用，好處是當 jquery 中訪問 window 對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問 window 對象。一樣，傳入 undefined 參數，能夠縮短查找 undefined 時的做用域鏈。

(function( window, undefined ) {

//用一個函數域包起來，就是所謂的沙箱

//在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局

//把當前沙箱須要的外部變量經過函數參數引入進來

//只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數

window.jQuery = window.$ = jQuery;

})( window );

jquery 將一些原型屬性和方法封裝在了 jquery.prototype 中，爲了縮短名稱，又賦值給了 jquery.fn，這是很形象的寫法。

有一些數組或對象的方法常常能使用到，jQuery 將其保存爲局部變量以提升訪問速度。

jquery 實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率。

ES6 的瞭解

新增模板字符串（爲 JavaScript 提供了簡單的字符串插值功能）
箭頭函數（操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值 Inputs=>outputs）
for...of（用來遍歷數據，例如數組中的值）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
arguments 對象可被不定參數和默認參數完美代替。
ES6 將 promise 對象歸入規範，提供了原生的 Promise 對象
增長了 let 和 const 命令，用來聲明變量
增長了塊級做用域。let 命令實際上就增長了塊級做用域
ES6 規定，var 命令和 function 命令聲明的全局變量，屬於全局對象的屬性；let 命令、const 命令、class 命令聲明的全局變量，不屬於全局對象的屬性
還有就是引入 module 模塊的概念
Symbol 數據類型

js 繼承方式及其優缺點

原型鏈繼承的缺點

一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。

借用構造函數（類式繼承）

借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。因此咱們須要原型鏈 + 借用構造函數的模式，這種模式稱爲組合繼承

組合式繼承

組合式繼承是比較經常使用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。這樣，既經過在原型上定義方法實現了函數複用，又保證每一個實例都有它本身的屬性。

談談浮動和清除浮動

浮動的框能夠從左或右開始，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上。（BFC）

浮動產生緣由

通常是一個盒子裏使用了 CSS float 浮動屬性，致使父級對象盒子不能被撐開，這樣 CSS float 浮動就產生了

清除方法（利用 clear，或建立新的 BFC）

clear:both 清除浮動（在父盒子後添加一個空標籤，標籤樣式爲 clear:both）
父級 div 定義 overflow:hidden
僞元素清除

.clearfix {
zoom:1; //兼容ie 6 7
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

用過哪些設計模式？

工廠模式

工廠模式（Factory Pattern）是 Java 中最經常使用的設計模式之一。這種類型的設計模式屬於建立型模式，它提供了一種建立對象的最佳方式。

在工廠模式中，咱們在建立對象時不會對客戶端暴露建立邏輯，而且是經過使用一個共同的接口來指向新建立的對象。

單例模式

單例模式（Singleton Pattern）是 Java 中最簡單的設計模式之一。這種類型的設計模式屬於建立型模式，它提供了一種建立對象的最佳方式。

這種模式涉及到一個單一的類，該類負責建立本身的對象，同時確保只有單個對象被建立。這個類提供了一種訪問其惟一的對象的方式，能夠直接訪問，不須要實例化該類的對象。

注意：

1 單例類只能有一個實例。
1. 單例類必須本身建立本身的惟一實例。
1. 單例類必須給全部其餘對象提供這一實例。

你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在 js 中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

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

cookie 雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。

弊端: 數量和長度的限制

IE6 或更低版本最多 20 個 cookie
IE7 和以後的版本最後能夠有 50 個 cookie。
Firefox 最多 50 個 cookie
chrome 和 Safari 沒有作硬性限制
cookie 的最大大約爲 4096 字節，爲了兼容性，通常不能超過 4095 字節。
安全性問題。若是 cookie 被人攔截了，那人就能夠取得全部的 session 信息。即便加密也與事無補，由於攔截者並不須要知道 cookie 的意義，他只要原樣轉發 cookie 就能夠達到目的了。
有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

優勢: 極高的擴展性和可用性

經過良好的編程，控制保存在 cookie 中的 session 對象的大小。
經過加密和安全傳輸技術（SSL），減小 cookie 被破解的可能性。
只在 cookie 中存放不敏感數據，即便被盜也不會有重大損失。
控制 cookie 的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的 cookie。

瀏覽器本地存儲

在較高版本的瀏覽器中，js 提供了 sessionStorage 和 globalStorage。在 HTML5 中提供了 localStorage 來取代 globalStorage。

html5 中的 Web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage。

sessionStorage 用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而 localStorage 用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

Web Storage 的概念和 cookie 類似，區別是它是爲了更大容量存儲設計的。Cookie 的大小是受限的，而且每次你請求一個新的頁面的時候 Cookie 都會被髮送過去，這樣無形中浪費了帶寬，另外 cookie 還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie 須要前端開發者本身封裝 setCookie，getCookie。

可是 cookie 也是不能夠或缺的：cookie 的做用是與服務器進行交互，做爲 HTTP 規範的一部分而存在，而 Web Storage 僅僅是爲了在本地「存儲」數據而生

瀏覽器的支持除了 IE７及如下不支持外，其餘標準瀏覽器都徹底支持 (ie 及 FF 需在 web 服務器裏運行)，值得一提的是 IE 老是辦好事，例如 IE七、IE6 中的 userData 其實就是 javascript 本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持 web storage。

localStorage 和 sessionStorage 都具備相同的操做方法，例如 setItem、getItem 和 removeItem 等

1.　cookie 數據存放在客戶的瀏覽器上，session 數據放在服務器上。
2.　cookie 不是很安全，別人能夠分析存放在本地的 COOKIE 並進 COOKIE 欺騙，考慮到安全應當使用 session。
3.　session 會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用 COOKIE。
4.　單個 cookie 保存的數據不能超過 4K，不少瀏覽器都限制一個站點最多保存 20 個 cookie。

display:none 和 visibility:hidden 的區別？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #d1{
      height: 100px;
      overflow: none;
      border: 3px solid black;
    }
    #d1 > div{
      height: 200px;
      background: pink;
    }
    #d2{
      height: 50px;
      overflow: hidden;
      border: 3px solid red;
    }
    #d2 > div{
      height: 200px;
      background: green;
    }
  </style>
</head>
<body>
<div id="d1">
  d1
  <div></div>
</div>

<div id="d2">
  d2
  <div></div>
</div>
</body>
</html>

position:absolute 和 float 屬性的異同

共同點：對內聯元素設置 float 和 absolute 屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

不一樣點：float 仍會佔據位置，absolute 會覆蓋文檔流中的其餘元素。

介紹一下 box-sizing 屬性？

box-sizing 屬性主要用來控制元素的盒模型的解析模式。默認值是 content-box。

content-box：讓元素維持 W3C 的標準盒模型。元素的寬度 / 高度由 border + padding + content 的寬度 / 高度決定，設置 width/height 屬性指的是 content 部分的寬 / 高
border-box：讓元素維持 IE 傳統盒模型（IE6 如下版本和 IE6~7 的怪異模式）。設置 width/height 屬性指的是 border + padding + content

標準瀏覽器下，按照 W3C 規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3 新增僞類有那些？

id 選擇器# myid
類選擇器.myclassname
標籤選擇器div, h1, p
相鄰選擇器h1 + p
子選擇器ul > li
後代選擇器li a
通配符選擇器\*
屬性選擇器a[rel = "external"]
僞類選擇器a: hover, li:nth-child

優先級：!important > 內聯 > id > class > tag

CSS3 新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個
元素的每一個
元素。
p:last-of-type 選擇屬於其父元素的最後
元素的每一個
元素。
p:only-of-type 選擇屬於其父元素惟一的
元素的每一個
元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個
元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個
元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中

CSS3 有哪些新特性？

CSS3 實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉, 縮放, 定位, 傾斜
增長了更多的 CSS 選擇器
多背景
RGBA
新增僞元素：::selection（用戶選中部分）
媒體查詢，多欄佈局
border-image

對 BFC 規範的理解？

BFC，塊級格式化上下文，一個建立了新的 BFC 的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的 margin 會發生摺疊。

說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於 SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循 W3C 標準的團隊都遵循這個標準，能夠減小差別化。

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

建立新節點

createDocumentFragment() // 建立一個 DOM 片斷
createElement() // 建立一個具體的元素
createTextNode() // 建立一個文本節點

添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() // 並無 insertAfter()

查找

getElementsByTagName() // 經過標籤名稱
getElementsByName() // 經過元素的 Name 屬性的值 (IE 容錯能力較強，會獲得一個數組，其中包括 id 等於 name 值的)
getElementById() // 經過元素 Id，惟一性.

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

新特性

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

拖拽釋放 (Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻 API(audio,video)
畫布 (Canvas) API
地理 (Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控件 calendar、date、time、email、url、search
新的技術 webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；

低版本 IE 支持 HTML5 新標籤

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

null 和 undefined 的區別？

null 是一個表示」無」的對象，轉爲數值時爲 0；undefined 是一個表示」無」的原始值，轉爲數值時爲 NaN。

當聲明的變量還未被初始化時，變量的默認值爲 undefined。

null 用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined 表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

1 變量被聲明瞭，但沒有賦值時，就等於 undefined。
1. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined。
1. 對象沒有賦值的屬性，該屬性的值爲 undefined。
1. 函數沒有返回值時，默認返回 undefined。

做爲函數的參數，表示該函數的參數不是對象。
1. 做爲對象原型鏈的終點。

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

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

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

defer 和 async、動態建立 DOM 方式（建立 script，插入到 DOM 中，加載完畢後 callBack）、按需異步載入 js

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

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

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

IE 支持 currentStyle，FIrefox 使用 getComputStyle
IE 使用 innerText，Firefox 使用 textContent
濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是 addEventListener
鼠標位置：IE 是 event.clientX；火狐是 event.pageX
IE 使用 event.srcElement；Firefox 使用 event.target
IE 中消除 list 的原點僅需 margin:0 便可達到最終效果；FIrefox 須要設置 margin:0;padding:0 以及 list-style:none
CSS 圓角：ie7 如下不支持圓角

javascript 對象的幾種建立方式

工廠模式
構造函數模式
原型模式
混合構造函數和原型模式
動態原型模式
寄生構造函數模式
穩妥構造函數模式

javascript 繼承的 6 種方法

原型鏈繼承
借用構造函數繼承
組合繼承 (原型 + 借用構造)
原型式繼承
寄生式繼承
寄生組合式繼承

GET 和 POST 的區別，什麼時候使用 POST？

GET：通常用於信息獲取，使用 URL 傳遞參數，對所發送信息的數量也有限制，通常在 2000 個字符
POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

Get 是經過地址欄來傳值，而 Post 是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：

更新服務器上的文件或數據庫（GET 的話 URL 同樣會加載緩存）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

ajax 的缺點和在 IE 下的問題？

ajax 的缺點

1 ajax 不支持瀏覽器 back 按鈕。
1. 安全問題 AJAX 暴露了與服務器交互的細節。
1. 對搜索引擎的支持比較弱。
1. 破壞了程序的異常機制。
1. 不容易調試。

說說你對 Promise 的理解

Promise 對象用於表示一個異步操做的最終狀態（完成或失敗），以及其返回的值。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

實現一個函數 clone，能夠對 JavaScript 中的 5 種主要的數據類型（包括 Number、String、Object、Array、Boolean）進行值複製

Object.prototype.clone = function(){
  var o = this.constructor === Array ? [] : {};
  for(var e in this){
    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
  }
  return o;
}

編寫一個方法求一個字符串的字節長度。假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

實際的話得看編碼

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;
}
document.write(GetBytes("你好,as"));

說說 mongoDB 和 MySQL 的區別

MySQL 是傳統的關係型數據庫，MongoDB 則是非關係型數據庫

mongodb 以 BSON 結構（二進制）進行存儲，對海量數據存儲有着很明顯的優點。

對比傳統關係型數據庫, NoSQL 有着很是顯著的性能和擴展性優點，與關係型數據庫相比，MongoDB 的優勢有：

弱一致性（最終一致），更能保證用戶的訪問速度：
文檔結構的存儲方式，可以更便捷的獲取數據。

attribute 和 property 的區別是什麼？

attribute 是 dom 元素在文檔中做爲 html 標籤擁有的屬性；
property 就是 dom 元素在 js 中做爲對象擁有的屬性。

因此：

對於 html 的標準屬性來講，attribute 和 property 是同步的，是會自動更新的，
可是對於自定義的屬性來講，他們是不一樣步的

請解釋什麼是事件代理 (事件委託)

事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好處是能夠提升性能。

說說你對 MVC 和 MVVM 的理解

MVC

View 傳送指令到 Controller
Controller 完成業務邏輯後，要求 Model 改變狀態
Model 將新的數據發送到 View，用戶獲得反饋

全部通訊都是單向的。

MVVM

MVVM 是 Model-View-ViewModel 的簡寫。它本質上就是 MVC 的改進版。MVVM 就是將其中的 View 的狀態和行爲抽象化，讓咱們將視圖 UI 和業務邏輯分開。

View：UI 界面
ViewModel：它是 View 的抽象，負責 View 與 Model 之間信息轉換，將 View 的 Command 傳送到 Model；
Model：數據訪問層

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。