⑴ 學前端需要什麼基礎嗎
一、學習前端，你需要具備哪些素質？
（1）如果web的任何一個元素（web界面，靈活的編程風格等）有一點吸引了你，讓你著實著迷，恭喜你，有了一個完美的開始。確認一下自己是否喜歡和合適前端，而不是為了一份看起來體面而且薪水不菲的工作。
（2）不斷學習，每日的積累，關注前端動態，是你跟上前端潮流的主要途徑。前端的體系過於龐大，技術框架爭涌而出，如果你經常抱怨累死碼農的節奏，那就審視一下自己對前端的態度。
（3）主抓基礎，避免盲目。前端領域知識點很多，值得學的東西也很多，聰明的人懂得花時間學習成體系的知識並且研究得足夠深入，而不是盲目的看到別人用什麼框架就去學什麼。只停留在實踐運用的階段，到頭來框架們都一個一個被淘汰，你仍在原地踏步。
（4）整理總結，先模仿後創造。將每日的積累做好規整，記錄到博客也好，筆記也好。多看看牛人的源代碼，等你達到了一定的層次水準，自然會得心應手。
（5）持有一顆造福前端社區的心。寫一些有意思的小工具、插件，推廣出去， 始終堅信，在從事前端的道路上You are not alone。
（6）要有專業人士的指導，尤其是學習前端找工作的，不要妄想自己一個人自學前端能找到工作，現在非常難，如果沒有一個明白人幫你解決一下問題，會有非常多的彎路，中間很容易放棄，學習的不專業不說，最重要是浪費時間。
（7）一個好的心態和一個堅持的心很重要，很多沖著高薪的人想學習前端，但是能學到最後的沒有幾個，遇到困難就放棄了，這種人到處都是，就是因為有的東西難，所以他的回報才很大，我們評判一個前端開發者是什麼水平，就是他解決問題的能力有多強。
⑵ 前端主要學什麼
網路的發展以讓前端的開發和應用在市場也越來越受到歡迎,很多人對前端開發產生了濃厚的興趣,經常會有人問關於前端需要學什麼的問題。前端都需要學什麼需要學習網站性能優化、SEO和伺服器端的基礎知識,而且要學會運用各種工具進行輔助開發以及理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。前端需要學習的語言有哪些
1.
學習html。要熟練掌握div、formtable、ulli、p、span、font這些標簽,這些都是常用的,特別是div和table,div用於布局、table也可以用於布局,但是不靈活,基本table是用來和數據打交道。
2.
學習css
⑶ 網頁前端設計要具備哪些技能
一、學習的基礎
Web前端設計學習技能主要有HTML、CSS、Java。事實上，沒有扎實的學習，基礎知識是沒有用的。你可以直接從HTML5, CSS3和Es5中學習。
二、美術學習和後端開發
如果你想做一個好的web前端開發，你需要知道你的工作界面在哪裡，這可以幫助你很多。每個公司可能是不同的，所以知道邊界是重要的。
三、了解各種框架庫
有很多框架，比如jQuery和Bootstrap，但是jQuery和Bootstrap必須非常熟練，否則它們不會工作。
四、學習工具
例如，GIT, Webpack, Gulp, GitHub, Nginx等等，這些工具本身不需要學習就可以工作。在學習web前端設計的技能方面，時間的分配可以少一些，但是從工作的角度來說，我們應該盡快熟悉它。這些工具使用起來並不難。你可以在幾天內學會它們，但是你仍然需要投入大量的時間來玩它們，而且要更有效率。
⑷ 以下哪些是常見的web前端性能關注點
前端性能關注的重點主要有以下幾點
1. 載入時間指標，主要包括三個時間斷
a. Time to First Impression
表示從用戶在瀏覽器鍵入url按下回車鍵一刻開始到頁面開始有反應(用戶可以在頁面中看見一點點內容)為止。經常能感覺到的一個信號就是網頁開始顯示title。
b.Time to onLoad Event
表示從頁面開始顯示內容,到瀏覽器開始觸發OnLoad函數這一時間段。只有當初始的文本和所引用的對象載入完成,瀏覽器才開始觸發OnLoad函數
c.Time to Fully Loaded
表示從上一時間段末到整個網頁完全載入完成(所有OnLoad函數以及相關的動態資源載入
完成)。在網頁中含有timeout或定時刷新之類處理時較為難判斷結束點。
2. 資源情況指標
網頁由初始的html文本中嵌入圖片以及通過XHR或者修改dom樹動態載入的內容組成,css負責樣式,js負責行為。所以當網頁資源過多為了下載資源客戶端和伺服器的網路來回就更多。下面是資源方面相關的指標。
a. Total Number of Requests
包括html網頁請求,css、js資源下載及其它網路請求。優化的目標之一是要盡量減少請求數。
b. Total Number of HTTP 300s/400s/500s
表示返回狀態為3009重定向）、400（客戶端錯誤）、500（伺服器端錯誤）的http請求。盡量避免這些請求以提高頁面load的時間。造成這些狀態的原因經常是伺服器的實施、配置和部署問題。
c. Total Size of Web Site
構成網頁元素總的大小。圖片或者js庫的增加都會對下載時間造成重要的影響。
d. Total Size of Images/CSS/JS
image、css、js在網頁元素大小中佔主要比例。
e. Total Number of XHR(XMLHttpRequest) Requests
通過js非同步從伺服器端獲得數據的請求數。一些js框架提供了跟伺服器端的更新機器就是XHR請求。通過配置可以減少XHR請求的數目
3. 網路連接指標
瀏覽器底層的網路連接對資源的下載速度有很大影響。資源的下載過程分為很多階段。下面介紹這些階段以及瀏覽器、網路、請求如何影響這些階段的時間
a. DNS Time
dns 查詢的時間。網頁請求會產生一次尋找該網頁資源所在主機的dns查詢。在同個域名進行網頁切換不會造成新的dns查詢。
b. Connect Time
指瀏覽器和伺服器之間建立tcp/ip連接的時間對於ssl連接包括握手的時間。網路連接過慢、使用ssl、使用短連接而非常連接都是造成connect time較多的原因。
c. Server Time
指收到請求後伺服器邏輯處理的時間
d. Transfer Time
這一指標與瀏覽器和伺服器之間的連接速度相一致通過減小傳輸內容或使用cdn來降Transfer Time。
e. Wait Time
等待時間和同一個域中服務資源的數量直接相關。每個域的瀏覽器的物理網路的限制，導致資源等待可用的連接。減少資源的數量（或將資源散布在不同的域）能將這一時間降低。平均等待時間的大小更能反映等待時間是否需要注意。
f. Number of Domains / Single Resource Domains
部署網站資源的域主機數量是很重要的，因為它影響的DNS連接和等待時間。專門用戶資源下載的域是必要的他將直接減少等待時間。應避免單一的資源域否則你將為dns查詢以及資源下載付出昂貴的代價。
⑸ 前端兩年應該會什麼
在Web前端行業發展得如火如荼的同時，Web前端的崗位技能已經發生深刻的變化，不斷涌現的新技術讓每一個Web前端開發者都焦慮不已。似乎我們學習的速度永遠趕不上技術更新的速度，那麼什麼才是Web前端開發的必備核心技能呢？簡單來講就是，前端三大基礎、前端主流框架、服務端開發，以及前端工程化。下面，來具體說說這些核心技能。
1、打好前端基礎
HTML、CSS、和JavaScript並成為Web前端開發的三大基礎知識，也是必備的核心技能。HTML+CSS可以做出簡單的靜態頁面，而JavaScript可以提供更好的用戶體驗。在歷經多次版本更新之後， HTML5和CSS3的出現又是一次革新。但是對於Web前端開發從業者來講，掌握HTML、CSS和JavaScript這樣的基礎知識，才是內功。只有在打好基礎的前提下，才能更好更快地學習新技術。因此，無論前端工具或框架如何變遷更新，掌握前端基礎知識才是前提。
2、熟練掌握框架
目前，比較主流的前端框架有Vue、React和Angular。之所以說框架是Web前端開發必備的核心技能，是因為它可以極大地提升開發效率，並且在優化產品性能方面也有不小的幫助。作為Web前端開發者不僅要會使用框架，更要懂底層原理。目前 Vue、React 還是大火階段，但絕不能停留在會使用的階段，而是要去深入了解每個環節的內部機制和原理。
3、了解服務端開發
雖然這些年，前後端已經分離了，但是這並不意味著Web前端開發工程師不需要學習服務端開發。我們可以看到這幾年前端的一個顯著趨勢，就是在逐步與服務端打交道，這就需要你掌握Node.js技能。另外，在一些互聯網的大廠招聘中，我們也常常能看到Node.js開發經驗已經成為前端必備核心技能。因此，處於求職就業的需求，Web前端開發也需要了解服務端開發。
4、掌握前端工程化
隨著前端行業的不斷發展，現在早已不是僅僅依靠HTML、CSS和JS完成前端工作的時代了。學習前端工程化一方面可以極大提升開發效率，另一方面還能降低大型項目的開發難度。而且隨著工程化、組件化、模塊化逐漸成為一線大型互聯網公司的標准，掌握前端工程化的求職者，更容易獲得面試官的青睞。掌握前端工程化這一核心技能，是各個能力階段Web前端開發工程師都需要具備的能力。
以上就是總結的Web前端開發必備的4個核心技能。Web前端開發四大必備核心技能只是內功，在前端這個急速變化的行業，永遠保持不斷地鑽研精神，才能在前端之路上走得更遠。當然，光是理論的學習也是遠遠不夠的，大家一定要懂得把所學知識運用在實踐中，才能真正提高自己的職場競爭力！
⑹ 如何提高前端性能，至少三點
1. 清理 HTML 文檔
HTML，即超文本標記語言，幾乎是所有網站的支柱。HTML 為網頁帶來標題、子標題、列表和其它一些文檔結構的格式。在最近更新的 HTML5 中，甚至可以創建圖表。
HTML 很容易被網路爬蟲識別，因此搜索引擎可以根據網站的內容在一定程度上實時更新。在寫 HTML 的時候，你應該嘗試讓它 簡潔而有效 。此外，在 HTML 文檔中引用外部資源的時候也需要遵循一些最佳實踐方法。
恰當放置 CSS
Web 設計者喜歡在網頁建立起主要的 HTML 骨架之後再來創建樣式表。這樣一來，網頁中的樣式表往往會放在 HTML 的後面，接近文檔結束的地方。然而推薦的做法是把 CSS 放在 HTML 的上面部分，文檔頭之內，這可以確保正常的渲染過程。
<head>
<link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>
</head>
這個策略不能提高網站的載入速度，但它不會讓訪問者長時間看著空白屏幕或者無格式的文本（FOUT）等待。如果網頁大部分可見元素已經載入出來了，訪問者才更有可能等待載入整個頁面，從而帶來對前端的優化效果。這就是知覺性能。
正確放置 Javascript
另一方面，如果將 JavaScript 放置在 head 標簽內或 HTML 文檔的上部，這會阻塞 HTML 和 CSS 元素的載入過程。這個錯誤會導致頁面載入時間增長，增加用戶等待時間，容易讓人感到不耐煩而放棄對網站的訪問。不過，您可以通過將 javascript 屬性置於 HTML 底部來避免此問題。
此外，在使用 JavaScript 時，人們通常喜歡用非同步腳本載入。這會阻止<script>標簽在 HTML 中的呈現過程，如，在文檔中間的情況。
雖然對於網頁設計師來說， HTML 是最值得使用的工具之一，但它通常要與 CSS 和 JavaScript 一起使用，這可能會導致網頁瀏覽速度減慢。 雖然 CSS 和 JavaScript 有利於網頁優化，但使用時也要注意一些問題。使用 CSS 和 JavaScript 時，要避免嵌入代碼。因為當您嵌入代碼時，要將 CSS 放置在樣式標記中，並在腳本標記中使用 JavaScript，這會增加每次刷新網頁時必須載入的 HTML 代碼量。
綁定文件? 不用擔心
在過去，你可能會頻繁綁定 CSS 腳本到單個文件，以在 HTML 代碼中引用外部文件。在使用 HTTP1.1 協議時，這是一項合理的實踐，然而這一協議不再是必需的。
感謝 HTTP/2，現在你可以通過使用多路技術將單個 TCP 連接以非同步方式收發 HTTP 請求和響應。
圖片來源: qnimate.com
這意味著你不再需要頻繁地將多個腳本綁定到單個文件。
2. 優化 CSS 性能
CSS，即級聯樣式表，能從 HTML 描述的內容生成專業而又整潔的文件。很多 CSS 需要通過 HTTP 請求來引入（除非使用內聯 CSS），所以你要努力去除累贅的 CSS 文件，但要注意保留其重要特徵。
如果你的 Banner、插件和布局樣式是使用 CSS 保存在不同的文件內，那麼，訪問者的瀏覽器每次訪問都會載入很多文件。雖然現在 HTTP/2 的存在，減少了這種問題的發生，但是在外部資源載入的情況下，仍會花費較長時間。要了解如何減少 HTTP 請求以大幅度縮減載入時間，請閱讀WordPress 性能。
此外，不少網站管理員在網頁中錯誤的使用 @import 指令 來引入外部樣式表。這是一個過時的方法，它會阻止瀏覽並行下載。link 標簽才是最好的選擇，它也能提高網站的前端性能。多說一句，通過 link 標簽請求載入的外部樣式表不會阻止並行下載。
3.減少外部HTTP請求
在很多情況下，網站的大部分載入時間來自於外部的 Http 請求。外部資源的載入速度隨著主機提供商的伺服器架構、地點等不同而不同。減少外部請求要做的第一步就是簡略地檢查網站。研究你網站的每個組成部分， 消除任何影響訪問者體驗不好的成分。 這些成分可能是：
不必要的圖片
沒用的 JavaScript 代碼
過多的 css
多餘的插件
在你去掉這些多餘的成分之後，再對剩下的內容進行整理，如，壓縮工具、CDN 服務和預獲取（prefetching）等，這些都是管理 HTTP 請求的最佳選擇。除此之外，減少DNS路由查找教程會教你如何一步一步的減少外部 HTTP 請求。
4. 壓縮 CSS, JS 和 HTML
壓縮技術可以從文件中去掉多餘的字元。你在編輯器中寫代碼的時候，會使用縮進和注釋，這些方法無疑會讓你的代碼簡潔而且易讀，但它們也會在文檔中添加多餘的位元組。
例如，這是一段壓縮之前的代碼。
.entry-content p {
font-size: 14px !important;
}
.entry-content ul li {
font-size: 14px !important;
}
.proct_item p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
把這段代碼壓縮後就成了這樣。
.entry-content p,.entry-content ul li{font-size:14px!important}.proct_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
使用壓縮工具可以非常簡單地把無用的位元組從你的 CSS、js 和 HTML 文件修剪掉。關於壓縮的相關信息，可以參閱如何壓縮 CSS、JS 和 HTML。
5. 使用預先獲取
預先獲取可以 在真正需要之前 通過取得必需的資源和相關數據來改善訪問用戶的瀏覽體驗，主要有3類預先獲取:
鏈接預先獲取
DNS 預先獲取
預先渲染
在你離開當前 web 頁面之前，使用預先獲取方式，對應每個鏈接的 URL 地址，CSS，圖片和腳本都會被預先獲取。這保證了訪問者能在最短時間內使用鏈接在畫面間切換。
幸運的是，預先獲取很容易實現。根據你想要使用的預先獲取形式，你只需在網站 HTML 中的鏈接屬性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 標記。
6. 使用 CDN 和緩存提高速度
內容分發網路能顯著提高網站的速度和性能。使用 CDN 時，您可以將網站的靜態內容鏈接到全球各地的伺服器擴展網路。如果您的網站觀眾遍布全球，這項功能十分有用。 CDN 允許您的網站訪問者從最近的伺服器載入數據。如果您使用 CDN，您網站內的文件將自動壓縮，以便在全球范圍內快速分發。
CDN 是一種緩存方法，可極大改善資源的分發時間，同時，它還能實現一些其他的緩存技術，如，利用瀏覽器緩存。
合理地設置瀏覽器緩存，能讓瀏覽器自動存儲某些文件，以便加快傳輸速度。此方法的配置可以直接在源伺服器的配置文件中完成。
了解更多有關緩存和不同類型的緩存方法，請參閱緩存定義。
7. 壓縮文件
雖然許多 CDN 服務可以壓縮文件，但如果不使用 CDN，您也可以考慮在源伺服器上使用文件壓縮方法來改進前端優化。 文件壓縮能使網站的內容輕量化，更易於管理。 最常用的文件壓縮方法之一是 Gzip。 這是縮小文檔、音頻文件、PNG圖像和等其他大文件的絕佳方法。
Brotli 是一個比較新的文件壓縮演算法，目前正變得越來越受歡迎。 此開放源代碼演算法由來自 Google 和其他組織的軟體工程師定期更新，現已被證明比其他現有壓縮方法更好用。 這種演算法的支持目前還比較少，但作為後起之秀指日可待。
了解更多信息，請閱讀我們有關 Brotli 壓縮的完整文章。
8. 優化你的圖片
對於那些不懂得前端優化的人來說，圖片可能會是一個「網站殺手」。大量的寫真集和龐大的高清圖片會阻塞網頁渲染速度。沒有優化的高清圖片可能會有幾兆位元組（mb）。因此適當地對它們進行優化可以改善網頁的前端性能。
每個圖像文件都包含了一些與純照片或圖片無關的信息。比如 JPEG 圖片，它包含了日期、地點、相機型號和一些其他不相關的信息。你可以用一些如 Optimus 的優化工具來刪除這些多餘的圖像數據來精簡圖像的冗長的載入過程。因為 Optimus 是一個無損的圖片壓縮工具，它不會影響圖像畫質，只是壓縮圖片體積。
另外，如果你想進一步的優化一張圖片，你可以使用有損壓縮，它會刪除一些圖片裡面的數據，因此質量會受損。
進一步的學習有損和無損壓縮之間的區別，請閱讀我們完整的教程。
9. 使用輕量級框架
除非你只用現有的編碼知識構建網站，不然，你可以嘗試使用一個好的前端框架來避免許多不必要的前端優化錯誤。雖然有一些更大，更知名的框架能提供更多功能和選項，但它們不一定適合你的 Web 項目。
所以說，不僅確定項目所需功能很重要，選擇合適的框架也很重要——它要在提供所需功能的同時保持輕量。最近許多框架都使用簡潔的 HTML，CSS 和 JavaScript 代碼。
⑺ 常見的前端性能優化手段都有哪些都有多大收益
前端是龐大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各種各樣的資源。前端優化是復雜的，針對方方面面的資源都有不同的方式。那麼，前端優化的目的是什麼 ?
1. 從用戶角度而言，優化能夠讓頁面載入得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
2. 從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所佔帶寬，能夠節省可觀的資源。
總之，恰當的優化不僅能夠改善站點的用戶體驗並且能夠節省相當的資源利用。
前端優化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞載入、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。另外，本著提高投入產出比的目的，後文提到的各種優化策略大致按照投入產出比從大到小的順序排列。
一、頁面級優化
1. 減少 HTTP請求數
這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少 HTTP請求，那請求多了到底會怎麼樣呢 ?首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經過 DNS定址、與伺服器建立連接、發送數據、等待伺服器響應、接收數據這樣一個 「漫長」 而復雜的過程。時間成本就是用戶需要看到或者 「感受」 到這個資源是必須要等待這個過程結束的，資源上由於每個請求都需要攜帶數據，因此每個請求都需要佔用帶寬。另外，由於瀏覽器進行並發請求的請求數是有上限的 (具體參見此處 )，因此請求數多了以後，瀏覽器需要分批進行請求，因此會增加用戶的等待時間，會給用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經請求完了，但是瀏覽器的進度條會一直存在。
減少 HTTP請求數的主要途徑包括：
(1). 從設計實現層面簡化頁面
如果你的頁面像網路首頁一樣簡單，那麼接下來的規則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續閱讀下面的內容。
(2). 合理設置 HTTP緩存
緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP請求。以有啊首頁為例，當瀏覽器沒有緩存的時候訪問一共會發出 78個請求，共 600多 K數據 (如圖 1.1)，而當第二次訪問即瀏覽器已緩存之後訪問則僅有 10個請求，共 20多 K數據 (如圖 1.2)。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請求數還是一樣，不過被緩存資源的請求伺服器是 304響應，只有 Header沒有Body ，可以節省帶寬 )
怎樣才算合理設置 ?原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。關於 HTTP緩存的具體設置和原理此處就不再詳述了，有興趣的可以參考下列文章：
HTTP1.1協議中關於緩存策略的描述
Fiddler HTTP Performance中關於緩存的介紹
(3). 資源合並與壓縮
如果可以的話，盡可能的將外部的腳本、樣式進行合並，多個合為一個。另外， CSS、 Javascript、Image 都可以用相應的工具進行壓縮，壓縮後往往能省下不少空間。
(4). CSS Sprites
合並 CSS圖片，減少請求數的又一個好辦法。
(5). Inline Images
使用 data: URL scheme的方式將圖片嵌入到頁面或 CSS中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在 CSS中的圖片則更為理想一些。
(6). Lazy Load Images（自己對這一塊的內容還是不了解）
這條策略實際上並不一定能減少 HTTP請求數，但是卻能在某些條件下或者頁面剛載入時減少 HTTP請求數。對於圖片而言，在頁面剛載入的時候可以只載入第一屏，當用戶繼續往後滾屏的時候才載入後續的圖片。這樣一來，假如用戶只對第一屏的內容感興趣時，那剩餘的圖片請求就都節省了。 有啊首頁 曾經的做法是在載入的時候把第一屏之後的圖片地址緩存在 Textarea標簽中，待用戶往下滾屏的時候才 「惰性」 載入。
2. 將外部腳本置底（將腳本內容在頁面信息內容載入後再載入）
前文有談到，瀏覽器是可以並發請求的，這一特點使得其能夠更快的載入資源，然而外鏈腳本在載入時卻會阻塞其他資源，例如在腳本載入完成之前，它後面的圖片、樣式以及其他腳本都處於阻塞狀態，直到腳本載入完成後才會開始載入。如果將腳本放在比較靠前的位置，則會影響整個頁面的載入速度從而影響用戶體驗。解決這一問題的方法有很多，在 這里有比較詳細的介紹 (這里是譯文和 更詳細的例子 )，而最簡單可依賴的方法就是將腳本盡可能的往後挪，減少對並發下載的影響。
3. 非同步執行 inline腳本(其實原理和上面是一樣，保證腳本在頁面內容後面載入。)
inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣， inline腳本在執行的時候一樣會阻塞並發請求，除此之外，由於瀏覽器在頁面處理方面是單線程的，當 inline腳本在頁面渲染之前執行時，頁面的渲染工作則會被推遲。簡而言之， inline腳本在執行的時候，頁面處於空白狀態。鑒於以上兩點原因，建議將執行時間較長的 inline腳本非同步執行，非同步的方式有很多種，例如使用 script元素的defer 屬性(存在兼容性問題和其他一些問題，例如不能使用 document.write)、使用setTimeout ，此外，在HTML5中引入了 Web Workers的機制，恰恰可以解決此類問題。
4. Lazy Load Javascript（只有在需要載入的時候載入，在一般情況下並不載入信息內容。）
隨著 Javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功能實現，這些功能並不是每一個頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費 -既浪費了帶寬又浪費了執行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定製一個專用的 mini版框架，另一種則是 Lazy Load。YUI 則使用了第二種方式，在 YUI的實現中，最初只載入核心模塊，其他模塊可以等到需要使用的時候才載入。
5. 將 CSS放在 HEAD中
如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成後才開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。
6. 非同步請求 Callback（就是將一些行為樣式提取出來，慢慢的載入信息的內容）
在某些頁面中可能存在這樣一種需求，需要使用 script標簽來非同步的請求數據。類似：
Javascript:
function myCallback(info){
//do something here
}
HTML:
cb返回的內容 :
myCallback('Hello world!');
像以上這種方式直接在頁面上寫 <script>對頁面的性能也是有影響的，即增加了頁面首次載入的負擔，推遲了 DOMLoaded和window.onload 事件的觸發時機。如果時效性允許的話，可以考慮在 DOMLoaded事件觸發的時候載入，或者使用 setTimeout方式來靈活的控制載入的時機。
7. 減少不必要的 HTTP跳轉
對於以目錄形式訪問的 HTTP鏈接，很多人都會忽略鏈接最後是否帶 』/'，假如你的伺服器對此是區別對待的話，那麼你也需要注意，這其中很可能隱藏了 301跳轉，增加了多餘請求。具體參見下圖，其中第一個鏈接是以無 』/'結尾的方式訪問的，於是伺服器有了一次跳轉。
8. 避免重復的資源請求
這種情況主要是由於疏忽或頁面由多個模塊拼接而成，然後每個模塊中請求了同樣的資源時，會導致資源的重復請求
二、代碼級優化
1. Javascript
(1). DOM
DOM操作應該是腳本中最耗性能的一類操作，例如增加、修改、刪除 DOM元素或者對 DOM集合進行操作。如果腳本中包含了大量的 DOM操作則需要注意以下幾點：
a. HTML Collection（HTML收集器，返回的是一個數組內容信息）
在腳本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection類型的集合，在平時使用的時候大多將它作為數組來使用，因為它有 length屬性，也可以使用索引訪問每一個元素。不過在訪問性能上則比數組要差很多，原因是這個集合並不是一個靜態的結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果。所謂的 「訪問集合」 包括讀取集合的 length屬性、訪問集合中的元素。
因此，當你需要遍歷 HTML Collection的時候，盡量將它轉為數組後再訪問，以提高性能。即使不轉換為數組，也請盡可能少的訪問它，例如在遍歷的時候可以將 length屬性、成員保存到局部變數後再使用局部變數。
b. Reflow & Repaint
除了上面一點之外， DOM操作還需要考慮瀏覽器的 Reflow和Repaint ，因為這些都是需要消耗資源的，具體的可以參加以下文章：
如何減少瀏覽器的repaint和reflow?
Understanding Internet Explorer Rendering Behaviour
Notes on HTML Reflow
(2). 慎用 with
with(obj){ p = 1}; 代碼塊的行為實際上是修改了代碼塊中的 執行環境 ，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪問非局部變數是都是先從 obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用 with相當於增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的，過長的作用域鏈會導致查找性能下降。
因此，除非你能肯定在 with代碼中只訪問 obj中的屬性，否則慎用 with，替代的可以使用局部變數緩存需要訪問的屬性。
(3). 避免使用 eval和 Function
每次 eval 或 Function 構造函數作用於字元串表示的源代碼時，腳本引擎都需要將源代碼轉換成可執行代碼。這是很消耗資源的操作 —— 通常比簡單的函數調用慢 100倍以上。
eval 函數效率特別低，由於事先無法知曉傳給 eval 的字元串中的內容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法優化上下文，因此只能有瀏覽器在運行時解釋代碼。這對性能影響很大。
Function 構造函數比 eval略好，因為使用此代碼不會影響周圍代碼 ;但其速度仍很慢。
此外，使用 eval和 Function也不利於Javascript 壓縮工具執行壓縮。
(4). 減少作用域鏈查找（這方面設計到一些內容的相關問題）
前文談到了作用域鏈查找問題，這一點在循環中是尤其需要注意的問題。如果在循環中需要訪問非本作用域下的變數時請在遍歷之前用局部變數緩存該變數，並在遍歷結束後再重寫那個變數，這一點對全局變數尤其重要，因為全局變數處於作用域鏈的最頂端，訪問時的查找次數是最多的。
低效率的寫法：
// 全局變數
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次訪問 globalVar 都需要查找到作用域鏈最頂端，本例中需要訪問 100000 次
globalVar += i;
}
}
更高效的寫法：
// 全局變數
var globalVar = 1;
function myCallback(info){
//局部變數緩存全局變數
var localVar = globalVar;
for( var i = 100000; i--;){
//訪問局部變數是最快的
localVar += i;
}
//本例中只需要訪問 2次全局變數
在函數中只需要將 globalVar中內容的值賦給localVar 中區
globalVar = localVar;
}
此外，要減少作用域鏈查找還應該減少閉包的使用。
(5). 數據訪問
Javascript中的數據訪問包括直接量 (字元串、正則表達式 )、變數、對象屬性以及數組，其中對直接量和局部變數的訪問是最快的，對對象屬性以及數組的訪問需要更大的開銷。當出現以下情況時，建議將數據放入局部變數：
a. 對任何對象屬性的訪問超過 1次
b. 對任何數組成員的訪問次數超過 1次
另外，還應當盡可能的減少對對象以及數組深度查找。
(6). 字元串拼接
在 Javascript中使用"+" 號來拼接字元串效率是比較低的，因為每次運行都會開辟新的內存並生成新的字元串變數，然後將拼接結果賦值給新變數。與之相比更為高效的做法是使用數組的 join方法，即將需要拼接的字元串放在數組中最後調用其 join方法得到結果。不過由於使用數組也有一定的開銷，因此當需要拼接的字元串較多的時候可以考慮用此方法。
關於 Javascript優化的更詳細介紹請參考：
Write Efficient Javascript(PPT)
Efficient JavaScript
2. CSS選擇符
在大多數人的觀念中，都覺得瀏覽器對 CSS選擇符的解析式從左往右進行的，例如
#toc A { color: #444; }
這樣一個選擇符，如果是從右往左解析則效率會很高，因為第一個 ID選擇基本上就把查找的范圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。如上面的選擇符，瀏覽器必須遍歷查找每一個 A標簽的祖先節點，效率並不像之前想像的那樣高。根據瀏覽器的這一行為特點，在寫選擇符的時候需要注意很多事項，有人已經一一列舉了， 詳情參考此處。
3. HTML
對 HTML本身的優化現如今也越來越多的受人關注了，詳情可以參見這篇 總結性文章 。
4. Image壓縮
圖片壓縮是個技術活，不過現如今這方面的工具也非常多，壓縮之後往往能帶來不錯的效果，具體的壓縮原理以及方法在《 Even Faster Web Sites》第10 章有很詳細的介紹，有興趣的可以去看看。
總結
本文從頁面級以及代碼級兩個粒度對前端優化的各種方式做了一個總結，這些方法基本上都是前端開發人員在開發的過程中可以借鑒和實踐的，除此之外，完整的前端優化還應該包括很多其他的途徑，例如 CDN、 Gzip、多域名、無 Cookie伺服器等等，由於對於開發人員的可操作性並不強大，在此也就不多敘述了，詳細的可以參考 Yahoo和Google 的這些「金科玉律。
⑻ 前端開發工程師都需要掌握一些什麼技能
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
⑼ 前端學什麼
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
在互聯網行業，前端有WEB前端、HTML前端等，隨著互聯網技術發展，就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是，使用HTML5不僅僅可以開發前端，還有網頁游戲，手機APP，使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發，而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高，技術要求高，掌握多種技能，包括：後端技術、DBA、Platform等等，甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能，懂可視化的一定是有前端能力的，懂hadoop的一定java要熟悉，屬於Web開發的拓展方向。
大前端方向
比如阿里，在大量實踐rn和weex;由於公司內部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系，除了上面提到了可視化，還有相關3d引擎的開發工作。做這一行要求也非常高了，圖形學相關的演算法，3d引擎的開發，這都需要圖形學相關知識。