關於前端基本要求及一些題

時間 2019-11-11

標籤關於前端基本要求一些简体版

原文原文鏈接

百度前端招聘基本要求：javascript

首先確定是前端基礎知識紮實（html、css、js），這個你從網上搜一些前端面試題，問的基本都是差很少的。php

css：css

選擇器、屬性都瞭解，經常使用佈局可以實現就能夠了。html

js：前端

比較複雜，可能會問js自己相關的，好比閉包、變量提高之類，也可能會問瀏覽器相關，包括但不限於事件冒泡、捕獲、事件委託、監聽者模式、正則表達式、ajax、跨域問題、模塊化等等。vue

第二就是算法方面，瞭解基本的數據結構樹圖堆棧啥的、經常使用算法。html5

第三就是計算機的基礎知識，數據庫、操做系統、網絡協議，問這些就是保證你在本科時學的課程你學懂了，證實你的學習能力是沒問題的。java

第四是server端的語言，Java、PHP或node，能夠不用精通，瞭解就好。node

第五是目前流行的js框架、css預處理語言、ui框架、持續集成腳手架等，若是有了解的話會比較好，包括但不限於(jQuery、React，vue，Angular、less、sass、bootstrap、webpack、gulp、grunt、fis、等)。mysql

通常面試差很少就是這些方面。你寒假要是學習的話，能夠先找些面試題看一看，哪方面不足看哪方面，另外能夠本身搭建個網站，最好能部署到線上，或者Git上有開源項目，寫在簡歷上，人家收到你簡歷時就能夠看到，看起來會比較好。

面試常考知識點：

瀏覽器頁面有哪三層構成，分別是什麼，做用是什麼?

構成：結構層、表示層、行爲層

分別是：HTML、CSS、JavaScript

做用：HTML實現頁面結構，CSS完成頁面的表現與風格，javascript實現一些客戶端的功能與業務。

CSS Sprites原理：

CSSSprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。

HTML5的優勢與缺點？

優勢： a、網絡標準統1、html5自己是由W3C推薦出來的。

b、多設備、跨平臺

c、即時更新。

d、提升可用性和改進用戶的友好體驗；

e、有幾個新的標籤，這將有助於開發人員定義重要的內容；

f、能夠給站點帶來更多的多媒體元素(視頻和音頻)；

g、能夠很好的替代Flash和Silverlight；

h、涉及到網站的抓取和索引的時候，對於SEO很友好；

i、被大量應用於移動應用程序和遊戲。

缺點： a、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。

b、完善性：許多特性各瀏覽器的支持程度也不同。

c、技術門檻：Html5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰

d、性能：某些平臺上的引擎問題致使HTML5性能低下。

e、瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒。

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

回答1：（1）、聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

（2）、嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

回答2： doctype聲明指出閱讀程序應該用什麼規則集來解釋文檔中的標記。在Web文檔的狀況下，「閱讀程序」一般是瀏覽器或者校驗器這樣的一個程序，「規則」則是W3C所發佈的一個文檔類型定義（DTD）中包含的規則。

(1) 聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的HTML 文檔。

(2)所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不容許使用任何表現層的語法，如

。嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行混雜模式則是一種向後兼容的解析方法，說的透明點就是能夠實現IE5.5如下版本瀏覽器的渲染模式。

(3)瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 ,將使網頁進入怪異模式。

HTML5有哪些新特性、移除了哪些元素？

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標準規範，把 HTML5 的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

結構性元素主要負責web上下文結構的定義

section：在 web 頁面應用中，該元素也能夠用於區域的章節描述。

header：頁面主體上的頭部，header 元素每每在一對 body 元素中。

footer：頁面的底部（頁腳），一般會標出網站的相關信息。

nav：專門用於菜單導航、連接導航的元素，是 navigator 的縮寫。

article：用於表現一篇文章的主體內容，通常爲文字集中顯示的區域。

級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。

aside：用於表達註記、貼士、側欄、摘要、插入的引用等做爲補充主體的內容。

figure：是對多個元素進行組合並展現的元素，一般與 ficaption 聯合使用。

code：表示一段代碼塊。

dialog：用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。

行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展現的基礎。

meter：表示特定範圍內的數值，可用於工資、數量、百分比等。

time：表示時間值。

progress：用來表示進度條，可經過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事。

video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。

audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。

交互性元素主要用於功能性的內容表達，會有必定的內容和數據的關聯，是各類事件的基礎。

details：用來表示一段具體的內容，可是內容默承認能不顯示，經過某種手段（如單擊）與 legend 交互纔會顯示出來。

datagrid：用來控制客戶端數據與顯示，能夠由動態腳本及時更新。

menu：主要用於交互菜單（曾被廢棄又被從新啓用的元素）。

command：用來處理命令按鈕。

你作的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什麼?

a、 IE: trident內核

b、 Firefox ： gecko 內核

c、Safari:webkit 內核

d、 Opera: 之前是 presto 內核， Opera 現已改用 GoogleChrome 的 Blink 內核

e、 Chrome:Blink(基於 webkit ， Google 與 Opera Software 共同開發 )

每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？

聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）

說說你對HTML5認識?（是什麼,爲何）

是什麼：

HTML5指的是包括 HTML 、 CSS 和 JavaScript 在內的一套技術組合。它但願可以減小網頁瀏覽器對於須要插件的豐富性網絡應用服務（ Plug-in-Based Rich Internet Application ， RIA ），例如：AdobeFlash 、 Microsoft Silverlight 與 Oracle JavaFX 的需求，而且提供更多能有效增強網絡應用的標準集。 HTML5 是 HTML 最新版本， 2014 年 10 月由萬維網聯盟（ W3C ）完成標準制定。目標是替換 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。

爲何：

HTML4陳舊不能知足日益發展的互聯網須要，特別是移動互聯網。爲了加強瀏覽器功能 Flash 被普遍使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。

HTML5加強了瀏覽器的原生功能，符合 HTML5 規範的瀏覽器功能將更增強大，減小了 Web 應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外 W3C 從推出 HTML4.0 到 5.0 之間共經歷了 17 年， HTML 的變化很小，這並不符合一個好產品的演進規則。

對WEB標準以及W3C的理解與認識?

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和 js 腳本、結構行爲表現的分離、

文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，

容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?

(1)行內元素

a - 錨點

* abbr - 縮寫

* acronym - 首字

* b - 粗體 ( 不推薦 )

* bdo - bidioverride

* big - 大字體

* br - 換行

* cite - 引用

* code - 計算機代碼 ( 在引用源碼的時候須要 )

* dfn - 定義字段

* em - 強調

* font - 字體設定 ( 不推薦 )

* i - 斜體

* img - 圖片

* input - 輸入框

* kbd - 定義鍵盤文本

* label - 表格標籤

* q - 短引用

* s - 中劃線 ( 不推薦 )

* samp - 定義範例計算機代碼

* select - 項目選擇

* small - 小字體文本

* span - 經常使用內聯容器，定義文本內區塊

* strike - 中劃線

* strong - 粗體強調

* sub - 下標

* sup - 上標

* textarea - 多行文本輸入框

* tt - 電傳文本

* u - 下劃線

* var - 定義變量

(2)塊元素 (blockelement)

* address - 地址

* blockquote - 塊引用

* center - 舉中對齊塊

* dir - 目錄列表

* div - 經常使用塊級容易，也是 csslayout 的主要標籤

* dl - 定義列表

* fieldset - form控制組

* form - 交互表單

* h3 - 大標題

* h4 - 副標題

* h3 - 3級標題

* h4 - 4級標題

* h5 - 5級標題

* h6 - 6級標題

* hr - 水平分隔線

* isindex - inputprompt

* menu - 菜單列表

* noframes -frames可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容

* noscript - ）可選腳本內容（對於不支持script 的瀏覽器顯示此內容）

* ol - 排序表單

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

可變元素

可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。

* applet - javaapplet

* button - 按鈕

* del - 刪除文本

* iframe - inlineframe

* ins - 插入的文本

* map - 圖片區塊 (map)

* object - object對象

* script - 客戶端腳本

(3)空元素 ( 在 HTML[1] 元素中，沒有內容的HTML 元素被稱爲空元素 )

<br/> //換行

<hr> //分隔線

<input> //文本框等

<img> //圖片

什麼是WebGL,它有什麼優勢?

WebGL（全寫 WebGraphics Library ）是一種 3D 繪圖標準，這種繪圖技術標準容許把 JavaScript 和 OpenGL ES 2.0 結合在一塊兒，經過增長 OpenGL ES 2.0 的一個 JavaScript 綁定， WebGL 能夠爲 HTML5 Canvas 提供硬件 3D 加速渲染，這樣 Web 開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現 3D 場景和模型了，還能建立複雜的導航和數據視覺化。顯然， WebGL 技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜 3D 結構的網站頁面，甚至能夠用來設計 3D 網頁遊戲等等。

WebGL完美地解決了現有的 Web交互式三維動畫的兩個問題：

第一，它經過HTML腳本自己實現 Web 交互式三維動畫的製做，無需任何瀏覽器插件支持 ;

第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。

通俗說WebGL中 canvas 繪圖中的 3D 版本。由於原生的WebGL 很複雜，咱們常常會使用一些三方的庫，如 three.js 等，這些庫多數用於 HTML5 遊戲開發。

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

sessionStorage 和 localStorage是 HTML5 Web Storage API 提供的，能夠方便的在 web 請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、localStorage 、 cookie 都是在瀏覽器端存儲的數據，其中 sessionStorage 的概念很特別，引入了一個「瀏覽器窗口」的概念。 sessionStorage 是在同源的同學口（或 tab ）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後， sessionStorage 即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面， sessionStorage 對象也是不一樣的

cookies會發送到服務器端。其他兩個不會。

Microsoft 指出 InternetExplorer 8 增長 cookie 限制爲每一個域名 50 個，但 IE7 彷佛也容許每一個域名 50 個 cookie 。 Firefox 每一個域名 cookie 限制爲 50 個。 Opera 每一個域名 cookie 限制爲 30 個。 Firefox 和 Safari 容許 cookie 多達 4097 個字節，包括名（ name ）、值（ value ）和等號。 Opera 許 cookie 多達 4096 個字節，包括：名（ name ）、值（ value ）和等號。 Internet Explorer 容許 cookie 多達 4095 個字節，包括：名（ name ）、值（ value ）和等號。

區別：

- Cookie

+ 每一個域名存儲量比較小（各瀏覽器不一樣，大體 4K ）

+ 全部域名的存儲量有限制（各瀏覽器不一樣，大體 4K ）

+ 有個數限制（各瀏覽器不一樣）

+ 會隨請求發送到服務器

- LocalStorage

+ 永久存儲

+ 單個域名存儲量比較大（推薦5MB ，各瀏覽器不一樣）

+ 整體數量無限制

- SessionStorage

+ 只在 Session 內有效

+ 存儲量更大（推薦沒有限制，可是實際上各瀏覽器也不一樣）

說說你對HTML語義化的理解?

(1)什麼是 HTML 語義化？

<基本上都是圍繞着幾個主要的標籤，像標題（ H1~H6 ）、列表（ li ）、強調（ strong em ）等等 >

根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

(2)爲何要語義化？

爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構 : 爲了裸奔時好看；

用戶體驗：例如title、 alt 用於解釋名詞或解釋圖片信息、 label 標籤的活用；

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

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

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

(3) 語義化標籤

<article></article>SM:用來在頁面中表示一套結構完整且獨立的內容部分

<aslde></aside>SM:主題的附屬信息 ( 用途很廣，主要就是一個附屬內容 ) ，若是 article 裏面爲一篇文章的話，那麼文章的做者以及信息內容就是這篇文章的附屬內容了

<figure></figure>SM:媒體元素，好比一些視頻，圖片啊等等

SM:選項列表，與 input 元素配合使用，來定義input 可能的值

SM:用於描述文檔或者文檔某個部分的細節 ~ 默認屬性爲 open~

ps:配合 summary 一塊兒使用

link和@import的區別?

XML/HTML代碼

XML/HTML代碼

<styletype='text/css' media='screen'>

@import url('CSS文件 ');

</style>

二者都是外部引用CSS的方式，可是存在必定的區別：

區別1： link 是 XHTML 標籤，除了加載 CSS 外，還能夠定義 RSS 等其餘事務；@import 屬於 CSS 範疇，只能加載 CSS 。

區別2： link 引用 CSS 時，在頁面載入時同時加載；@import 須要頁面網頁徹底載入之後加載。

區別3： link 是 XHTML 標籤，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支持。

區別4： ink 支持使用Javascript 控制 DOM 去改變樣式；而 @import 不支持。

說說你對SVG理解?

SVG可縮放矢量圖形（Scalable Vector Graphics ）是基於可擴展標記語言（ XML ），用於描述二維矢量圖形的一種圖形格式。 SVG 是 W3C('World Wide Web ConSortium' 即 ' 國際互聯網標準組織 ') 在 2000 年 8 月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。 SVG 嚴格聽從 XML 語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。 SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準。

特色：

(1)任意放縮

用戶能夠任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。

(2)文本獨立

SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即便沒有安裝某一字體，也會看到和他們製做時徹底相同的畫面。

(3)較小文件

整體來說，SVG文件比那些 GIF 和 JPEG 格式的文件要小不少，於是下載也很快。

(4)超強顯示效果

SVG圖像在屏幕上老是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。

(5)超級顏色控制

SVG圖像提供一個 1600 萬種顏色的調色板，支持ICC 顏色描述文件標準、 RGB 、線 X 填充、漸變和蒙版。

(6)交互 X 和智能化。 SVG 面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式 Flash 競爭的問題，另外一個問題就是 SVG 的本地運行環境下的廠家支持程度。

瀏覽器支持：

Internet Explorer9，火狐，谷歌 Chrome， Opera 和 Safari 都支持 SVG 。

IE8和早期版本都須要一個插件- 如 Adobe SVG 瀏覽器，這是免費提供的。

HTML全局屬性(globalattribute)有哪些?

參考資料：MDN: html globalattribute或者W3C HTML global-attributes accesskey:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift+ a可激活元素 class:爲元素設置類標識，多個類名用空格分開，CSS和javascript可經過class屬性獲取元素 contenteditable: 指定元素內容是否可編輯 contextmenu: 自定義鼠標右鍵彈出菜單內容 data-*: 爲元素增長自定義屬性 dir: 設置元素文本方向 draggable: 設置元素是否可拖拽 dropzone: 設置元素拖放類型： copy, move, link hidden: 表示一個元素是否與文檔。樣式上會致使元素不顯示，可是不能用這個屬性實現樣式效果 id: 元素id，文檔內惟一 lang: 元素內容的的語言 spellcheck: 是否啓動拼寫和語法檢查 style: 行內css樣式 tabindex: 設置元素能夠得到焦點，經過tab能夠導航 title: 元素相關的建議信息 translate: 元素和子孫節點內容是否須要本地化

說說超連接target屬性的取值和做用？

target這個屬性指定所連接的頁面在瀏覽器窗口中的打開方式。

它的參數值主要有：

a、 _blank ：在新瀏覽器窗口中打開連接文件

b、 _parent ：將連接的文件載入含有該連接框架的父框架集或父窗口中。若是含有該連接的框架不是嵌套的，則在瀏覽器全屏窗口中載入連接的文件，就象 _self 參數一。

c、 _self ：在同一框架或窗口中打開所連接的文檔。此參數爲默認值，一般不用指定。可是我不太理解。

d、 _top ：在當前的整個瀏覽器窗口中打開所連接的文檔，於是會刪除全部框架。

`data-`屬性的做用是什麼？

`data-`爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的 `dataset` 屬性獲取，不支持該屬性的瀏覽器能夠經過 `getAttribute` 方法獲取 :

須要注意的是：`data-`以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。並非全部的瀏覽器都支持 .`dataset` 屬性，測試的瀏覽器中只有 Chrome 和 Opera 支持。

即：當沒有合適的屬性和元素時，自定義的data 屬性是可以存儲頁面或 App 的私有的自定義數據。

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

主要分紅兩部分：渲染引擎(layoutengineer或 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 的分支） ]

iframe有那些缺點？

*iframe會阻塞主頁面的Onload 事件；

*搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用 iframe ，最好是經過 javascript

動態給iframe添加 src 屬性值，這樣能夠繞開以上兩個問題。

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

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

<labelfor='Name'>Number:</label>

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

WebSocket、SharedWorker ；

也能夠調用localstorge、 cookies 等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，

咱們經過監聽事件，控制它的值來進行頁面信息通訊；

注意quirks： Safari 在無痕模式下設置localstorge 值時會拋出 QuotaExceededError 的異常；

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

a、 map+area 或者 svg

b、border-radius

c、純 js 實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

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

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

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

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

Physical StyleElements -- 天然樣式標籤

b, i, u, s, pre

Semantic StyleElements -- 語義樣式標籤

strong, em, ins,del, code

應該準確使用語義樣式標籤, 但不能濫用 , 若是不能肯定時首選使用天然樣式標籤。

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

view sourceprint?

<divstyle='height:1px;overflow:hidden;background:red'></div>

HTML5標籤的做用?(用途)

a、使Web頁面的內容更加有序和規範

b、使搜索引擎更加容易按照HTML5規則識別出有效的內容

c、使Web頁面更接近於一種數據字段和表

簡述一下src與href的區別？

src用於替換當前元素，href 用於在當前文檔和引用資源之間確立聯繫。

src是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本， img 圖片和 frame 等元素。

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

href是 HypertextReference 的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

<linkhref='common.css' rel='stylesheet'/>

那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用 link 方式來加載 css ，而不是使用 @import 方式。

談談你對canvas的理解？

canvas是HTML5中新增一個HTML5標籤與操做canvas的javascriptAPI，它能夠實如今網頁中完成動態的2D與3D圖像技術。標記和 SVG以及 VML 之間的一個重要的不一樣是，有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。 canvas能夠完成動畫、遊戲、圖表、圖像處理等原來須要Flash完成的一些功能。

WebSocket與消息推送？

B/S架構的系統多使用HTTP協議，

HTTP協議的特色： 1 無狀態協議 2 用於經過 Internet發送請求消息和響應消息 3 使用端口接收和發送消息，默認爲80端口底層通訊仍是使用Socket完成。

HTTP協議決定了服務器與客戶端之間的鏈接方式，沒法直接實現消息推送（ F5 已壞） , 一些變相的解決辦法：

雙向通訊與消息推送

輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後立刻返回響應信息並關閉鏈接。

優勢：後端程序編寫比較容易。

缺點：請求中有大半是無用，浪費帶寬和服務器資源。

實例：適於小型應用。

長輪詢：客戶端向服務器發送Ajax請求，服務器接到請求後hold 住鏈接，直到有新消息才返回響應信息並關閉鏈接，客戶端處理完響應信息後再向服務器發送新的請求。

優勢：在無消息的狀況下不會頻繁的請求，耗費資小。

缺點：服務器hold鏈接會消耗資源，返回數據順序無保證，難於管理維護。 Comet 異步的 ashx ，

實例：WebQQ、 Hi 網頁版、 FacebookIM 。

長鏈接：在頁面裏嵌入一個隱蔵iframe，將這個隱蔵 iframe的 src 屬性設爲對一個長鏈接的請求或是採用 xhr 請求，服務器端就能源源不斷地往客戶端輸入數據。

優勢：消息即時到達，不發無用請求；管理起來也相對便。

缺點：服務器維護一個長鏈接會增長開銷。

實例：Gmail聊天

Flash Socket：在頁面中內嵌入一個使用了Socket 類的 Flash 程序 JavaScript 經過調用此 Flash 程序提供的 Socket 接口與服務器端的 Socket 接口進行通訊， JavaScript 在收到服務器端傳送的信息後控制頁面的顯示。

優勢：實現真正的即時通訊，而不是僞即時。

缺點：客戶端必須安裝Flash插件；非 HTTP 協議，沒法自動穿越防火牆。

實例：網絡互動遊戲。

Websocket:

WebSocket是 HTML5 開始提供的一種瀏覽器與服務器間進行全雙工通信的網絡技術。依靠這種技術能夠實現客戶端和服務器端的長鏈接，雙向實時通訊。

特色:

a、事件驅動

b、異步

c、使用 ws 或者 wss 協議的客戶端 socket

d、可以實現真正意義上的推送功能

缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。

img的title和alt有什麼區別？

·Alt 用於圖片沒法加載時顯示Title 爲該屬性提供信息，一般當鼠標滑動到元素上的時候顯示

表單的基本組成部分有哪些，表單的主要用途是什麼？

組成：表單標籤、表單域、表單按鈕

a、表單標籤：這裏麪包含了處理表單數據所用 CGI 程序的 URL, 以及數據提交到服務器的方法。

b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、和文件上傳框等。

c、表單按鈕：包括提交按鈕，復位按鈕和通常按鈕；用於將數據傳送到服務器上的 CGI 腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。

主要用途：表單在網頁中主要負責數據採集的功能，和向服務器傳送數據。

表單提交中Get和Post方式的區別？

(1)、 get 是從服務器上獲取數據，post 是向服務器傳送數據。

(2)、 get 是把參數數據隊列加到提交表單的 ACTION 屬性所指的 URL 中，值和表單內各個字段一一對應，在 URL 中能夠看到。 post 是經過 HTTP post 機制，將表單內各個字段與其內容放置在 HTML HEADER 內一塊兒傳送到 ACTION 屬性所指的 URL 地址 , 用戶看不到這個過程。

(3)、對於 get 方式，服務器端用Request.QueryString 獲取變量的值，對於 post 方式，服務器端用 Request.Form 獲取提交的數據。

(4)、 get 傳送的數據量較小，不能大於2KB 。 post 傳送的數據量較大，通常被默認爲不受限制。但理論上， IIS4 中最大量爲 80KB ， IIS5 中爲 100KB 。

(5)、 get 安全性很是低， post 安全性較高。

HTML5 有哪些新增的表單元素？（以前是HTML4.01）

· datalist

· datetime

· output

· keygen

· date

· month

· week

· time

· color

· number

· range

· email

· Url

HTML5 廢棄了哪些 HTML4 標籤？

· frame

· frameset

· noframe

· applet

· big

· center

· basefront

HTML5 標準提供了哪些新的 API？

· Media API

· Text Track API

· Application CacheAPI

· User Interaction

· Data Transfer API

· Command API

· ConstraintValidation API

· History API

HTML5 存儲類型有什麼區別？

HTML5 可以本地存儲數據，在以前都是使用 cookies 使用的。 HTML5 提供了下面兩種本地存儲方案：

· localStorage 用於持久化的本地存儲，數據永遠不會過時，關閉瀏覽器也不會丟失。

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

HTML5 應用程序緩存和瀏覽器緩存有什麼區別？

應用程序緩存是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程序能夠獲取本地的網站內容，例如 HTML 、 CSS 、圖片以及 JavaScript 。這個特性能夠提升網站性能，它的實現藉助於 manifest 文件，以下：

<!doctypehtml>

<htmlmanifest=」example.appcache」>

…..

</html>

與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存。

HTML5 Canvas 元素有什麼用？

Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做，

</canvas>

除了 audio 和 video，HTML5 還有哪些媒體標籤？

<source> 對於定義多個數據源頗有用。

</video>

<track> 標籤爲諸如 video 元素之類的媒介規定外部文本軌道。用於規定字幕文件或其餘包含文本的文件，當媒介播放時，這些文件是可見的。

</video>

據源頗有用。標籤爲諸如 video 元素之類的媒介規定外部文本軌道。用於規定字幕文件或其餘包含文本的文件，當媒介播放時，這些文件是可見的。

HTML5 中如何嵌入視頻？

和音頻相似，HTML5 支持 MP4 、 WebM 和 Ogg 格式的視頻，下面是簡單示例：

Your browser does’ nt support videoembedding feature.

</video>

HTML5 中如何嵌入音頻？

HTML5 支持 MP3 、 Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：

Your browser does’ nt support audioembedding feature.

</audio>

新的 HTML5 文檔類型和字符集是？

HTML5 文檔類型很簡單：

<!doctypehtml>

HTML5 使用 UTF-8 編碼示例：

解釋一下CSS的盒子模型？

回答一：

a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度

b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

c、這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。CSS盒子模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。

回答二：

盒子模型也有人稱爲框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每一個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。

請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？

請你說說CSS有什麼特殊性?（優先級、計算特殊值）

優先級

(1)、同類型，同級別的樣式後者先於前者

(2))、ID > 類樣式 > 標籤 > *

(3)、內聯>ID選擇器>僞類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式

(4)、具體 > 泛化的，特殊性即css優先級

(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)

內嵌樣式：內嵌在元素中，<spanstyle="color:red">span</span>

內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式

外聯樣式表：單獨存在一個css文件中，經過link引入或import導入的樣式

(6)、!important 權重最高，比 inlinestyle 還要高

計算特殊性值

important > 內嵌 > ID> 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符

權重、特殊性計算法：

CSS樣式選擇器分爲4個等級，a、b、c、d

(1)、若是樣式是行內樣式（經過Style=「」定義），那麼a=1，1,0,0,0

(2)、b爲ID選擇器的總數0,1,0,0

(3)、c爲屬性選擇器，僞類選擇器和class類選擇器的數量。0,0,1,0

(4)、d爲標籤、僞元素選擇器的數量0,0,0,1

(5)、!important 權重最高，比 inlinestyle 還要高

好比結果爲：1093比1100，按位比較，從左到右，只要一位高於則當即勝出，不然繼續比較。

要動態改變層中內容能夠使用的方法？

innerHTML，innerText

常見瀏覽器兼容性問題與解決方案？

(1)瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣

問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。

碰到頻率:100%

解決方案：CSS裏*{margin:0;padding:0;}

備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

(2)瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）

解決方案：在float的標籤樣式控制中加入display:inline;將其轉化爲行內屬性

備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

(3)瀏覽器兼容問題三：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height小於你設置的高度。

備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

(4)瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

碰到概率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

(5) 瀏覽器兼容問題五：圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

碰到概率：20%

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

(6) 瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

碰到概率：5%

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px;height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

(7)瀏覽器兼容問題七：透明度的兼容CSS設置

通常在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，通常就是直接使用opacity:0,對於兼容的，通常的作法就是在書寫css樣式的將2個都寫上就行，就能實現兼容

列出display的值並說明他們的做用？

默認值：inline

none：隱藏對象。與visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間

inline：指定對象爲內聯元素。

block：指定對象爲塊元素。

list-item：指定對象爲列表項目。

inline-block：指定對象爲內聯塊元素。（CSS2）

table：指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）

inline-table：指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）

table-caption：指定對象做爲表格標題。類同於html標籤<caption>（CSS2）

table-cell：指定對象做爲表格單元格。類同於html標籤<td>（CSS2）

table-row：指定對象做爲表格行。類同於html標籤<tr>（CSS2）

table-row-group：指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）

table-column：指定對象做爲表格列。類同於html標籤<col>（CSS2）

table-column-group：指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）

table-header-group：指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）

table-footer-group：指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）

run-in：根據上下文決定對象是內聯對象仍是塊級對象。（CSS3）

box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（css3）

inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

如何居中div, 如何居中一個浮動元素?

(1)、非浮動元素居中：能夠設置margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等

(2)、浮動元素居中:

方法一:設置當前div的寬度，而後設置margin-left:50%;position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時左浮動，而後父元素相對左移動50%，再而後子元素相對左移動-50%。

方法三:position定位等等。

CSS中 link 和@import 的區別是？

(1)、link屬於HTML標籤，而@import是CSS提供的;

(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3)、import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4)、link方式的樣式的權重高於@import的權重.

請列舉幾種清除浮動的方法(至少兩種)?

(1)、父級div定義 height

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。

優勢：簡單、代碼少、容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題

建議：不推薦使用，只建議高度固定的佈局時使用

(2)、結尾處加空div標籤 clear:both

原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度

優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差

建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法

(3)、父級div定義僞類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減小CSS代碼。

(4)、父級div定義overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優勢：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

(5)、父級div定義overflow:auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度

優勢：簡單、代碼少、瀏覽器支持好

缺點：內部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

block，inline和inlinke-block細節對比？

• display:block

a、block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。

b、block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。

c、block元素能夠設置margin和padding屬性。

• display:inline

a、inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。

b、inline元素設置width,height屬性無效。

c、inline元素的margin和padding屬性，水平方向的padding-left,padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top,padding-bottom, margin-top, margin-bottom不會產生邊距效果。

•display:inline-block

a、簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

補充說明

a、通常咱們會用display:block，display:inline或者display:inline-block來調整元素的佈局級別，其實display的參數遠遠不止這三種，僅僅是比較經常使用而已。

b、IE（低版本IE）原本是不支持inline-block的，因此在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

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

優雅降級： Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.

漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

說說浮動元素會引發的問題和你的解決辦法

問題：

（1）父元素的高度沒法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素會跟隨其後

（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對於問題(1)，添加以下樣式，給父元素添加clearfix樣式：

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

.clearfix{display:inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

(1)、額外標籤法，<divstyle="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）

(2)、使用after僞類

#parent:after{

content:"";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮動外部元素

(4)、設置`overflow`爲`hidden`或者auto

你有哪些性能優化的方法？

回答一：

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

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

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

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

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

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

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

回答二：

(1)、減小HTTP請求次數

(2)、使用CDN

(3)、避免空的src和href

(4)、爲文件頭指定Expires

(5)、使用gzip壓縮內容

(6)、把CSS放到頂部

(7)、把JS放到底部

(8)、避免使用CSS表達式

(9)、將CSS和JS放到外部文件中

(10)、避免跳轉

(11)、可緩存的AJAX

(12)、使用GET來完成AJAX請求

爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是：* {padding: 0; margin: 0;} （不建議）

解釋下浮動和它的工做原理？清除浮動的技巧？

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

(1)、使用空標籤清除浮動。

這種方法是在全部浮動標籤後面添加一個空標籤定義cssclear:both. 弊端就是增長了無心義標籤。

(2)、使用overflow。

給包含浮動元素的父標籤添加css屬性overflow:auto; zoom:1; zoom:1用於兼容IE6。

(3)、使用after僞對象清除浮動。

該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

談談你對CSS中刻度的認識？

在CSS中刻度是用於設置元素尺寸的單位。

a、特殊值0能夠省略單位。例如：margin:0px能夠寫成margin:0

b、一些屬性可能容許有負長度值，或者有必定的範圍限制。若是不支持負長度值，那應該變換到可以被支持的最近的一個長度值。

c、長度單位包括：相對單位和絕對單位。

相對長度單位有： em, ex, ch,rem, vw, vh, vmax, vmin

絕對長度單位有： cm, mm, q,in, pt, pc, px

絕對長度單位：1in = 2.54cm =25.4 mm = 72pt = 6pc = 96px

文本相對長度單位：em

相對長度單位是相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)

body { font-size:14px; }

h1 { font-size:16px; }

.size1 p {font-size: 1em; }

.size2 p {font-size: 2em; }

.size3 p {font-size: 3em; }

文本相對長度單位：rem

rem是CSS3新增的一個相對單位（rootem，根em），相對於根元素(即html元素)font-size計算值的倍數

只相對於根元素的大小

瀏覽器的默認字體大小爲16像素，瀏覽器默認樣式也稱爲useragent stylesheet，就是全部瀏覽器內置的默認樣式，多數是能夠被修改的，但chrome不能直接修改，能夠被用戶樣式覆蓋。

請你說說em與rem的區別？

rem

rem是CSS3新增的一個相對單位（rootem，根em），相對於根元素(即html元素)font-size計算值的倍數

只相對於根元素的大小

rem（font size ofthe root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。

做用：利用rem能夠實現簡單的響應式佈局，能夠利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，之前的天貓tmall就使用這種辦法

文本相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)

em（font size ofthe element）是指相對於父元素的字體大小的單位。它與rem之間其實很類似，區別在。（相對是的HTML元素的字體大，默認16px）

em與rem的重要區別：它們計算的規則一個是依賴父元素另外一個是依賴根元素計算

請你說說box-sizing屬性的的用法？

設置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但佔有頁面位置還要加上margin) 此屬性表現爲標準模式下的盒模型。

b、box-sizing:border-box： padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現爲怪異模式下的盒模型。

瀏覽器標準模式和怪異模式之間的區別是什麼？

在「標準模式」(StandardsMode) 頁面按照 HTML 與 CSS 的定義渲染，而在「怪異模式」(Quirks Mode)就是瀏覽器爲了兼容很早以前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式。瀏覽器基於頁面中文件類型描述的存在以決定採用哪一種渲染模式；若是存在一個完整的`DOCTYPE`則瀏覽器將會採用標準模式，而若是它缺失則瀏覽器將會採用怪異模式。

強烈建議閱讀加深理解：[怪異模式（QuirksMode）對 HTML 頁面的影響](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，這裏列下瀏覽器標準模式和怪異模式的區別：

（1）盒模型：

在怪異模式下，盒模型爲IE盒模型而非標準模式下的W3C盒模型：在 IE 盒模型中，

box width =content width + padding left + padding right + border left + border right，

box height =content height + padding top + padding bottom + border top + border bottom。

而在 W3C 標準的盒模型中，box 的大小就是 content的大小。

（2）圖片元素的垂直對齊方式:

對於`inline`元素和`table-cell`元素，在 IEStandards Mode 下 vertical-align 屬性默認取值爲`baseline`。而當`inline`元素的內容只有圖片時，如`table`的單元格`table-cell`。在 IE Quirks Mode 下，`table`單元格中的圖片的 `vertical-align` 屬性默認爲`bottom`，所以，在圖片底部會有幾像素的空間。

（3）`<table>`元素中的字體:

CSS 中，描述`font`的屬性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述屬性都是能夠繼承的。而在 IE Quirks Mode 下，對於`table` 元素，字體的某些屬性將不會從`body`或其餘封閉元素繼承到`table`中，特別是 `font-size`屬性。

（4）內聯元素的尺寸:

在 IE Standards Mode 下，non-replacedinline 元素沒法自定義大小，而在 IE Quirks Mode 下，定義這些元素的`width`和`height` 屬性，可以影響該元素顯示的大小尺寸。

（5）元素的百分比高度:

a、CSS 中對於元素的百分比高度規定以下，百分比爲元素包含塊的高度，不可爲負值。若是包含塊的高度沒有顯式給出，該值等同於「auto」（即取決於內容的高度）。因此百分比的高度必須在父元素有聲明高度時使用。

b、當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。

（6）元素溢出的處理：

在 IE Standard Mode 下，`overflow`取默認值`visible`，即溢出可見，這種狀況下，溢出內容不會被裁剪，呈如今元素框外。而在 Quirks Mode 下，該溢出被當作擴展`box`來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。

怪異Quirks模式是什麼，它和標準Standards模式有什麼區別？

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。

在IE6以前CSS還不夠成熟，因此IE5等以前的瀏覽器對CSS的支持不好， IE6將對CSS提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而若是IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是這個參數不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是相似這樣作的，它將DTD當成了這個「參數」，由於之前的頁面你們都不會去寫DTD，因此IE6就假定若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：整體會有佈局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下能夠使元素水平居中，但在quirks模式下卻會失效。

（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是看文章看的，甚至徹底不知道。）

說說你對邊距摺疊的理解?

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）

相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係

垂直方向外邊距合併計算:

a、參加摺疊的margin都是正值：取其中margin 較大的值爲最終 margin 值。

b、參與摺疊的 margin都是負值：取的是其中絕對值較大的，而後，從 0 位置，負向位移。

c、參與摺疊的 margin中有正值，有負值：先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。

說說隱藏元素的方式有哪些？

a、使用CSS的display:none，不會佔有原來的位置

b、使用CSS的visibility:hidden，會佔有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會佔有原來的位置

爲何重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

每種瀏覽器都有一套默認的樣式表，即useragent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

c、normalize：也許有些cssreset過於簡單粗暴，有點傷及無辜，normalize是另外一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了通常化。

談談你對BFC與IFC的理解？(是什麼，如何產生，做用)

(1)、什麼是BFC與IFC

a、BFC（Block FormattingContext）即「塊級格式化上下文」， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你能夠把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生做用。

b、BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也能夠說BFC就是一個做用範圍。

c、在普通流中的 Box(框) 屬於一種formatting context(格式化上下文) ，類型能夠是 block ，或者是 inline ，但不能同時屬於這二者。而且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 裏格式化， Inlineboxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 裏格式化。

(2)、如何產生BFC

當一個HTML元素知足下面條件的任何一點，均可以產生Block Formatting Context：

a、float的值不爲none

b、overflow的值不爲visible

c、display的值爲table-cell,table-caption, inline-block中的任何一個

d、position的值不爲relative和static

CSS3觸發BFC方式則能夠簡單描述爲：在元素定位非static，relative的狀況下觸發，float也是一種定位方式。

(3)、BFC的做用與特色

a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

若是一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態，當float不爲none時，position爲absolute、fixed時元素將脫離標準流。

說說你對頁面中使用定位(position)的理解？

如何解決多個元素重疊問題？ z-index

頁面佈局的方式有哪些？

（1）、雙飛翼佈局

經典三列布局，也叫作聖盃佈局【HolyGrail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：

a、三列布局，中間寬度自適應，兩邊定寬；

b、中間欄要在瀏覽器中優先展現渲染；

c、容許任意列的高度最高；

d、要求只用一個額外的DIV標籤；

e、要求用最簡單的CSS、最少的HACK語句；

在不增長額外標籤的狀況下，聖盃佈局已經很是完美，聖盃佈局使用了相對定位，之後佈局是有侷限性的，並且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增長多一個div就能夠不用相對佈局了，只用到了浮動和負邊距，這就是咱們所說的雙飛翼佈局。

(2)、多欄佈局

a、欄柵格系統：就是利用浮動實現的多欄佈局，在bootstrap中用的很是多。

b、多列布局：柵格系統並無真正實現分欄效果（如word中的分欄），CSS3爲了知足這個要求增長了多列布局模塊

(3)、彈性佈局（Flexbox）

CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（FlexibleBox），用來提供一個更加有效的方式制定、調整和分佈一個容器裏項目佈局，即便它們的大小是未知或者動態的，這裏簡稱爲Flex。

Flexbox佈局經常使用於設計比較複雜的頁面，能夠輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減小了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。

Flexbox佈局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你能夠調節伸縮項目的相對大小和位置。例如，你能夠確保伸縮容器中的多餘空間平均分配多個伸縮項目，固然，若是你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據必定的比例減小伸縮項目的大小，使其不溢出伸縮容器。

綜合而言，Flexbox佈局功能主要具備如下幾點：

a、屏幕和瀏覽器窗口大小發生改變也能夠靈活調整佈局；

b、能夠指定伸縮項目沿着主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；

c、能夠指定伸縮項目沿着主軸或側軸將伸縮容器額外空間，分配到伸縮項目以前、以後或之間；

d、能夠指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；

e、能夠控制元素在頁面上的佈局方向；

f、能夠按照不一樣於文檔對象模型（DOM）所指定排序方式對屏幕上的元素從新排序。也就是說能夠在瀏覽器渲染中不按照文檔流前後順序重排伸縮項目順序。

(4)、瀑布流佈局

瀑布流佈局是流式佈局的一種。是當下比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。最先採用此佈局的網站是Pinterest，逐漸在國內流行開來。

優勢

a、有效的下降了界面複雜度，節省了空間：咱們再也不須要臃腫複雜的頁碼導航連接或按鈕了。

b、對觸屏設備來講，交互方式更符合直覺：在移動應用的交互環境當中，經過向上滑動進行滾屏的操做已經成爲最基本的用戶習慣，並且所須要的操做精準程度遠遠低於點擊連接或按鈕。

c、更高的參與度：以上兩點所帶來的交互便捷性能夠使用戶將注意力更多的集中在內容而不是操做上，從而讓他們更樂於沉浸在探索與瀏覽當中。

缺點

a、有限的用例：

無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。

例如，在電商網站當中，用戶時常須要在商品列表與詳情頁面之間切換，這種狀況下，傳統的、帶有頁碼導航的方式能夠幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。

b、額外的複雜度：

那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會須要在本身的產品中進行不一樣程度的定製化處理，以知足大家本身的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也良莠不齊，你必須作好充分的測試與調整工做。

c、再見了，頁腳：

若是使用了比較典型的無限滾動加載模式，這就意味着你能夠和頁腳說拜拜了。

最好考慮一下頁腳對於你的網站，特別是用戶的重要性;若是其中確實有比較重要的內容或連接，那麼最好換一種更傳統和穩妥的方式。

千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻由於自動加載的內容忽然出現而不管如何都沒法點擊頁腳中的連接時，他們會變的愈加憤怒。

d、集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來講，在這方面進行冒險是很不划算的。

e、關於頁面數量的印象：

其實站在用戶的角度來看，這一點並不是負面;不過，若是對於你的網站來講，經過更多的內容頁面展現更多的相關信息(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。

(5)、流式佈局（Fluid）

固定佈局和流式佈局在網頁設計中最經常使用的兩種佈局方式。固定佈局能呈現網頁的原始設計效果，流式佈局則不受窗口寬度影響，流式佈局使用百分比寬度來限定佈局元素，這樣能夠根據客戶端分辨率的大小來進行合理的顯示。

(6)、響應式佈局

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

優勢

a、面對不一樣分辨率設備靈活性強

b、可以快捷解決多設備顯示適應問題

缺點

a、兼容各類設備工做量大，效率低下

b、代碼累贅，會出現隱藏無用的元素，加載時間加長

c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

d、必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

overfloa:hidden是否造成新的塊級格式化上下文？

會造成，觸發BFC的條件有：

- float的值不爲none。

- overflow的值不爲visible。

- display的值爲table-cell,table-caption, inline-block 中的任何一個。

- position的值不爲relative 和static。

請你談談Cookie的弊端

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

第一：每一個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和以後的版本最後能夠有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有作硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

IE 提供了一種存儲能夠持久化用戶數據，叫作uerData，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

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

1.經過良好的編程，控制保存在cookie中的session對象的大小。

2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

簡單說一下瀏覽器本地存儲是怎樣的

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

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

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

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

web storage和cookie的區別

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等

CSS中 link 和@import 的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4) link方式的樣式的權重高於@import的權重.

position三大定位機制，css盒子模型，css選擇器及優先級，

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

CSS 選擇符：

1.id選擇器(# myid)

2.類選擇器(.myclassname)

3.標籤選擇器(div,h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul >li)

6.後代選擇器(li a)

7.通配符選擇器( * )

8.屬性選擇器(a[rel ="external"])

9.僞類選擇器(a:hover, li:nth-child)

可繼承的樣式：

1.font-size

2.font-family

3.color

4.text-indent

不可繼承的樣式：

1.border

2.padding

3.margin

4.width

5.height

優先級算法：

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

2.載入樣式以最後載入的定位爲準;

3.!important> id > class > tag

4.important 比內聯優先級高，但內聯比 id 要高

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> 元素。

:enabled :disabled控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器多背景 rgba

5. 在CSS3中惟一引入的僞元素是::selection.

6. 媒體查詢，多欄佈局

7. border-image

對BFC規範的理解？

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

解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position"的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了 http2。

說說你對語義化的理解？

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

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

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

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

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

1.<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。

2. 嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。

3. 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

4. DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

1. 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

2. HTML 4.01 規定了三種文檔類型：Strict、Transitional以及 Frameset。

3. XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional以及 Frameset。

4. Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

HTML與XHTML——二者有什麼區別？

1. 全部的標記都必需要有一個相應的結束標記

2. 全部標籤的元素和屬性的名字都必須使用小寫

3. 全部的 XML 標記都必須合理嵌套

4. 全部的屬性必須用引號"" 括起來

5. 把全部 < 和 & 特殊符號用編碼表示

6. 給全部屬性賦一個值

7. 不要在註釋內容中使用"--"

8. 圖片必須有說明文字

html常見兼容性問題？

1. png24位的圖片在iE6瀏覽器上出現背景

解決方案：作成PNG8，也能夠引用一段腳本處理.

2. 瀏覽器默認的margin和padding不一樣

解決方案：加一個全局的*{margin:0;padding:0;} 來統一。

3. IE6雙邊距bug：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。

#box{ float:left;width:10px; margin:0 0 0 10px;}

這種狀況之下IE會產生20px的距離

解決方案：在float的標籤樣式控制中加入_display:inline; 將其轉化爲行內屬性。( _ 這個符號只有ie6會識別)

4. 漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用 "+"將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

.bb{

background-color:#f1ee18; /*全部識別*/

.background-color:#00deff\9; /*IE六、七、8識別*/

+background-color:#a200ff; /*IE六、7識別*/

_background-color:#1e0bd1; /*IE6識別*/

}

5.IE下，能夠使用獲取常規屬性的方法來獲取自定義屬性，也能夠使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性

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

6. IE下，event對象有 x、y 屬性，可是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，可是沒有 x、y 屬性

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

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

解決方法：可經過加入 CSS 屬性-webkit-text-size-adjust: none; 解決

8. 超連接訪問事後 hover樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了

解決方法：改變CSS屬性的排列順序L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

9. 怪異模式問題：漏寫 DTD聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫 DTD 聲明的好習慣。如今能夠使用[html5](http://www.w3.org/TR/html5/single-page.html) 推薦的寫法：<!DOCTYPEhtml>

10. 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。

解決方法：養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

11. ie6對png圖片格式支持很差

解決方案：引用一段腳本處理

解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1. 使用空標籤清除浮動。

這種方法是在全部浮動標籤後面添加一個空標籤定義cssclear:both. 弊端就是增長了無心義標籤。

2. 使用overflow。

給包含浮動元素的父標籤添加css屬性overflow:auto; zoom:1; zoom:1用於兼容IE6。

3. 使用after僞對象清除浮動。

浮動元素引發的問題和解決辦法？

浮動元素引發的問題：

1. 父元素的高度沒法被撐開，影響與父元素同級的元素

2. 與浮動元素同級的非浮動元素會跟隨其後

3. 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法：

使用 CSS 中的clear:both; 屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：

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

.clearfix{display:inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

1. 額外標籤法，<divstyle="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）

2. 使用after僞元素

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3. 浮動外部元素

4. 設置 overflow 爲 hidden 或者 auto

IE 8如下版本的瀏覽器中的盒模型有什麼不一樣：

IE8如下瀏覽器的盒模型中定義的元素的寬高包括內邊距和邊框（？？？）

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

1. 建立新節點

createDocumentFragment()// 建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode()// 建立一個文本節點

2. 添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子節點前插入一個新的子節點

3. 查找

getElementsByTagName()// 經過標籤名稱

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

getElementById()// 經過元素Id，惟一性

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

新特性：

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

1. 拖拽釋放(Drag anddrop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、視頻API(audio,video)

4. 畫布(Canvas)API

5. 地理(Geolocation)API

6. 本地離線存儲localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控件，calendar、date、time、email、url、search

9. 新的技術webworker,websocket, Geolocation

移除的元素：

1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；

2. 對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

1. IE8/IE7/IE6支持經過document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

<!--[if lt IE9]>

<![endif]-->

如何區分HTML和HTML5：

DOCTYPE聲明，新增的結構元素、功能元素

iframe的優缺點？

優勢：

1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2. Security sandbox

3. 並行加載腳本

缺點：

1. iframe會阻塞主頁面的Onload事件

2. 即時內容爲空，加載也須要時間

3. 沒有語意

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

調用 localstorge、cookies 等本地存儲方式

webSocket 如何兼容低瀏覽器？

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

請說出三種減小頁面加載時間的方法：

1. 優化圖片

2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3. 優化CSS（壓縮合並css，如margin-top, margin-left...)

4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼文件類型，或者是目錄。）

5. 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了）

6. 減小http請求（合併文件，合併圖片）

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash OfUnstyled Content 文檔樣式閃爍

<styletype="text/css" media="all">@import"../fouc.css";</style>

而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。

null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0

undefined是一個表示"無"的原始值，轉爲數值時爲NaN

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

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

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

1. 變量被聲明瞭，但沒有賦值時，就等於 undefined

2. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined

3. 對象沒有賦值的屬性，該屬性的值爲 undefined

4. 函數沒有返回值時，默認返回undefined

null表示「沒有對象」，即該處不該該有值。典型用法是：

1. 做爲函數的參數，表示該函數的參數不是對象

2. 做爲對象原型鏈的終點

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

1. 建立一個空對象，而且this 變量引用該對象，同時還繼承了該函數的原型

2. 屬性和方法被加入到this 引用的對象中

3. 新建立的對象由 this 所引用，而且最後隱式的返回this

對JSON 的瞭解？（學習）

JSON(JavaScriptObject Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。

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

1. defer和async

2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）

3. 按需異步載入js

如何解決跨域問題?

1. jsonp（jsonp 的原理是動態插入script 標籤）

2. document.domain+ iframe

3. window.name、window.postMessage

4. 服務器上設置代理頁面

documen.write和 innerHTML 的區別：

document.write 只能重繪整個頁面

innerHTML 能夠重繪頁面的一部分

.call() 和 .apply() 的做用？（學習）

動態改變某個類的某個方法的運行環境

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

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

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

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

2. 閉包

3. 控制檯日誌

4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

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

經過判斷 Global 對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中。即「node中的全局變量是global ,瀏覽器的全局變量是window，經過該全局變量是否認義來判斷宿主環境」

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

1. 優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。

2. 漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

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

優勢：

1. 由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

2. 與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

缺點：

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變。

2. 缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子（第三方庫如今已經很豐富了，因此這個缺點能夠說不存在了）。

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

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

1. 實現界面交互

2. 提高用戶體驗

3. 有了Node.js，前端能夠實現服務端的一些事情

前景：

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

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

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

4. 作好的頁面結構，頁面重構和用戶體驗；

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

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

你有哪些性能優化的方法？

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

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

3. 用 innerHTML 代替 DOM 操做，減小 DOM 操做次數，優化javascript 性能

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

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

6. 避免使用 CSSExpression（css表達式)又稱 Dynamic properties(動態屬性)

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

http狀態碼有那些？分別表明是什麼意思？（網絡課本）

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：

1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。

2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。

4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊

簡單來講，瀏覽器會解析 HTML 生成 DOM Tree，其次會根據 CSS 生成 CSS RuleTree，而 javascript 又能夠根據 DOM API 操做 DOM

平時如何管理你的項目？

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

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

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

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

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

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

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

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

最流行的一些東西：

1. node.js

2. MongoDB

3. npm

4. MVVM

5. MEAN

6. three.js

7. react

常去的網站：

1. 牛客網

2. Github

3. CSDN

javascript對象的幾種建立方式

1. 工廠模式

2. 構造函數模式

3. 原型模式

4. 混合構造函數和原型模式

5. 動態原型模式

6. 寄生構造函數模式

7. 穩妥構造函數模式

javascript繼承的 6 種方法

1. 原型鏈繼承

2. 借用構造函數繼承

3. 組合繼承(原型+借用構造)

4. 原型式繼承

5. 寄生式繼承

6. 寄生組合式繼承

ajax 的過程是怎樣的

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

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

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

異步加載和延遲加載

1. 異步加載的方案：動態插入 script 標籤

2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

3. script 標籤上添加 defer 或者 async 屬性

4. 建立並插入 iframe，讓它異步執行 js

5. 延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的

前端的安全問題？

1. XSS

2. sql注入

3. CSRF：是跨站請求僞造，很明顯根據剛剛的解釋，他的核心也就是請求僞造，經過僞造身份提交POST和GET請求來進行跨域的攻擊

完成CSRF須要兩個步驟：

1. 登錄受信任的網站A，在本地生成 COOKIE

2. 在不登出A的狀況下，或者本地COOKIE 沒有過時的狀況下，訪問危險網站B。

ie 各版本和 chrome 能夠並行下載多少個資源

1. IE6 2 個併發

2. iE7 升級以後的 6 個併發，以後版本也是 6 個

3. Firefox，chrome 也是6個

javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享

用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量

Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：

1. Flash適合處理多媒體、矢量圖形、訪問機器

2. 對CSS、處理文本上不足，不容易被搜索

Ajax：

1. Ajax對CSS、文本支持很好，支持搜索

2. 多媒體、矢量圖形、機器訪問不足

共同點：

1. 與服務器的無刷新傳遞消息

2. 能夠檢測用戶離線和在線狀態

2. 操做DOM

請解釋一下 JavaScript 的同源策略。

概念：

同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制：

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

什麼是 "usestrict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。

設立"嚴格模式"的目的，主要有如下幾個：

1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；

3. 提升編譯器效率，增長運行速度；

4. 爲將來新版本的Javascript作好鋪墊。

注：通過測試 IE6,7,8,9 均不支持嚴格模式。

缺點：

如今網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

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

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制

GET方式須要使用Request.QueryString 來取得變量的值

POST方式經過 Request.Form來獲取變量的值

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

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

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）

2. 向服務器發送大量數據（POST沒有數據量限制）

3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js 的阻塞特性：全部瀏覽器在下載 JS 的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到 JS 下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載 JS，可是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現 JS 修改 DOM 樹，須要從新構建 DOM 樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入 JS 會阻塞全部內容的呈現，而外部 JS 只會阻塞其後內容的顯示，2 種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS 怎麼會阻塞加載了？CSS 原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6 下 CSS 都是阻塞加載）

當 CSS 後面跟着嵌入的 JS 的時候，該 CSS 就會出現阻塞後面資源下載的狀況。而當把嵌入 JS 放到 CSS 前面，就不會出現阻塞的狀況了。

根本緣由：由於瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的JS 執行前先加載、解析完。而嵌入的 JS 會阻塞後面的資源加載，因此就會出現上面 CSS 阻塞下載的狀況。

嵌入JS應該放在什麼位置？

1. 放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。

2. 若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。

3. 使用 defer（只支持IE）

4. 不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用 setTimeout 來調用

Javascript無阻塞加載具體方式：

1. 將腳本放在底部。<link>仍是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標籤放在</body>前。

2. 阻塞腳本：因爲每一個<script>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。

3. 非阻塞腳本：等頁面完成加載後，再加載js代碼。也就是，在 window.onload 事件發出後開始下載代碼。

4. defer屬性：支持IE4和fierfox3.5更高版本瀏覽器

5. 動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔內容。代碼以下：

varscript=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

</script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程，即便在head裏（除了用於下載文件的 http 連接）。

eval是作什麼的？

1. 它的功能是把對應的字符串解析成JS代碼並運行

2. 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）

Node.js 的適用場景

1. 高併發

2. 聊天

3. 實時消息推送

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

1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲 null 的話，咱們就稱之爲原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

怎麼重構頁面？

1. 編寫 CSS

2. 讓頁面結構更合理化，提高用戶體驗

3. 實現良好的頁面效果和提高性能

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

1. html5 websocket

2. WebSocket 經過 Flash

3. XHR長時間鏈接

4. XHR MultipartStreaming

5. 不可見的Iframe

6. <script>標籤的長時間鏈接(可跨域)

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

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲

2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件

3.ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble= true;

Ajax 是什麼？Ajax 的交互模型？同步和異步的區別？如何解決跨域問題？（學習！！！）

Ajax 是什麼：

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax 在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

Ajax 的最大的特色：

1. Ajax能夠實現動態不刷新（局部刷新）

2. readyState 屬性狀態有5個可取值： 0 = 未初始化，1 = 啓動， 2 = 發送，3 = 接收，4 = 完成

Ajax 同步和異步的區別:

1. 同步：提交請求 ->等待服務器處理 -> 處理完畢返回，這個期間客戶端瀏覽器不能幹任何事

2. 異步：請求經過事件觸發-> 服務器處理（這是瀏覽器仍然能夠做其餘事情）-> 處理完畢

ajax.open方法中，第3個參數是設同步或者異步。

Ajax 的缺點：

1. Ajax 不支持瀏覽器 back 按鈕

2. 安全問題 Ajax 暴露了與服務器交互的細節

3. 對搜索引擎的支持比較弱

4. 破壞了程序的異常機制

5. 不容易調試

解決跨域問題：

1. jsonp

2. iframe

3. window.name、window.postMessage

4. 服務器上設置代理頁面

對網站重構的理解

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

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

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

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

3. 對於移動平臺的優化

4. 針對於 SEO 進行優化

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

6. 減小代碼間的耦合

7. 讓代碼保持彈性

8. 嚴格按規範編寫代碼

9. 設計可擴展的API

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

11. 加強用戶體驗

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

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

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

15. 採用CDN來加速資源加載

16. 對於JS DOM的優化

17. HTTP服務器的文件緩存

HTTP狀態碼及其意義

北森（青島）：

一、列舉三種以上純css實現」一個div「左半塊爲黑，右半塊爲白：

a、 border

b、shadow

二、一個頁面裏面有500個css3動畫，如何解決卡頓問題？

相關標籤/搜索

每日一句

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