㈠ 如何成為一名優秀的web前端工程師
程序設計之道無遠弗屆，御晨風而返。———— 傑佛瑞 · 詹姆士 我所遇到的前端程序員分兩種： 第一種一直在問：如何學習前端？ 第二種總說：前端很簡單，就那麼一點東西。 我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師。 何為：前端工程師？ 前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。 Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！ 它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。 隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的網際網路應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和伺服器端語言（PHP、ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。 前端開發的入門門檻其實很低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。 HTML 甚至不是一門語言，他僅僅是簡單的標記語言！ CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。 Javascript 的基礎部分相對來說不難，入手還算快。 也正因為如此，前端開發領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。 Web前端技術有一些江湖氣，知識點過於瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構並未成體系，這些因素也客觀上影響了「正統「前端技術的沉澱！而且各種「奇技淫巧」被濫用，前端技術知識的傳承也過於泛泛，新人難看清時局把握主次。因此，前端技術領域，為自己覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。 另一方面，正如前面所說，前端開發是個非常新的職業，對一些規范和最佳實踐的研究都處於探索階段。 總有新的靈感和技術不時閃現出來，例如CSS sprite、負邊距布局、柵格布局等； 各種JavaScript框架層出不窮，為整個前端開發領域注入了巨大的活力； 瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。 為了滿足「高可維護性」的需要，需要更深入、更系統地去掌握前端知識，這樣才可能創建一個好的前端架構，保證代碼的質量。 隨著手持設備的迅猛發展，帶動了 HTML5行業標準的快速發展。web領域的技術，大概有10年都沒有大的更新了！ 現在市場很需要優秀的、高級的前端工程師。 一方面是因為這是一個比較新的細分行業，而且前端程序員大都自學一部分，知識結構不系統；另一方面，大學裡面沒有這種課程，最最重要的是：北大青鳥這類培訓機構也沒有專門的前端工程師的培訓課程！！ 吳亮在《JavaScript 王者歸來》第一張的序裡面說：大多數程序員認為 Javascript 過於簡陋，只適合一些網頁上面花哨的表現，所以不願花費精力去學習，或者以為不學習就能掌握。 實際上，一門語言是否腳本語言，往往是她的設計目標決定，簡單與復雜並不是區分腳本語言和非腳本語言的標准。 事實上，在腳本語言裡面，Javascript 屬於相當復雜的一門語言，他的復雜度即使放在非腳本語言中來衡量，也是一門相當復雜的語言！ Javascript 的復雜度不遜色於 Perl 和 Python！ 如何學習前端知識？ 我們生活在一個充滿規則的宇宙裡面。社會秩序按照規則運行，計算機語言幾乎全部是規則的集合。計算機前輩們定義規則，規則約束我們，我們用規則控制數據。大部分時候，對數據的合理控制，來自於你對規則的掌握。 學習HTML，CSS 應該先跟著書仔細、扎實的學一遍。然後就需要做大量的練習，做各種常規的、奇怪的、大量的布局練習來捆固、理解自己的知識。 而學習 Javascript 首先要知道這門語言可以做什麼，不能做什麼，擅長做什麼，不擅長做什麼！ 如果你只想當一個普通的前端程序員，你只需要記住大部分 Javascript 函數，做一些練習就可以了。 如果你想當深入了解Javascript，你需要了解 Javascript 的原理，機制。需要知道他們的本源，需要深刻了解 Javascript 基於對象的本質。 還需要深刻了解瀏覽器宿主 下的 Javascript 的行為、特性。 因為歷史原因，Javascript一直不被重視，有點像被收養的一般！ 所以他有很多缺點，各個宿主環境下的行為不統一、內存溢出問題、執行效率低下等問題。 作為一個優秀的前端工程師還需要深入了解、以及學會處理 Javascript 的這些缺陷。 那麼一名優秀的、甚至卓越的 前端開發工程師的具備什麼條件？ 首先，優秀的Web前端開發工程師要在知識體繫上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。 在以前，會一點Photoshop和Dreamweaver的操作，就可以製作網頁。 現在，只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。 Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好。 Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。 其次，優秀的Web前端開發工程師應該具備快速學習能力。Web發展的很快，甚至可以說這些技術幾乎每天都在變化！如果沒有快速學習能力，就跟不上Web發展的步伐。前端工程師必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。 說到這里，我想起了一個大師說過的一句話：對於新手來說，新技術就是新技術。 對於一個高手來說，新技術不過是就技術的延伸。 再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。 1、產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說，產品經理都追求豐富的功能。 2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。 3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。 4、最終用戶。指的是應用程序的主要消費者。盡管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。 Yahoo 公司 ，YUI 的開發工程師 Nicholas C. Zakas 認為： 前端工程師是計算機科學職業領域中最復雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平台中使用，多種技術都借鑒了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而復雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加復雜。專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。 ———————————— 關於書籍： HTML、CSS 類別書籍，都是大同小異，在當當網、卓越網搜索一下很多推薦。如果感覺學的差不多了，可以關注一下《CSS禪意花園》，這個很有影響力。 Javascript 的書籍 推薦看老外寫的，國內很多 Javascript 書籍的作者對 Javascript 語言了解的都不是很透徹。 這里推薦幾本 Javascript 書籍： 初級讀物： 《JavaScript高級程序設計》：一本非常完整的經典入門書籍，被譽為JavaScript聖經之一，詳解的非常詳細，最新版第三版已經發布了，建議購買。 《JavaScript王者歸來》網路的一個Web開發項目經理寫的，作為初學者准備的入門級教程也不錯。 中級讀物： 《JavaScript權威指南》：另外一本JavaScript聖經，講解的也非常詳細，屬於中級讀物，建議購買。 《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神領袖Douglas Crockford的大作，雖然才100多頁，但是字字珠璣啊！強烈建議閱讀。 《高性能JavaScript》：《JavaScript高級程序設計》作者Nicholas C. Zakas的又一大作。 《Eloquent JavaScript》：這本書才200多頁，非常短小，通過幾個非常經典的例子（艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子游戲等等）來介紹JavaScript方方面面的知識和應用方法。 高級讀物： 《JavaScript Patterns 》：書中介紹到了各種經典的模式，如構造函數、單例、工廠等等，值得學習。 《Pro.JavaScript.Design.Patterns》：Apress出版社講解JavaScript設計模式的書，非常不錯。 《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。 《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構設計，值得一讀。 要做優秀的前端工程師，還需要繼續努力：《高性能網站建設指南》、《Yahoo工程師的網站性能優化的建議》、「YSLOW」性能優化建議、《網站重構》、《Web開發敏捷之道》、「 jQuery 庫」、「前端框架」、「HTML5」、「CSS3」。。。 這些都要深入研究！ 萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。 人們常說：不想當裁縫的司機，不是個好廚師。
㈡ web長頁面如何優化
想要成為一名合格的Web前端工程師，Web前端性能優化是一個必須要掌握的知識，那麼應該怎麼進行Web前端性能優化呢？
1、CSS精靈
CSSSprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
2、代碼壓縮
（1）將table改為div布局
盡量將table標簽悉襲布局HTML重構div布局，可以節約至少40%的代碼量。由於div代碼少於table布局的HTML網頁，所以搜索引擎索引權重也優於table布局的HTML網頁。
（2）縮減精簡div、span、ul、li等系列標簽
布局DIV+CSS網頁時候，有時候可以節約一些DIV布局代碼，減少代碼量。
（3）刪除多餘空格
刪除多餘空格換行，可以有效地壓縮HTML代碼佔用位元組，一般在開發完成後可以對HTML中代碼進行刪除換行和空格內容。
（4）表格類型布局時候適當使用table替代div布局
如果是本身是表格數據列表排版，我們最好選擇table，因為埋陸慧表格布局使用table優於div布局，使用table布局卻比div布局節約HTML標簽代碼和節約CSS樣式。
（5）網頁GZIP壓縮
自己的伺服器推薦設置網頁Gzip壓縮功能。
3、高質量的JS代碼肯定能省很多事，封裝JS以及重復調用方法能夠減少很多操作。
4、減少對DOM的操作
（1）創建臨時父元素。
（2）創建子元素，並添加內容，設置屬性。
（3）把子元素加入到臨時父元素中。
（4）把臨時父元素添加到DOM樹。
或：（1）找到要添加位置的元素。
（2）改變該元素內容為需要的HTML。
5、使用JSON格式來進行數據交換
原理：JSON是一種輕量級的數據交換格式，採用完全獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
6、高效使用HTML標簽和CSS樣式
7、使用CDN加速（內容分發網路）
CDN的全稱是ContentDeliveryNetwork，即內容分發網路。CDN是構建在現有網路基礎之上的智能虛擬網路，依靠部署在各地的邊緣伺服器，通過中心平台的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網路擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。
8、精簡CSS和JS文件
9、注意控制Cookie大小彎答和污染
㈢ 如何成為一名優秀的web前端工程師
Web前端開發工程師已經成為了很多年輕人心中的理想工作，不僅入行門檻低、而且薪資待遇和發展前景都不錯，自然吸引了大批人加入行業。那麼，怎麼樣學習才能成為一名合格的web前端開發工程師呢？相信很多初學者都會有這個疑問，下面，就帶大家來看看吧！
零基礎能入門web前端嗎?
新人想要學WEB前端技術，最為關心的是成為WEB前端工程師要多久，學習web前端路線是怎樣的。如果你真想知道學web前端技術的時間是多長，那麼就得了解它究竟要學什麼東西。
web前端開發技術的入門門檻其實並不算高，伺服器端語言的學習特點是先慢後快，而前端開發的學習曲線則是反過來的，前期學習速度很快非常容易上手。前端工程師，也叫Web前端開發工程師。它是隨著web發展，細分出來的行業。
學習web前端要掌握哪些內容？
Web前端開發技術主要學習的內容有三方面：HTML、CSS和JavaScript。近些年前端領域發展迅速，技術更新迭代也很快，這就要求web前端人員除了要掌握必備的知識之外，還需要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
如何成為優秀的web前端開發工程師？
不管是web前端技術還是其他IT技術也好，其實都是從零基礎開始的，你可以直接學習或者是通過相近經歷轉行。所以新人不需要因零基礎而擔心自己學不會。想要成為合格的WEB前端工程師，其實也不是很難的事情，主要是要選擇科學的學習方式。
優秀的Web前端開發工程師應該具備快速學習能力。如果沒有快速學習能力，就跟不上Web發展的步伐。不斷提升自己，不斷學習新技術、新模式。對於新手來說，新技術就是新技術：對於一個高手來說，新技術不過是舊技術的延伸。因此，不斷學習，才是重中之重!
而零基礎學習者想要快速學習web前端，參加學習班是最行之有效的方法。
㈣ 淺談如何做一名優秀的WEB前端工程師
首先，優秀的Web前端開發工程師要在知識體繫上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。
再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。
1、會用PS來進行圖片的處理（比如切圖，微調等）
2、用HTML/CSS實現mockup（可能還有SASS/LESS等工具）
3、熟悉JavaScript（比如前端的MVVM框架，客戶端模板）
4、前端開發的工作流程（代碼檢查，精簡化，模塊化CSS，LiveReload，調試）
5、編寫測試（靜態檢查，單元測試）
6、跨瀏覽器、跨設備的解決方法（不同解析度，不同廠商）
7、會根據項目的特點選擇不同的前端技術棧（移動端，Web站點，響應式設計等）
在有了基礎的HTML/CSS/JS技能之後，你會嘗試做的更好：
1、如何更高效的操作DOM
2、如何將CSS寫的更加清晰易懂
3、如何編寫更加易於維護的代碼（更有意義的單元測試）
4、如何組織大型的項目結構，模塊化，組件化等等
這些要求事實上已經不那麼容易做到了。它可能會花費你2到3年時間來全掌握。但是2到3年之後，即便你已經成為了一個「合格的」前端工程師，這也還遠遠不夠。在現實世界中，一個軟體產品除了前端，還有非常廣闊的空間，還有很多有趣的東西值得學習：
1、HTTP協議本身（緩存，鑒權）
2、Web容器/HTTP伺服器如何工作
3、無狀態的Web應用的工作原理（如何讓網站正確地運行在集群上）
動態，靜態內容如何分離部署（反向代理配置）
4、安全機制如何配置
5、監控機制如何配置
有了這些，也算是有點端到端的意思了。這時你也已經不是一個「純前端」工程師了，系統中的大部分問題你都可以搞定，不過日常工作中可能更多的職責還是做前端的開發。但是這些還不夠，軟體除了交付之外，還有一些非功能性的需求：
1、端到端測試（UI測試，比如selenium server/web driver）
2、devops（比如資料庫環境，測試伺服器，CI伺服器的自動化provision）
3、基本的UI設計原則（在某些頁面確實的情況下，根據系統的已有UI做設計）
4、資料庫性能優化
5、性能測試
這時候，你才能算是一個嚴格意義上的「前端」工程師。可見要想成為一名優秀的Web前端工程師是需要經歷一番歷練的，有基礎的人可以自學，沒基礎的需要參加Web前端培訓課程，這樣學起來更方便。