現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā)，所以現(xiàn)在不再叫網(wǎng)頁(yè)制作，而是叫Web前端開(kāi)發(fā)。下面由學(xué)習(xí)啦小編為大家整理的Web前端的核心技能，希望大家喜歡!

　　Web前端的核心技能

　　1.開(kāi)發(fā)語(yǔ)言

　　HTML發(fā)展歷史有二十多年，歷經(jīng)多次版本更新，HTML5和CSS3的出現(xiàn)又是一次革新。有些人認(rèn)為前端開(kāi)發(fā)要掌握的技能簡(jiǎn)單，不就是制作網(wǎng)頁(yè) 嘛，其實(shí)不然，web前端需要掌握的核心語(yǔ)言xHTML+CSS+JavaScript，JavaScript作為最難的語(yǔ)言之一，許多編程高手也不敢妄 自菲薄自封精通。由于JavaScript與html的差異性，以及靜動(dòng)態(tài)分開(kāi)處理的一些好處。在大公司編寫(xiě)靜態(tài)效果和動(dòng)態(tài)效果往往是分開(kāi)由不同的人完成 的。小公司因?yàn)樾枰獕嚎s成本，就要求每個(gè)人會(huì)的越多越好，如果您想往項(xiàng)目經(jīng)理發(fā)展，能懂一兩門(mén)后臺(tái)語(yǔ)言，絕對(duì)是錦上添花!

　　2.瀏覽器兼容性

　　互聯(lián)網(wǎng)目前主流瀏覽器有IE6，F(xiàn)irefox，Chrome，Opera，Safari，遨游，包括國(guó)內(nèi)主流的搜狗，騰訊 TT，360，the World等等;從內(nèi)核上講主要有IE的，遨游版IE，safari，firefox以及opera的，這些都是大家常見(jiàn)的，如果你身邊有老網(wǎng)蟲(chóng)喜歡收藏 瀏覽器，你翻翻他的硬盤(pán)，相信幾十款肯定是有的。每種內(nèi)核對(duì)代碼的解析是不完全一樣的，即使同樣內(nèi)核也可能存在很大差異，如IE和遨游版的IE。不說(shuō)非主流的瀏覽器，就主流的瀏覽器要做到完全兼容，也并非易事，需要長(zhǎng)時(shí)間的積累和測(cè)試，需要前端開(kāi)發(fā)工程師對(duì)前端開(kāi)發(fā)的熱愛(ài)和激情。

　　目前移動(dòng)互聯(lián)網(wǎng)的發(fā)展趨勢(shì)也不容小覷，將慢慢占據(jù)互聯(lián)網(wǎng)的主要份額。移動(dòng)互聯(lián)網(wǎng)最突出的好處是方便和及時(shí)，試想一下，走在某地風(fēng)景很好，拍下來(lái)后自 動(dòng)分享給各路好友，因此手機(jī)上的瀏覽器兼容也看刻不容緩，現(xiàn)在手機(jī)上的瀏覽器也是紛繁復(fù)雜，主流的UCWEB，safari，IE，3G門(mén)戶的，以及 symbian低端機(jī)的“殘缺兒童”，包括國(guó)外流行手機(jī)我們不知道的一些瀏覽器，更糟糕的是這些瀏覽器解析因?yàn)槭謾C(jī)硬件的不同，每個(gè)瀏覽器得到的結(jié)果都是 完全不同的。

　　3.hack技術(shù)

　　由于不同的瀏覽器對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，這個(gè)時(shí)候就需要針對(duì)不同的瀏覽器寫(xiě)不同的CSS，這個(gè)過(guò)程叫CSS hack。雖然我們寫(xiě)代碼都要求按照標(biāo)準(zhǔn)，不寫(xiě)hack代碼，但實(shí)際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應(yīng)該是每個(gè)前端開(kāi)發(fā)人員 必備的技能。

　　4.業(yè)內(nèi)標(biāo)準(zhǔn)

　　目前Web前端開(kāi)發(fā)中提到最多的就是W3C標(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)證而感到自豪，會(huì)有效推動(dòng)互聯(lián)網(wǎng)的快速發(fā)展。

　　5.開(kāi)發(fā)工具

　　目前比較流行的是Dreamweaver， 其曾經(jīng)風(fēng)靡一時(shí)，到現(xiàn)在也沒(méi)有退出歷史舞臺(tái)，證明DW還是有很大優(yōu)勢(shì)的，尤其是針對(duì)初學(xué)者，其強(qiáng)大的提示功能可以幫助我們很快的熟悉并掌握網(wǎng)頁(yè)布局，但現(xiàn)在更提倡的是純手寫(xiě)代碼，既體現(xiàn)技能方面的卓越，也可有效避免使用DW等工具產(chǎn)生的冗余代碼。此外再掌握一些photoshop技能，即使沒(méi)有美工，也能簡(jiǎn)單處理一些圖像。

　　Web前端的核心條件

　　第一，必須掌握基本的Web前端開(kāi)發(fā)技術(shù)，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。

　　第二，在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。

　　第三，必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。

　　第四，除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持，等等。

　　可見(jiàn)，看似簡(jiǎn)單的網(wǎng)頁(yè)制作，如果要做得更好、更專業(yè)，真的是不簡(jiǎn)單。這就是前端開(kāi)發(fā)的特點(diǎn)，也是讓很多人困惑的原因。如此繁雜的知識(shí)體系讓新手學(xué)習(xí)起來(lái)無(wú)從下手，對(duì)于老手來(lái)說(shuō)，也時(shí)常不知道下一步該學(xué)什么。

　　代碼質(zhì)量是前端開(kāi)發(fā)中應(yīng)該重點(diǎn)考慮的問(wèn)題之一。例如，實(shí)現(xiàn)一個(gè)網(wǎng)站界面可能會(huì)有無(wú)數(shù)種方案，但有些方案的維護(hù)成本會(huì)比較高，有些方案會(huì)存在性能問(wèn)題，而有些方案則更易于維護(hù)，而且性能也比較好。這里的關(guān)鍵影響因素就是代碼質(zhì)量。CSS、HTML、JavaScript這三種前端開(kāi)發(fā)語(yǔ)言的特點(diǎn)是不同的，對(duì)代碼質(zhì)量的要求也不同，但它們之間又有著千絲萬(wàn)縷的聯(lián)系。

　　Web 前端性能優(yōu)化

　　1.瀏覽器訪問(wèn)渲染優(yōu)化

　　減少 http 請(qǐng)求數(shù)

　　http 協(xié)議是無(wú)狀態(tài)的應(yīng)用層協(xié)議，每次 http 請(qǐng)求都會(huì)建立新的通信鏈路，并且在服務(wù)端，每個(gè) http 連接都會(huì)開(kāi)啟一個(gè)單獨(dú)的線程去處理請(qǐng)求，這都會(huì)產(chǎn)生額外的開(kāi)銷

　　主要手段就是去合并壓縮 css，JavaScript，圖片文件，把需要的 css，JavaScript，圖片資源進(jìn)行合并減少建立的連接請(qǐng)求數(shù)

　　同時(shí)使用 http 的 keep-alive 來(lái)進(jìn)行連接的復(fù)用，以此來(lái)減少建立的 http 連接數(shù)，提高訪問(wèn)性能

　　啟用壓縮

　　在服務(wù)端進(jìn)行文件的壓縮，減少通信傳輸過(guò)程中的數(shù)據(jù)量

　　對(duì)于文本文件，壓縮率能夠達(dá)到 80% 以上，因此在服務(wù)端啟用 gzip 壓縮是一個(gè)很好的選擇，但啟用壓縮的同時(shí)也會(huì)給服務(wù)器帶來(lái)額外的開(kāi)銷，所以要具體情況具體分析

　　2.css，JavaScript 代碼優(yōu)化

　　css 代碼優(yōu)化：

　　盡量使用外部樣式，并且放在頁(yè)面頂部加載，一方面能夠及時(shí)渲染，另一方面能夠避免因某些樣式導(dǎo)致阻塞渲染

　　壓縮合并 css 文件，盡量精簡(jiǎn)文件，減少通信傳輸數(shù)據(jù)量和請(qǐng)求連接數(shù)

　　JavaScript 代碼優(yōu)化：

　　因?yàn)?JavaScript 代碼邊加載邊解析，解析的過(guò)程會(huì)阻塞瀏覽器渲染，因此把 JavaScript 代碼放在頁(yè)面底部加載

　　同樣的壓縮合并 JavaScript 文件，盡量精簡(jiǎn)文件，減少通信傳輸數(shù)據(jù)量和請(qǐng)求連接數(shù)

　　3.寫(xiě)高性能的 JavaScript 代碼

　　使用瀏覽器緩存

　　一般來(lái)說(shuō)，對(duì)于網(wǎng)站里面不經(jīng)常變化的靜態(tài)資源，更新頻率比較低，因此可以把這些資源緩存在瀏覽器中，能夠很好的改善性能

　　通過(guò)設(shè)置 http 頭里的 Cache-Control 和 Expires 屬性來(lái)設(shè)定瀏覽器緩存時(shí)間

　　另外還有 Etags 和 opcode 的緩存，根據(jù)具體情況進(jìn)行選擇吧

　　CDN 加速

　　CDN 的本質(zhì)也屬于緩存，內(nèi)容分發(fā)網(wǎng)絡(luò)，把數(shù)據(jù)緩存在里用戶近的地方，使用戶盡快的獲取數(shù)據(jù)

　　因?yàn)?CDN 都是部署在網(wǎng)絡(luò)運(yùn)營(yíng)商的機(jī)房，這些運(yùn)營(yíng)商又同時(shí)為用戶提供網(wǎng)絡(luò)服務(wù)，因此用戶請(qǐng)求的路由會(huì)優(yōu)先到達(dá) CDN 服務(wù)器，如果存在請(qǐng)求的資源的話，就直接返回，最短路徑返回響應(yīng)，加速用戶訪問(wèn)速度，同時(shí)還能夠?yàn)橹行臋C(jī)房減輕壓力

　　CDN 一般用來(lái)緩存靜態(tài)資源，css，Script 腳本，靜態(tài)頁(yè)面，圖片等，這些內(nèi)容修改頻率很低但是訪問(wèn)請(qǐng)求頻率很高，因此放在 CDN上能夠很好的改善訪問(wèn)速度

　　4.反向代理

　　傳統(tǒng)的代理服務(wù)器是當(dāng)你請(qǐng)求不到所請(qǐng)求的資源時(shí)，由代理服務(wù)器幫你請(qǐng)求，你知道你請(qǐng)求的最終的服務(wù)器是誰(shuí)，典型的例子就是VPN，通過(guò)代理服務(wù)器來(lái)請(qǐng)求到墻外的世界

　　而反向代理是當(dāng)你請(qǐng)求一個(gè)地址時(shí)，你請(qǐng)求的是反向代理服務(wù)器，然后由反向代理服務(wù)器去請(qǐng)求其他服務(wù)器來(lái)獲取內(nèi)容，而你不知道最終是從哪一臺(tái)服務(wù)器獲取到的數(shù)據(jù)

　　反向代理 web 服務(wù)器接收 http 請(qǐng)求，然后進(jìn)行請(qǐng)求轉(zhuǎn)發(fā)，獲取到內(nèi)容后返回給你，你只知道是由反向代理服務(wù)器給你的數(shù)據(jù)，而不知道數(shù)據(jù)源最終是從哪個(gè)服務(wù)器來(lái)的

　　反向代理服務(wù)器具有保護(hù)作用，來(lái)自互聯(lián)網(wǎng)的請(qǐng)求都需要經(jīng)過(guò)反向代理服務(wù)器，相當(dāng)于在 web 服務(wù)器之間建立起了一道屏障

　　除了安全以外，可以在反向代理服務(wù)器上進(jìn)行一些靜態(tài)資源的緩存，以此來(lái)提高訪問(wèn)速度，減輕應(yīng)用服務(wù)器的負(fù)載壓力

　　當(dāng)然，有些動(dòng)態(tài)資源也可以緩存在代理服務(wù)器上面，比如說(shuō)熱門(mén)的詞條，帖子，博客等，這些資源的請(qǐng)求量可能非常非常的大，如果每次都走一遍流程的話會(huì)造成很大的壓力，同時(shí)，當(dāng)這些動(dòng)態(tài)內(nèi)容發(fā)生改變時(shí)，會(huì)通知反向代理服務(wù)器緩存失效，代理服務(wù)器會(huì)重新緩存動(dòng)態(tài)資源