web前端工程師入門須知

時間 2019-11-18

標籤 web 前端工程師入門須知欄目 HTML 简体版

原文原文鏈接

先說下web前端工程師的價值，目前web產品交互愈來愈複雜，用戶使用體驗和網站前端性能優化這些都得靠web前端工程師去作web前端工程師是設計加開發的綜合體，web前端工程師是在開發人員中最直接面向產品，面向用戶的設計人員，一個開發團隊的成果是要靠web前端工程師去展示，由於用戶不會去關心後臺的處理有多麼強大；在設計人員中web前端工程師是直接面向開發人員的設計人員，向開發人員以一種計算機語言的方式傳遞其設計理念，web前端工程師在整個團隊中是很關鍵的。javascript

在我眼中一名合格的web前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個或兩個還不行，你必須對這三門語言都很熟悉。也不是說必須對這三門語言都很是精通，但你至少要可以運用它們完成大多數任務，而無需地頻繁地尋求別人的幫助。html

下面說下我眼中web前端工程師要掌握的基礎知識和技能：前端

1 網頁的基本結構（HTML + CSS）java

HTML 是一種標記語言，而不是編程語言，最基本是標籤是<html>和<body>，CSS是用來定義如何顯示HTML元素的。對 HTML+CSS很容易入門，但不少人不夠深刻，舉幾個例子：<meta> 標籤是做什麼用的？margin-left與left有什麼區別，應該在什麼狀況下使用？再出個DIV+CSS佈局問題：一個寬度不肯定的DIV裏面放三個水平對齊的DIV，左右兩個DIV寬度固定爲150px，中間那個DIV充滿剩餘的寬度。若是這些問題你目前還不知道，對那個佈局問題幾分鐘內不能解決，說明你對HTML+CSS還不夠深刻。jquery

2 瀏覽器是怎麼展示網頁的web

不一樣內核的瀏覽器對網頁的渲染是不同的，目前瀏覽器都有客戶端調試工具，下圖展示一個google首頁在IE9下的加載細節：編程

在作web性能優化時，對瀏覽器渲染及細節要進一步瞭解。說個比較有用的知識點：目前瀏覽器並行加載的上限是6，老版本的瀏覽器會有所不一樣。瀏覽器

3 網頁的生命週期性能優化

不一樣的web框架下，頁面的生命週期會有所不一樣，大致仍是同樣：客戶端發送GET請求，服務器返回相應頁面，客戶端完成操做及數據，而後POST給服務器。必定要對數據的傳遞(前臺與後臺,頁面之間)的細節瞭然於心。服務器

4 DHTML DOM BOM Javascript AJAX

這是Web前端開發的重中之中，大多數時候咱們都在和他們打交道。說幾個注意點：javascript是單線程編程，所謂的javascript異步編程只不過是計劃在將來的某個時間上執行相應事件而已；詳細瞭解DOM事件機制；客戶端存儲（HTML5中增長了localStorage和 sessionStorage）；javascript不像服務器端語言那樣嚴謹，調試不是很方便，因此一開始要養成嚴謹的javascript編輯習慣；javascript很強大很靈活，不要幻想短期內熟練（更別說精通）它，並寫些框架、類庫，初始階段仍是先用熟練已成熟的框架（好比 jquery）當入門；必定要熟練使用客戶端調試工具。

6 服務器端語言開發經驗，PS切圖技術

Web前端開發介於設計與開發中間，因此兩端的東西都得懂點。編輯語言是相通的，以前編寫過服務器語言，對學習javascript是十分有益的，從圖片轉成靜態HTML頁面，少不了PS切圖技術。

5 瀏覽器的兼容性

因爲歷史緣由，瀏覽器的兼容性一直都折磨web前端工程師的地方，雖然有W3組織，並制定了一些規範，雖然瀏覽器產商都正在努力改進並接近其規範，但現實網絡環境中各類內核、各類版本的瀏覽器都有一席之地。解決瀏覽器兼容性靠經驗積累，可喜的事這方面資料網上有不少。http://www.w3help.org/zh-cn/這是個很好的參考網站。

6 快速學習能力和主動學習意願

web 前端的發展很快，從事這一行業必定要有快速學習能力和主動學習意願，這樣才能適應web產品的要求。在web前端領域沒有絕對的是與非,解決一個問題的方法有不少，但咱們要找到一個更合適的方法，找到一個更合適的方法須要經驗做積累，總之web前端入門容易，想熟練很難，須要更多的主動學習意願。

7 良好的溝通能力

優秀的前端工程師須要具有良好的溝通能力，由於你的工做與不少人的工做息息相關，好比項目經理、設計師、最終用戶、開發工程師，前端工程師位於這幾類人的交匯點上，這些角色的要求你都得照顧好，平衡這四類人的需求，拿出一個比較合適的方案。因而可知溝通能力對前端工程師要求更高。你們能夠看看下面這篇博文：http://www.cnblogs.com/trance/archive/2011/08/31/2160617.html。

最後提供一些好的學習資料：

1. W3C學習網站（http://www.w3school.com.cn/），上面的資料很全，很實用，是最好的入門資料。

2. 《javascript權威指南》

3. 《javascript+DOM編程藝術》

4. 《javascript高級程序設計》