Ⅰ web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
Ⅱ 前端經典面試題(包含JS、CSS、React、瀏覽器等)
防抖
節流
誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。
實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:
補充補充一個get和post在緩存方面的區別：
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key => index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：
創建map函數
遍歷尋找
在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。
**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。
虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。
具體實現步驟如下：
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。
結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊
繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少
聯系：它們都能讓元素不可見
常用的一般為三種 .clearfix , clear:both , overflow:hidden ;
比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.
clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷
overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
block 元素特點：
1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align
inline 元素特點
1.水平方向上根據 direction 依次布局
2.不會在元素前後進行換行
3.受 white-space 控制
4. margin/padding 在豎直方向上無效，水平方向上有效
5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效
GIF :
JPEG ：
PNG ：
七種數據類型
(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,
ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值
Object 為引用類型(范圍挺大),也包括數組、函數,
輸出結果是：
工廠模式
簡單的工廠模式可以理解為解決多個相似的問題;
單例模式
只能被實例化(構造函數給實例添加屬性與方法)一次
沙箱模式
將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值
發布者訂閱模式
就例如如我們關注了某一個公眾號,然後他對應的有新的消息就會給你推送,
代碼實現邏輯是用數組存貯訂閱者, 發布者回調函數裡面通知的方式是遍歷訂閱者數組,並將發布者內容傳入訂閱者數組
1.字面量
2.Object構造函數創建
3.使用工廠模式創建對象
4.使用構造函數創建對象
HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。
什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
IE只支持事件冒泡 。
獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。
那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。
我們發現Function的原型也是Function。
我們用圖可以來明確這個關系：
這里來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。
則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:
這里我們可以來看出三者的關系:
在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。
在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？
函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。
函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。
在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重復調用。
call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。
bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。
如何實現一個 bind 函數
對於實現以下幾個函數，可以從幾個方面思考
如何實現一個call函數
如何實現一個apply函數
箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。
在函數中，我們首先使用 var 關鍵字聲明了 name 變數。這意味著變數在創建階段會被提升（ JavaScript 會在創建變數創建階段為其分配內存空間），默認值為 undefined ，直到我們實際執行到使用該變數的行。我們還沒有為 name 變數賦值，所以它仍然保持 undefined 的值。
使用 let 關鍵字（和 const ）聲明的變數也會存在變數提升，但與 var 不同，初始化沒有被提升。在我們聲明（初始化）它們之前，它們是不可訪問的。這被稱為「暫時死區」。當我們在聲明變數之前嘗試訪問變數時， JavaScript 會拋出一個 ReferenceError 。
關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：
let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。
變數的賦值可以分為三個階段：
關於 let 、 var 和 function ：
依次輸出：undefined -> 10 -> 20
答案: D
colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
undefined {n:2}
首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這里首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。
在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。
我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。
這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（Ƈ'） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。
這題考察的是對象的鍵名的轉換。
catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。
之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。
在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。
Ⅲ BAT 前端工程師面試對演算法一般有怎樣的要求
當我是實習生時，我遇到了BAT三，所以我對演算法沒有要求。當然，實習生的要求也可能比較低。
阿裡面試:
一邊使用電腦直接連接到互聯網看到面試官網站,博客之類的,然後選擇一些問,並幫助考背後的標簽組件的實現和JS類繼承,等等。在第二個方面,我也看到了,GitHub,博客等等。
實際上，在工作的前端使用的演算法並不多，即使像jQuery這樣的公共庫的實現對演算法的應用也不是很好。至於何時使用，請使用NodeJs偶爾編寫自動化工具，前端WebGL矩陣操作，圖像處理，如需要，但我認為這些都超出了一般前端工程師的能力。
Ⅳ 會js能刷演算法題嗎
leecode可以用js刷題了，我大js越來越被認可了是吧。但是刷題中會因為忽略js的一些特性掉入坑裡。
前端演算法入門一：刷演算法題常用的JS基礎掃盲
前端演算法入門二：時間空間復雜度&8大數據結構的JS實現
前端演算法入門三：5大排序演算法&2大搜索&4大演算法思想
前端面試演算法高頻100題（附答案，分析思路，一題多解）。
Ⅳ 零基礎學前端還是java還是python
首推Java。真的，Python當然是好，但是對於一個新入門的人，最重要的是先找到工作不是嗎?而找工作的話，Java無疑是最容易的。相比較PHP與Python而言，Java程序員的崗位需求要大的很多，對於跨行業的人而言，最困難的其實是第一步，那就是如何進入這個行業。如果你連進都進不來，第一份工作遲遲無法開始，那麼好好努力，補上數據結構，設計模式，演算法設計這些差距就根本無從說起，不是嗎?
接著，我來談談具體的規劃。
1.
了解Java的運行環境。搞清楚path和classpath是干什麼的，怎麼在命令行進行編譯，執行。知道IDE的各個按鈕後面真正發生了什麼事情。
2.
掌握Java的語法。搞清楚包，介面，類，繼承這些基本概念。掌握多態，overwrite，死背下IO的介面，包括InputStream/OutputStream和Writer/Reader，死背下網路編程和GUI編程的介面，背JDBC介面。這一步，推薦的書是《
瘋狂Java講義》。
3.
掌握多線程編程。弄明白ConcurrencyHashMap是怎麼實現的，搞清楚synchronized是怎麼回事，弄明白為什麼要有Runnable介面。
在第二步和第三步掌握到80%的時候，你就可以考慮找工作了。
4. 在工作中體會一下設計模式。推薦《輕量級Java
EE企業應用實戰》這本書。看完裡面的Decorator，IO介面你再也不會去死記硬背了。用的時候，根據Adaptor和Decorator的命名規則，自己臨時推都推得出來。
5. 惡補數據結構。 搞清楚 LinkedList和
ArrayList的實現機制，了解它們的每一個介面的時間復雜度。同樣的還有其他容器，Map啊，Set啊，都是一樣的。棧，隊列，二叉樹，圖貫穿編程始終，如果這一步你邁不過去，那就只能在低階程序員里打轉。
6.
如果有可能，最好對一些演算法設計也有所涉獵。比如動態規則的思路，貪心演算法，諸如KMP這種奇妙的演算法等。這一步沒有數據結構那麼重要，學得好當然好，學不好也不用太挫敗。
到了這一步，你和科班程序員之間的差距就不大了。可以在工作中獨立承擔開發任務了。
瘋狂軟體教育中心專注於Java培訓，瘋狂軟體Java培訓可以有效的幫助你提升相關技能。名師講解Java設計和編程、Web前端開發、JavaEE進階、大數據核心知識等，讓你在5個半月內快速獲得理論和實踐的雙重提升。
7.
進階，這時候就可以有自己的思考了。Java發展到現在，被用在各種各樣的情景之中，說它是應用最廣泛的編程語言並不過分。你在打好基礎以後，就可以考慮應該向哪個方向發展了。比如服務端的架構，最好能學習一下JavaEE。JEE一直以來，都是讓人覺得門檻太高。這個其實可以從Spring入手，搞清楚反射，控制反轉，依賴注射都是什麼鬼(這些神叨叨的名詞其實都是為了解決Java本身不夠動態這個缺陷而出現的，這里不展開，我只想提醒的是，這些概念沒有什麼大不了的東西，不要被愛裝逼的傢伙嚇住了)。還有消息這個東西，還有ORM這個東西，都去搞搞清楚。想一下它們要解決什麼問題，再猜一下他們是怎麼實現的。我面試的時候發現，其實大多數優秀的開發者，即使以前沒思考過這個問題，讓他現場設計一下Hibernate，都能設計得差不多。這說明，這些框架性的東沒有什麼大不了的。有了基礎，你也能設計出來。關鍵是要去動腦筋想。以上是以服務端開發舉例，那麼對於客戶端，你就去思考事件響應機制是如何工作的(這個我不熟悉，就不再多說了)。還可以深入研究一下JVM的源代碼，以及其實現機制，了解一下垃圾回收演算法等等。
到了這一步，你就可以應聘Java高級開發了。如果運氣好，年薪30萬是有可能的。保底也要20萬了。
8.
架構。到了這一步，你就算是登堂入室，真正邁入高級開發人員了。這一步，你要思考更多的東西，比如，如何處理高並發，如何應對分布式系統，如何提供更健壯的數據服務。到了這一步，那就沒有什麼可以參考的，現成的東西了。全靠自己的悟性了。那最後能達到什麼高度，就不是我這個層次能點評的了。
編程的世界永遠向所有熱愛編程的人開放，這是一個自由，平等，共享的世界，我始終是這樣堅信的。
Ⅵ 前端面試一般問什麼
web前端面試會問人事方面的內容和web前端技術的內容；
人事的面試
web前端人事面試方面，需要注意如何自我介紹、性格有哪些優劣勢、職業規劃方向是什麼、你的特長是什麼、對於加班之類你是怎麼看待等人事面試內容；
web前端技術的面試
技術面試，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相關技術，比如tcp握手協議、網路安全、後端技術等；
對於web前端面試准備，建議你去看「決勝前端」（min app），它裡麵包含了很多web前端技術面試、人事面試等面試真題，而且針對面試題做了詳細的分析與解答。
我給你截圖看一下例子吧
Ⅶ 前端面試常見演算法總結(上)
近期准備面試，看了一些常見的演算法，俗話說得好，好記性不如爛筆頭，記下來好讓自己可以隨時回顧復習，寫到哪算到哪吧~
方法一：for循環
方法二：用rece高級演算法
方法一：for循環加splice方法
方法二：for循環加創建新數組
方法三：利用rece高級演算法 （emm......感慨一下，rece很牛逼呀）
/*--arr.rece(callback,[initialValue]) --*/ rece這里就先不詳細介紹了！
方法四：es6
Array.from()就是把一個類數組對象或者可迭代的對象轉換成一個真正的數組；
Set對象：
1.允許存儲任何類型的 唯一值 ，無論是原始值或者是對象引用。
2.set中的值的集合，你可以按照插入的順序迭代它的元素。
3.set中的元素只會出現一次，即 Set 中的元素是唯一的。
下面就是先用new set將數組去重存在set對象里，結果返回一個set對象，然後再用Array.from把set對象轉換成數組。
Ⅷ web前端工程師需要掌握哪些技術
1、開發語言
HTML發展歷史有二十多年，歷經多次版本更新，HTML5和CSS3的出現又是一次革新。有些人認為前端開發要掌握的技能簡單，不就是網頁製作嘛。其實不然，web前端需要掌握的核心語言HTML+CSS+JavaScript，JavaScript作為最難的語言之一，許多編程高手也不敢妄自菲薄自封精通。由於JavaScript與html的差異性，以及靜態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成的。小公司因為需要壓縮成本，就需要每個人會的越多越好，如果你嚮往項目經理發展，能懂一兩門後端語言，絕對是錦上添花。
2、瀏覽器兼容性
互聯網目前主流瀏覽器有IE6/7/8/9，Firefox，Chrome，Opera，Safari，遨遊，包括國內主流的搜狗，騰訊TT，360，the word等等；從內河上講主要有IE的，遨遊版IE，Safari，Firefox以及opera的，這些都是大家常見的，如果你身邊有老網蟲喜歡收藏瀏覽器，你翻翻他的硬碟，相信十幾款肯定是有的。每種內核對代碼的解析是不完全一樣的，即使同樣內核也可能存在很大差異，如IE和遨遊版IE。不說非主流的瀏覽器，就主流的瀏覽器，要做到完全兼容，也並非易事，需要長時間的積累和測試，需要前端開發工程師對前端端開發的熱愛和激情。
目前移動互聯網的發展趨勢也不容小覷，將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時，試想一下，走在某地風景很好，拍下來後自 動分享給各路好友，因此手機上的瀏覽器兼容也看刻不容緩，現在手機上的瀏覽器也是紛繁復雜，主流的UCWEB，safari，IE，3G門戶的，以及 symbian低端機的「殘缺兒童」，包括國外流行手機我們不知道的一些瀏覽器，更糟糕的是這些瀏覽器解析因為手機硬體的不同，每個瀏覽器得到的結果都是 完全不同的。
3.hack技術
由於不同的瀏覽器對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，這個時候就需要針對不同的瀏覽器寫不同的CSS，這個過程叫CSS hack。雖然我們寫代碼都要求按照標准，不寫hack代碼，但實際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應該是每個前端開發人員 必備的技能。
4.業內標准
目前Web前端開發中提到最多的就是W3C標准，這是一系列標準的集合，代表了互聯網發展的方向，也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證，為通過標准驗證而感到自豪，會有效推動互聯網的快速發展。
5.開發工具
目前比較流行的是Dreamweaver， 其曾經風靡一時，到現在也沒有退出歷史舞台，證明DW還是有很大優勢的，尤其是針對初學者，其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局，但現 在更提倡的是純手寫代碼，既體現技能方面的卓越，也可有效避免使用DW等工具產生的冗餘代碼。此外再掌握一些photoshop技能，即使沒有美工，也能 簡單處理一些圖像。
小結，掌握以上技能，可以說你是一個合格的前端開發人員，能夠參與到一個大的項目中，或者自己獨立寫出一個網頁。雖然這看起來和網頁製作設計差不多，從效果上來看，都是製作網頁的，但實際上，技術上所超出的已經是好幾個檔次的東西了。
Ⅸ 前端演算法入門：刷演算法題常用的 JS 基礎掃盲
此篇屬於前端演算法入門系列的第一篇，主要介紹常用的 數組方法 、 字元串方法 、 遍歷方法 、 高階函數 、 正則表達式 以及相關 數學知識 。
在尾部追加，類似於壓棧，原數組會變。
在尾部彈出，類似於出棧，原數組會變。數組的 push & pop 可以模擬常見數據結構之一：棧。
在頭部壓入數據，類似於入隊，原數組會變。
在頭部彈出數據，原數組會變。數組的 push （入隊） & shift （出隊） 可以模擬常見數據結構之一：隊列。
concat 會在當前數組尾部拼接傳入的數組，然後返回一個新數組，原數組不變。
在數組中尋找該值，找到則返回其下標，找不到則返回 -1 。
在數組中尋找該值，找到則返回 true ，找不到則返回 false 。
將數組轉化成字元串，並返回該字元串，不傳值則默認逗號隔開，原數組不變。
翻轉原數組，並返回已完成翻轉的數組，原數組改變。
從 start 開始截取到 end ，但是不包括 end
可參考 MDN：Sort [5]
將數組轉化成字元串，並返回該字元串，逗號隔開，原數組不變。
返回指定索引位置處的字元。類似於數組用中括弧獲取相應下標位置的數據。
類似數組的concat()，用來返回一個合並拼接兩個或兩個以上字元串。原字元串不變。
indexOf ,返回一個字元在字元串中首次出現的位置, lastIndexOf 返回一個字元在字元串中最後一次出現的位置。
提取字元串的片斷，並把提取的字元串作為新的字元串返回出來。原字元串不變。
使用指定的分隔符將一個字元串拆分為多個子字元串數組並返回，原字元串不變。
match() 方法可在字元串內檢索指定的值，或找到一個或多個正則表達式的匹配，並返回一個包含該搜索結果的數組。
注意事項 :如果 match 方法沒有找到匹配，將返回 null 。如果找到匹配，則 match 方法會把匹配到以數組形式返回，如果正則規則未設置全局修飾符 g ，則 match 方法返回的數組有兩個特性： input 和 index 。 input 屬性包含整個被搜索的字元串。 index 屬性包含了在整個被搜索字元串中匹配的子字元串的位置。
replace 接收兩個參數，參數一是需要替換掉的字元或者一個正則的匹配規則，參數二，需要替換進去的字元，仔實際的原理當中，參數二，你可以換成一個回調函數。
在目標字元串中搜索與正則規則相匹配的字元，搜索到，則返回第一個匹配項在目標字元串當中的位置，沒有搜索到則返回一個 -1 。
toLowerCase 把字母轉換成小寫， toUpperCase() 則是把字母轉換成大寫。
includes 、 startsWith 、 endsWith ， es6 的新增方法， includes 用來檢測目標字元串對象是否包含某個字元，返回一個布爾值， startsWith 用來檢測當前字元是否是目標字元串的起始部分，相對的 endwith 是用來檢測是否是目標字元串的結尾部分。
返回一個新的字元串對象，新字元串等於重復了指定次數的原始字元串。接收一個參數，就是指定重復的次數。原字元串不變。
最常用的 for 循環，經常用的數組遍歷，也可以遍歷字元串。
while 、 do while 主要的功能是，當滿足 while 後邊所跟的條件時，來執行相關業務。這兩個的區別是， while 會先判斷是否滿足條件，然後再去執行花括弧裡面的任務，而 do while 則是先執行一次花括弧中的任務，再去執行 while 條件，判斷下次還是否再去執行 do 裡面的操作。也就是說 do while 至少會執行一次操作 .
拷貝一份遍歷原數組。
for…of 是 ES6 新增的方法，但是 for…of 不能去遍歷普通的對象，** for…of 的好處是可以使用 break 跳出循環。**
面試官：說一下 for...in 和 for...of 區別？
返回一個布爾值 。當我們需要判定數組中的元素是否滿足某些條件時，可以使用 every / some 。這兩個的區別是， every 會去判斷判斷數組中的每一項，而 some 則是當某一項滿足條件時返回。
rece 從左到右將數組元素做「疊加」處理，返回一個值。 receRight 從右到左。
Object.keys 方法的參數是一個對象，返回一個數組。該數組的成員都是該對象自身的（而不是繼承的）所有屬性名，且只返回可枚舉的屬性。
Object.getOwnPropertyNames 方法與 Object.keys 類似，也是接受一個對象作為參數，返回一個數組，包含了該對象自身的所有屬性名。但它能返回不可枚舉的屬性。
這里羅列一些我在刷演算法題中遇到的正則表達式，如果有時間可認真學一下 正則表達式不要背 [7] 。
持續更新，敬請期待……
若一個正整數無法被除了 1 和它自身之外的任何自然數整除，則稱該數為質數（或素數），否則稱該正整數為合數。