web前端工程師入門須知

来源:http://www.cnblogs.com/fsyz/archive/2017/11/30/7931258.html
-Advertisement-
Play Games

本文是寫給那些想要入門web前端工程的初學者,高手請路過,也歡迎高手們拍磚。 先說下web前端工程師的價值,目前web產品交互越來越複雜,用戶使用體驗和網站前端性能優化這些都得靠web前端工程師去做web前端工程師是設計加開發的綜合體,web前端工程師是在開發人員中最直接面向產品,面向用戶的設計人員 ...


本文是寫給那些想要入門web前端工程的初學者,高手請路過,也歡迎高手們拍磚。

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

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

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

1 網頁的基本結構(HTML + CSS)

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

2 瀏覽器是怎麼展現網頁的

不同內核的瀏覽器對網頁的渲染是不一樣的,目前瀏覽器都有客戶端調試工具,下圖展現一個google首頁在IE9下的載入細節:

image_thumb2

在做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組織,並制定了一些規範,雖然瀏覽器產商都正在努力改進並接近其規範,但現實網路環境中各種內核、各種版本的瀏覽器都有一席之地。解決瀏覽器相容性靠經驗積累,可喜的事這方面資料網上有很多。

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

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

7 良好的溝通能力

優秀的前端工程師需要具備良好的溝通能力,因為你的工作與很多人的工作息息相關,比如項目經理、設計師、最終用戶、開發工程師,前端工程師位於這幾類人的交匯點上,這些角色的要求你都得照顧好,平衡這四類人的需求,拿出一個比較合適的方案。由此可見溝通能力對前端工程師要求更高。

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

1. 《javascript權威指南》

2. 《javascript+DOM編程藝術》

3. 《javascript高級程式設計》

學習前端的同學們

歡迎加入前端學習交流QQ群:461593224


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MVVM是一種前端框架模式,框架模式主要是用來管理與組織代碼,在複雜應用中,利用高內聚低耦合的思想,將代碼分離組織到不同部分,每部分都有其關註點和職責,各部分間耦合度低,達到“關註點分離”目的,使整個應用更易管理、維護,每個部分可以單獨更新、替換以及復用,從而達到整個應用的模塊化。 一、概念 MVV ...
  • 在angular中,使用session處理 源碼如下: typescript import { Injectable } from '@angular/core'; import { AES, enc } from 'crypto js'; import { has, isNull, isUndef ...
  • 詳情:http://www.liu12fei08fei.top/ github個人博客綁定單獨阿裡功能變數名稱指南 起源 禁止微信重拍版 給github pages綁定功能變數名稱 獲取github pages的ip地址 配置阿裡雲功能變數名稱並解析(是功能變數名稱就行,是不是阿裡不重要) 配置github pages的custo ...
  • 這篇博文主要涉及到初學React時所總結的內容,也是我從最開始的認識React到後面的逐漸深入學習的歷程,而這篇是開始,當然不會是結束。 ...
  • 其實我們一樣可以很個性。。^_^ 效果實現:(附效果圖) 各位大神有什麼好的意見和指導敬請賜教~~ ...
  • 一. JavaScript語法目錄 二. 具體內容 2.1 語法 javaScript代碼要通過HTML/XHTML文檔才能執行。可以有兩種方式完成這一點,第一種是將JavaScript代碼放到文檔<head>標簽中的<Script>標簽之間: 另一種更好的方式是把JavaScript代碼存放為一個 ...
  • 在學習廖雪峰前輩的JavaScript教程中,遇到了一些需要註意的點,因此作為學習筆記列出來,提醒自己註意! 如果大家有需要,歡迎訪問前輩的博客https://www.liaoxuefeng.com/學習。 標準對象 在JavaScript的世界里,萬物皆對象。 但是對象與對象之間也有區別。為了區分 ...
  • 最新新出的設計稿,設計要求登錄註冊找回密碼不設置單獨頁面 直接彈窗出來 且切換效果要旋轉來 以為不容易 沒想到做著感覺還闊以 哈哈 現在貼出來 這是兩個按鈕,樣式按照自己的來寫就行 <a class="loginEnter" id="loginEnter" href="javascript:;">登 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...