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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...