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

　　Web前端的核心技能

　　1.開發(fā)語言

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

　　2.瀏覽器兼容性

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

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

　　3.hack技術(shù)

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

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

　　目前Web前端開發(fā)中提到最多的就是W3C標(biāo)準(zhǔn)，這是一系列標(biāo)準(zhǔn)的集合，代表了互聯(lián)網(wǎng)發(fā)展的方向，也代表了前端開發(fā)的一種信仰。寫的代碼都要100%通過標(biāo)準(zhǔn)驗(yàn)證，為通過標(biāo)準(zhǔn)驗(yàn)證而感到自豪，會有效推動互聯(lián)網(wǎng)的快速發(fā)展。

　　5.開發(fā)工具

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

　　Web前端的核心條件

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

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

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

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

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

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

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

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

　　減少 http 請求數(shù)

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

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

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

　　啟用壓縮

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

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

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

　　css 代碼優(yōu)化：

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

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

　　JavaScript 代碼優(yōu)化：

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

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

　　3.寫高性能的 JavaScript 代碼

　　使用瀏覽器緩存

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

　　通過設(shè)置 http 頭里的 Cache-Control 和 Expires 屬性來設(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)營商的機(jī)房，這些運(yùn)營商又同時(shí)為用戶提供網(wǎng)絡(luò)服務(wù)，因此用戶請求的路由會優(yōu)先到達(dá) CDN 服務(wù)器，如果存在請求的資源的話，就直接返回，最短路徑返回響應(yīng)，加速用戶訪問速度，同時(shí)還能夠?yàn)橹行臋C(jī)房減輕壓力

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

　　4.反向代理

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

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

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

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

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

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