今天我要將關(guān)注點(diǎn)放到網(wǎng)頁(yè)渲染以及其重要性上。雖然已經(jīng)有很多文章提到過(guò)這個(gè)主題了，但大部分信息都是零碎的片段。為了思考這件事情，我需要研究很多信息的來(lái)源。這也就是為什么我覺(jué)得我應(yīng)該寫(xiě)這篇文章的原因。我相信這篇文章對(duì)新手會(huì)很有用，并且對(duì)想刷新和鞏固他們已經(jīng)了解的東西的高手也同樣適用。渲染應(yīng)該從最開(kāi)始當(dāng)頁(yè)面布局被定義時(shí)就進(jìn)行優(yōu)化，樣式和腳本在頁(yè)面渲染中扮演著非常重要的角色。專(zhuān)業(yè)人員知道一些技巧以避免一些性能問(wèn)題。這篇文章不會(huì)深入研究瀏覽器的技術(shù)細(xì)節(jié)，而是提供一些通用的原則。不同瀏覽器引擎工作原理不同，這就使特定瀏覽器的學(xué)習(xí)更加復(fù)雜。瀏覽器是怎樣渲染一個(gè)頁(yè)面的？我們從瀏覽器渲染頁(yè)面的大概過(guò)程開(kāi)始說(shuō)起：由從服務(wù)器接收到的 HTML 形成 DOM（文檔對(duì)象模型）。樣式被加載和解析，形成 CSSOM（CSS 對(duì)象模型）。緊接著 DOM 和 CSSOM 創(chuàng)建了一個(gè)渲染樹(shù)，這個(gè)渲染樹(shù)是一些被渲染對(duì)象的集合（ Webkit 分別叫它們”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可見(jiàn)的元素（比如 head 標(biāo)簽和一些有 display:none 屬性的元素），渲染樹(shù)映射了 DOM 的結(jié)構(gòu)。在渲染樹(shù)中，每一個(gè)文本字符串都被當(dāng)做一個(gè)獨(dú)立的 renderer。每個(gè)渲染對(duì)象都包含了與之對(duì)應(yīng)的計(jì)算過(guò)樣式的DOM 對(duì)象（或者一個(gè)文本塊）。換句話說(shuō)，渲染樹(shù)描述了 DOM 的直觀的表現(xiàn)形式。對(duì)每個(gè)渲染元素來(lái)說(shuō)，它的坐標(biāo)是經(jīng)過(guò)計(jì)算的，這被叫做“布局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來(lái)布局所有元素（tables需要多次處理）。最后，將布局顯示在瀏覽器窗口中，這個(gè)過(guò)程叫做“繪制(painting)”。重繪當(dāng)在頁(yè)面上修改了一些不需要改變定位的樣式的時(shí)候（比如background-color,border-color,visibility)，瀏覽器只會(huì)將新的樣式重新繪制給元素（這就叫一次“重繪”或者“重新定義樣式”）。重排當(dāng)頁(yè)面上的改變影響了文檔內(nèi)容、結(jié)構(gòu)或者元素定位時(shí)，就會(huì)發(fā)生重排（或稱(chēng)“重新布局”）。重排通常由以下改變觸發(fā)：· DOM 操作（如元素增、刪、改或者改變?cè)仨樞颍??！?nbsp;內(nèi)容的改變，包括 Form 表單中文字的變化?！?nbsp;計(jì)算或改變 CSS 屬性?！?nbsp;增加或刪除一個(gè)樣式表?！?nbsp;改變”class”屬性?！?nbsp;瀏覽器窗口的操作（改變大小、滾動(dòng)窗口）?！?nbsp;激活偽類(lèi)（如:hover狀態(tài)）。瀏覽器如何優(yōu)化渲染？瀏覽器盡最大努力限制重排的過(guò)程僅覆蓋已更改的元素的區(qū)域。舉個(gè)例子，一個(gè) position 為 absolue 或 fixed 的元素的大小變化只影響它自身和子孫元素，而對(duì)一個(gè) position 為 static 的元素做同樣的操作就會(huì)引起所有它后面元素的重排。另一個(gè)優(yōu)化就是當(dāng)運(yùn)行一段Jjavascript 代碼的時(shí)候，瀏覽器會(huì)將一些修改緩存起來(lái)，然后當(dāng)代碼執(zhí)行的時(shí)候，一次性的將這些修改執(zhí)行。舉例來(lái)說(shuō)，這段代碼會(huì)觸發(fā)一次重繪和一次重排：var $body = $('body'); $body.css('padding', '1px'); // 重排, 重繪  $body.css('color', 'red'); // 重繪  $body.css('margin', '2px'); // 重排, 重繪  // 實(shí)際上只有一次重排和重繪被執(zhí)行。 如上面所說(shuō)，訪問(wèn)一個(gè)元素的屬性會(huì)進(jìn)行一次強(qiáng)制重排。如果我們給上面的代碼加上一行讀取元素屬性的代碼，這個(gè)情況就會(huì)出現(xiàn)：var $body = $('body');  $body.css('padding', '1px');  $body.css('padding'); // 這里讀取了一次元素的屬性，一次強(qiáng)制重排就會(huì)發(fā)生$body.css('color', 'red');  $body.css('margin', '2px'); 上面這段代碼的結(jié)果就是，進(jìn)行了兩次重排。因此，為了提高性能，你應(yīng)該講讀取元素屬性的代碼組織在一起（細(xì)節(jié)的例子可以看JSBin上的代碼）。有一種情況是必須觸發(fā)一次強(qiáng)制重排的。例如：給元素改變同一個(gè)屬性?xún)纱危ū热鏼argin-left），一開(kāi)始設(shè)置100px，沒(méi)有動(dòng)畫(huà)，然后通過(guò)動(dòng)畫(huà)的形式將值改為50px。具體可以看例子，當(dāng)然，我在這里會(huì)講的細(xì)節(jié)。我們從一個(gè)有transition的CSS class開(kāi)始：.has-transition {     -webkit-transition: margin-left 1s ease-out;        -moz-transition: margin-left 1s ease-out;          -o-transition: margin-left 1s ease-out;             transition: margin-left 1s ease-out;  } 然后進(jìn)行實(shí)現(xiàn)：//我們的元素默認(rèn)有"has-transition"屬性  var $targetElem = $('#targetElemId');     //刪除包含transition的class  $targetElem.removeClass('has-transition');     // 當(dāng)包含transition的class已經(jīng)沒(méi)了的時(shí)候，改變?cè)貙傩? $targetElem.css('margin-left', 100);     // 再將包含transition的class添加回來(lái)  $targetElem.addClass('has-transition');     // 改變?cè)貙傩? $targetElem.css('margin-left', 50); 上面的實(shí)現(xiàn)沒(méi)有按照期望的運(yùn)行。所有的修改都被瀏覽器緩存了，只在上面這段代碼的最后才會(huì)執(zhí)行。我們需要的是一次強(qiáng)制重排，我們可以通過(guò)進(jìn)行以下修改來(lái)實(shí)現(xiàn)：//刪除包含transition的class  $(this).removeClass('has-transition');     // 改變?cè)貙傩? $(this).css('margin-left', 100);     //觸發(fā)一次強(qiáng)制重排，從而使變化了的class或?qū)傩阅軌蛄⒓磮?zhí)行。  $(this)[0].offsetHeight;   // offsetHeight僅僅是個(gè)例子，其他的屬性也可以奏效。     // 再將包含transition的class添加回來(lái)  $(this).addClass('has-transition');     // 改變?cè)貙傩? $(this).css('margin-left', 50); 現(xiàn)在這段代碼如我們所期望的運(yùn)行了。實(shí)際的優(yōu)化建議匯總了一些有用的信息，我建議以下幾點(diǎn)：· 創(chuàng)建合法的 HTML 和 CSS ，別忘了制定文件編碼，Style 應(yīng)該寫(xiě)在 head 標(biāo)簽中，script 標(biāo)簽應(yīng)該加載 body 標(biāo)簽結(jié)束的位置?！?nbsp;試著簡(jiǎn)化和優(yōu)化 CSS 選擇器（這個(gè)優(yōu)化點(diǎn)被大多數(shù)使用 CSS 預(yù)處理器的開(kāi)發(fā)者忽略了）。將嵌套層數(shù)控制在最小。以下是 CSS 選擇器的性能排行（從最快的開(kāi)始）：ID選擇器：#idclass選擇器： .class標(biāo)簽: div相鄰的兄弟元素：a + i父元素選擇器： ul > li通配符選擇器： *偽類(lèi)和偽元素： a:hover ，你應(yīng)該記住瀏覽器處理選擇器是從右向左的，這也就是為什么最右面的選擇器會(huì)更快——#id或.class。   div * {...} // bad      .list li {...} // bad      .list-item {...} // good      #list .list-item {...} // good 在你的腳本中，盡可能的減少 DOM 的操作。把所有東西都緩存起來(lái)，包括屬性和對(duì)象（如果它可被重復(fù)使用）。進(jìn)行復(fù)雜的操作的時(shí)候，最好操作一個(gè)“離線”的元素（“離線”元素的意思是與 DOM 對(duì)象分開(kāi)、僅存在內(nèi)存中的元素），然后將這個(gè)元素插入到 DOM 中如果你使用 jQuery，遵循jQuery 選擇器最佳實(shí)踐要改變?cè)氐臉邮?，修改“class”屬性是最高效的方式之一。你要改變 DOM 樹(shù)的層次越深，這一條就越高效（這也有助于將表現(xiàn)和邏輯分開(kāi)）。盡可能的只對(duì) position 為 absolute 或 fix 的元素做動(dòng)畫(huà)。當(dāng)滾動(dòng)時(shí)禁用一些復(fù)雜的 :hover 動(dòng)畫(huà)是一個(gè)很好的主意（例如，給 body 標(biāo)簽加一個(gè) no-hover 的 class）關(guān)于這個(gè)主題的文章。想了解的細(xì)節(jié)，可以看一下這些文章：1. How browsers work2. Rendering: repaint, reflow/relayout, restyle希望這篇文章能夠?qū)δ阌兴鶐椭?！原文鏈接?nbsp;frontendbabel   翻譯： 伯樂(lè)在線 - Moejser譯文鏈接： http://blog.jobbole.com/72692/

java web指的是動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，主要做服務(wù)端應(yīng)用開(kāi)發(fā)，涉及到的技術(shù)包含java，數(shù)據(jù)庫(kù)，以及前端靜態(tài)的相關(guān)技術(shù)，整合一起才能做，而且，要做的很好，對(duì)于前端是要有一定的功底的，尤其是前端使用的是非html5技術(shù)的話，瀏覽器兼容性將會(huì)是個(gè)很大的問(wèn)題。html5只網(wǎng)頁(yè)靜態(tài)開(kāi)發(fā)語(yǔ)言，主要是對(duì)html4的改進(jìn)，它只能做靜態(tài)的網(wǎng)頁(yè)，當(dāng)然了，html5很多特效改善了在瀏覽器上的表現(xiàn)和兼容性問(wèn)題，java web開(kāi)發(fā)的前端頁(yè)面也需要用到html技術(shù)，你可以采用html5做java web 的前端技術(shù)啊，它倆不是完全的對(duì)立面，應(yīng)該來(lái)說(shuō)各有自己的用處，但是如果是做java web開(kāi)發(fā)還可能要結(jié)合呢。

前端開(kāi)發(fā)和網(wǎng)頁(yè)制作不是一個(gè)職位，即前端開(kāi)發(fā)包含網(wǎng)頁(yè)制作。網(wǎng)頁(yè)制作：一般意義上的網(wǎng)頁(yè)制作可以分為兩部分，即網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)頁(yè)排版，僅從技術(shù)上來(lái)說(shuō)，學(xué)會(huì)兩個(gè)軟件就夠了，Photoshop和Dreamweaver。前者負(fù)責(zé)設(shè)計(jì)效果圖和切圖即網(wǎng)頁(yè)設(shè)計(jì)，后者負(fù)責(zé)編寫(xiě)html代碼以及css樣式表文件，也就網(wǎng)頁(yè)排版，將切割后的圖重新按照效果圖的樣子擺放在網(wǎng)頁(yè)對(duì)應(yīng)的位置上。如果對(duì)網(wǎng)頁(yè)制作下個(gè)定義，就是用網(wǎng)頁(yè)制作工具制作網(wǎng)頁(yè)。前端開(kāi)發(fā)：到目前為止沒(méi)有一個(gè)明確的定義，甚至將后臺(tái)的某部分引入到前端開(kāi)發(fā)之中，但是聽(tīng)起來(lái)也不無(wú)道理。下面給出一個(gè)前端開(kāi)發(fā)工程師需要掌握的技能表：前端開(kāi)發(fā)工程師的核心技能：1、開(kāi)發(fā)語(yǔ)言。核心掌握的語(yǔ)言有html+css+JavaScript。html發(fā)展歷史有出現(xiàn)有二十多年，歷經(jīng)多次版本更新，JavaScript作為最難的語(yǔ)言之一，許多編程高手對(duì)之也不敢妄自菲薄自封精通。許多人都說(shuō)前端開(kāi)發(fā)要掌握的技能太簡(jiǎn)單，這是對(duì)html語(yǔ)言的一種誤解。之前由于工具和沒(méi)有較強(qiáng)邏輯性，大部分人對(duì)前端開(kāi)發(fā)很輕視。導(dǎo)致前端開(kāi)發(fā)在國(guó)內(nèi)的發(fā)展異常緩慢。即使是現(xiàn)在，許多在前端開(kāi)發(fā)的人員還不知道為什么要有html5和css3，這兩項(xiàng)技術(shù)能帶來(lái)什么革新就更不必問(wèn)了。由于JavaScript與html的差異性，以及靜動(dòng)態(tài)分開(kāi)處理的一些好處。在大公司編寫(xiě)靜態(tài)效果和動(dòng)態(tài)效果往往是分開(kāi)由不同的人完成的。小公司因?yàn)樾枰獕嚎s成本，就要求每個(gè)人會(huì)的越多越好。至于php等一些后臺(tái)語(yǔ)言，則是前端開(kāi)發(fā)的擴(kuò)展語(yǔ)言，想要成為前端開(kāi)發(fā)項(xiàng)目經(jīng)理，必須要懂得后臺(tái)實(shí)現(xiàn)的思路，并能夠?qū)懗鲞m合后臺(tái)修改的模板，不會(huì)讓他們頭大的想砸電腦。試想在DW生成的一個(gè)1MB多的頁(yè)面里出現(xiàn)了錯(cuò)誤，什么時(shí)候才能找到錯(cuò)誤的根源并解決?2、瀏覽器調(diào)試電腦上的瀏覽器，有IE6\7\8，F(xiàn)irefox，chrome，opera，safari，遨游，包括國(guó)內(nèi)主流的搜狐，騰訊TT，360，世界之窗。從內(nèi)核上講主要有IE的，遨游版IE，safari，firefox以及opera的。每種內(nèi)核對(duì)代碼的解析是不完全一樣的，即使同樣內(nèi)核也可能存在很大差異，如IE和遨游版的IE。不說(shuō)非主流的瀏覽器，就主流的8個(gè)瀏覽器，要做到完全兼容，并不是那么輕松的。需要長(zhǎng)時(shí)間的積累測(cè)試，需要前端開(kāi)發(fā)工程師對(duì)前端開(kāi)發(fā)的熱愛(ài)和激情。3、hack技術(shù)這項(xiàng)技術(shù)其實(shí)沒(méi)必要單獨(dú)列出來(lái)，前端開(kāi)發(fā)人員往往要給別的人去擦屁股，這時(shí)候hack技術(shù)就能大顯神威，提高工作效率。雖然寫(xiě)代碼都要求按照標(biāo)準(zhǔn)來(lái)，不寫(xiě)hack代碼，但實(shí)際工作中給別人擦屁股是免不了的。所以這也應(yīng)該是每個(gè)前端開(kāi)發(fā)人員必備的技能。4、業(yè)內(nèi)標(biāo)準(zhǔn)這些標(biāo)準(zhǔn)代表了互聯(lián)網(wǎng)發(fā)展的方向，也代表了前端開(kāi)發(fā)的一種信仰。寫(xiě)的代碼，都要100%通過(guò)標(biāo)準(zhǔn)驗(yàn)證，為通過(guò)標(biāo)準(zhǔn)驗(yàn)證而感到自豪。這種推動(dòng)業(yè)界發(fā)展的自豪感，是許多后臺(tái)工作人員所不能體會(huì)到的。此外一些PS等一些知識(shí)也要掌握掌握以上技能，可以說(shuō)只能算是一個(gè)合格的前端開(kāi)發(fā)人員，能夠參與到一個(gè)大的項(xiàng)目中，或者自己獨(dú)立寫(xiě)出一個(gè)網(wǎng)頁(yè)。此時(shí)和網(wǎng)頁(yè)制作設(shè)計(jì)的區(qū)別不是特別明顯，效果上來(lái)看，都是制作網(wǎng)頁(yè)的，但實(shí)際上，技術(shù)上所超于的已經(jīng)是幾個(gè)檔次的東西了。而這些，恰恰是一個(gè)普通網(wǎng)頁(yè)制作設(shè)計(jì)所做不到的事情。因?yàn)椴欢瓺W背后的代碼，也有部分人說(shuō)懂得手寫(xiě)代碼，只能說(shuō)，不在手寫(xiě)代碼中實(shí)踐、解決問(wèn)題，根本不能領(lǐng)會(huì)到手寫(xiě)代碼的精髓。顯然一個(gè)好的前端開(kāi)發(fā)人員是連通和設(shè)計(jì)和代碼之間的一個(gè)橋梁。既要有理工的嚴(yán)謹(jǐn)又要有文藝的情懷。既要懂得交互設(shè)計(jì)，提高用戶體驗(yàn)，又要具有美術(shù)基礎(chǔ)和審美能力，而在此基礎(chǔ)之上，還要對(duì)已完成的頁(yè)面進(jìn)行維護(hù)和以及網(wǎng)站前端性能做相應(yīng)的優(yōu)化。而網(wǎng)頁(yè)制作只是這整個(gè)前端開(kāi)發(fā)過(guò)程的一個(gè)組成部分，所以真正的前端開(kāi)發(fā)人員是一個(gè)很厲害的角色。

前端開(kāi)發(fā)工程師的主要職責(zé)是與交互設(shè)計(jì)師、 視覺(jué)設(shè)計(jì)師協(xié)作，根據(jù)設(shè)計(jì)圖用HTML和CSS完成頁(yè)面制作（也可能是一個(gè)人完成所有）。同時(shí)，在此基礎(chǔ)之上，對(duì)完成的頁(yè)面進(jìn)行維護(hù)和對(duì)網(wǎng)站前端性能做相應(yīng)的優(yōu)化。另外，一名合格的前端開(kāi)發(fā)工程師，應(yīng)該具有一定的審美能力和基礎(chǔ)的美工操作能力，能很好的與交互及視覺(jué)協(xié)作?，F(xiàn)在的前端工程師可能都需要一定程度上的全棧了，也就是前后端都需要會(huì)。不僅需要制作靜態(tài)頁(yè)面，包括網(wǎng)站架構(gòu)，H5等。如今市場(chǎng)上招聘web前端需要你會(huì)寫(xiě)JS、會(huì)用JS、能設(shè)計(jì)、切圖、懂用戶交互等，還需要前端架構(gòu)是開(kāi)發(fā)和優(yōu)化框架，及服務(wù)器，用戶體驗(yàn)等涉汲就比較廣，當(dāng)然全棧式前端工程師工資也就比較高了。

最基本的三個(gè)技能：HTML、CSS、JavaScript這個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。HTML：指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級(jí)到了XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。另外，W3C 與 WHATWG 合作創(chuàng)建一個(gè)新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來(lái)的生機(jī)和活力已是那樣的激奮人心，特別是前端的工作中，那些針對(duì)瀏覽器兼容的問(wèn)題將能得到很好的解決，的效果和應(yīng)用也能更方便的實(shí)現(xiàn)。前端工程師，也必然要與時(shí)俱進(jìn)，緊跟業(yè)界時(shí)代發(fā)展的前沿，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會(huì)被無(wú)情的淘汰。其實(shí)HTML的元素也就不過(guò)幾十個(gè)，常用的元素更少，所以掌握起來(lái)的話應(yīng)該不困難。但就是這些看似簡(jiǎn)單的元素，很多新手在剛開(kāi)始的時(shí)候就不注意規(guī)范，養(yǎng)成一些不好的習(xí)慣。

最基本的三個(gè)技能：HTML、CSS、JavaScript這個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。HTML：指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級(jí)到了XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。另外，W3C 與 WHATWG 合作創(chuàng)建一個(gè)新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來(lái)的生機(jī)和活力已是那樣的激奮人心，特別是前端的工作中，那些針對(duì)瀏覽器兼容的問(wèn)題將能得到很好的解決，的效果和應(yīng)用也能更方便的實(shí)現(xiàn)。前端工程師，也必然要與時(shí)俱進(jìn)，緊跟業(yè)界時(shí)代發(fā)展的前沿，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會(huì)被無(wú)情的淘汰。其實(shí)HTML的元素也就不過(guò)幾十個(gè)，常用的元素更少，所以掌握起來(lái)的話應(yīng)該不困難。但就是這些看似簡(jiǎn)單的元素，很多新手在剛開(kāi)始的時(shí)候就不注意規(guī)范，養(yǎng)成一些不好的習(xí)慣。

網(wǎng)站開(kāi)發(fā)開(kāi)發(fā)大致分為前端（客戶端）和后端（服務(wù)器端），前端主要負(fù)責(zé)實(shí)現(xiàn)視覺(jué)和交互效果，以及與服務(wù)器通信，完成業(yè)務(wù)邏輯。它的核心價(jià)值在于實(shí)現(xiàn)用戶體驗(yàn)，大型互聯(lián)網(wǎng)公司的用戶體驗(yàn)部門(mén)，一般會(huì)包括用戶研究、交互設(shè)計(jì)、前端技術(shù)和視覺(jué)設(shè)計(jì)等方面的內(nèi)容。如果你想成為一個(gè)優(yōu)秀的web前端開(kāi)發(fā)工程師，可以來(lái)這個(gè)裙，前面三個(gè)數(shù)是4 九 4，中間是零 六 4，最后的三個(gè)是9 叁 4，三個(gè)數(shù)連起來(lái)就是了，如果不想學(xué)習(xí)的就不要加了?！　eb前端開(kāi)發(fā)需要掌握的技術(shù)：　　1.學(xué)習(xí)html,這個(gè)是最簡(jiǎn)單的,也是最基礎(chǔ)的.要熟練掌握div、form table、ul li 、p、span、font這些標(biāo)簽,這些都是最常用的,特別是div和table,div用于布局、table也可以用于布局,但是不靈活,基本 table是用來(lái)和數(shù)據(jù)打交道.　　2.學(xué)習(xí)css,這里說(shuō)的css不包括css3,一般我們看到web前端開(kāi)發(fā)工程師的要求里面,有一個(gè)會(huì)使用css+html 或者 css+div 來(lái)進(jìn)行界面布局,所以css是用于輔助html來(lái)布局和展示的,我們稱(chēng)之為“css樣式”,為什么會(huì)說(shuō)css+div呢?因?yàn)槲疑厦嬲f(shuō)了div就是 html主要用于布局的東西,所以div就是核心掌握的東西!那么css肯定必須要配合div來(lái)使用才好.css要熟練掌握f(shuō)loat、position、width、height，以及對(duì)于的最大最小、會(huì)使用百分百、overflow、margin、padding等等,這些都是跟布局有關(guān)系的樣式,一點(diǎn)要掌握.　　3.學(xué)習(xí)js. 可能前兩個(gè)大家覺(jué)得還過(guò)的去,看到j(luò)s就蛋疼了,其實(shí)吧,js入門(mén)很簡(jiǎn)單的,不需要會(huì)很多東西的,只要會(huì)根據(jù)某個(gè)id、或者name拿到網(wǎng)頁(yè)dom或者樣式、或者值,然后會(huì)給某個(gè)id或者name的元素標(biāo)簽賦值、或者追加數(shù)據(jù)、追html,這個(gè)是跟數(shù)據(jù)有關(guān)系的操作,然后數(shù)據(jù)邏輯判斷,效果方面的,無(wú)非就是跳轉(zhuǎn)、彈框、隱藏什么的,把這些全部結(jié)合其他就是實(shí)際用途了,代碼一點(diǎn)都不難,會(huì)了這些基礎(chǔ)js,其他的直接百度就好了.然后看多了,用多了,就什么都不是問(wèn)題了.　　4.學(xué)習(xí)jquery.jquery是相當(dāng)于把js封裝了一套的一個(gè)js插件,目的就是操作起來(lái)更方便,代碼寫(xiě)的更少,jquery入門(mén)也很簡(jiǎn)單,那些是入門(mén)需要學(xué)的和js一樣,只是換成了jq的代碼.其他的一樣百度就夠了.　　5.最好會(huì)點(diǎn)后臺(tái)語(yǔ)言,比如java、php,為什么呢?因?yàn)槲覀兦芭_(tái)界面的數(shù)據(jù)都是從后臺(tái)來(lái)的,如果會(huì)點(diǎn)后臺(tái)代碼,就知道怎么跟后臺(tái)交互數(shù)據(jù)是最好的, 這樣節(jié)約時(shí)間,也可以讓前端代碼更規(guī)范.不然可能因?yàn)槟愕膶?xiě)法和后端給來(lái)的數(shù)據(jù)不能結(jié)合上,那么前端代碼又得重新寫(xiě),那就更蛋疼了.　　6.學(xué)習(xí)css3+html5,為什么這個(gè)放最后呢?哈哈,因?yàn)槲易约阂膊惶珪?huì),畢竟術(shù)業(yè)有專(zhuān)攻嘛,雖然這個(gè)很流行,但是我是搞后端的,在工作中用不到它,只有在自己網(wǎng)站需要改樣式,或者朋友網(wǎng)站樣式出問(wèn)題的時(shí)候,我才會(huì)去臨時(shí)去研究下.但是如果你們是準(zhǔn)備專(zhuān)門(mén)搞前端,那么最好還是學(xué)一下的.　　web前端開(kāi)發(fā)需要掌握的技術(shù)：　　1.學(xué)習(xí)html,這個(gè)是最簡(jiǎn)單的,也是最基礎(chǔ)的.要熟練掌握div、form table、ul li 、p、span、font這些標(biāo)簽,這些都是最常用的,特別是div和table,div用于布局、table也可以用于布局,但是不靈活,基本 table是用來(lái)和數(shù)據(jù)打交道.　　2.學(xué)習(xí)css,這里說(shuō)的css不包括css3,一般我們看到web前端開(kāi)發(fā)工程師的要求里面,有一個(gè)會(huì)使用css+html 或者 css+div 來(lái)進(jìn)行界面布局,所以css是用于輔助html來(lái)布局和展示的,我們稱(chēng)之為“css樣式”,為什么會(huì)說(shuō)css+div呢?因?yàn)槲疑厦嬲f(shuō)了div就是 html主要用于布局的東西,所以div就是核心掌握的東西!那么css肯定必須要配合div來(lái)使用才好.css要熟練掌握f(shuō)loat、position、width、height，以及對(duì)于的最大最小、會(huì)使用百分百、overflow、margin、padding等等,這些都是跟布局有關(guān)系的樣式,一點(diǎn)要掌握.　　3.學(xué)習(xí)js. 可能前兩個(gè)大家覺(jué)得還過(guò)的去,看到j(luò)s就蛋疼了,其實(shí)吧,js入門(mén)很簡(jiǎn)單的,不需要會(huì)很多東西的,只要會(huì)根據(jù)某個(gè)id、或者name拿到網(wǎng)頁(yè)dom或者樣式、或者值,然后會(huì)給某個(gè)id或者name的元素標(biāo)簽賦值、或者追加數(shù)據(jù)、追html,這個(gè)是跟數(shù)據(jù)有關(guān)系的操作,然后數(shù)據(jù)邏輯判斷,效果方面的,無(wú)非就是跳轉(zhuǎn)、彈框、隱藏什么的,把這些全部結(jié)合其他就是實(shí)際用途了,代碼一點(diǎn)都不難,會(huì)了這些基礎(chǔ)js,其他的直接百度就好了.然后看多了,用多了,就什么都不是問(wèn)題了.　　4.學(xué)習(xí)jquery.jquery是相當(dāng)于把js封裝了一套的一個(gè)js插件,目的就是操作起來(lái)更方便,代碼寫(xiě)的更少,jquery入門(mén)也很簡(jiǎn)單,那些是入門(mén)需要學(xué)的和js一樣,只是換成了jq的代碼.其他的一樣百度就夠了.　　5.最好會(huì)點(diǎn)后臺(tái)語(yǔ)言,比如java、php,為什么呢?因?yàn)槲覀兦芭_(tái)界面的數(shù)據(jù)都是從后臺(tái)來(lái)的,如果會(huì)點(diǎn)后臺(tái)代碼,就知道怎么跟后臺(tái)交互數(shù)據(jù)是最好的, 這樣節(jié)約時(shí)間,也可以讓前端代碼更規(guī)范.不然可能因?yàn)槟愕膶?xiě)法和后端給來(lái)的數(shù)據(jù)不能結(jié)合上,那么前端代碼又得重新寫(xiě),那就更蛋疼了.　　6.學(xué)習(xí)css3+html5,為什么這個(gè)放最后呢?哈哈,因?yàn)槲易约阂膊惶珪?huì),畢竟術(shù)業(yè)有專(zhuān)攻嘛,雖然這個(gè)很流行,但是我是搞后端的,在工作中用不到它,只有在自己網(wǎng)站需要改樣式,或者朋友網(wǎng)站樣式出問(wèn)題的時(shí)候,我才會(huì)去臨時(shí)去研究下.但是如果你們是準(zhǔn)備專(zhuān)門(mén)搞前端,那么最好還是學(xué)一下的.