⑴ 前端工程師有哪些價值
個人認為前端工程師正慢慢演變為產品工程師。wap app, 響應性UI等以html5技術為基礎的開發將成為前端工程師的主要工作內容,解決產品跨平台跨設備的實現問題。Javascript, HTML, CSS這些前端工程師熟悉的,多年使用的語言,作為開放標准將被各種平台所支持。產品形態和數據的分離是形勢所趨。移動時代對產品形態多元化的要求雖然可以靠不同技術分別實現,但要付出巨大的成本。這也是html5這個04年就提出來的標准,直到前兩年才火爆的原因。
現階段的價值也很大。web產品交互越來越復雜,用戶使用體驗和網站前端性能優化,這些都需要專業的前端工程師來解決。另外,在項目中還要彌補設計師在交互設計上的不足,前端工程師在開發過程中起著重要的承上啟下的作用。一兩個前端工程師就可以讓整個開發並行起來,讓設計到實現的轉換更順利。明智的公司應該貯備前端工程師資源。
我不認為前端工程師和產品經理有什麼關系。好的前端工程師一定會成為好的交互設計師。前端工程師對信息架構的理解應不亞於專業的交互設計師。
⑵ 前端工作流程是什麼
公司性質決定流程,不過一般大體都是需求--設計--頁面製作--效果製作--添加程序。
假設 sys 級的規范和標准模塊已經完成(包括全局樣式、布局規范、標准盒模型等),這時需要開發一個項目,假設為淘江湖 SNS 項目。理想中的開發流程為:
a). PD 產出 PRD.
b). 交互統攬全局,將 PRD 中的可復用部分,拎取出來,產出 base-prototype.
c-1). 視覺根據 base-prototype,產出 base-mockup.
c-2). 前端根據 base-prototype 和 base-mockup 產出 app-dpl(該項目的 DPL)。
c-3). 交互繼續具體頁面的 page-prototype 產出工作。
以上三步是並行和迭代進行的。
d-1). 視覺根據 page-prototype 產出 page-mockup.
d-2). 前端根據 page-mockup 產出 page-demo.
以上兩步迭代進行。
流程的核心是迭代、是敏捷、是短周期。
最重要的一步是 base-prototype 的產出。交互要避免一個頁面一個頁面的產出順序,而應該先有一個統攬全局、拎取通用部分的步驟。
以上流程可以簡述為:sys -> app -> page. app 層的抽取很重要,可以提高團隊的開發效率和協作程度,讓團隊更融合、更高效。
感覺 LSM 強調的是前端工程師實現 demo 時的微流程。告訴我們做一個頁面時,需要 html 整體 -> 局部模塊的 css/js, 逐層開發,先整體後局部,先框架後細節。這是非常好的最佳實踐。
⑶ IT前端開發流程
一般的網站開發流程包括四個方面:
1、 總結需求
2、 設計界面
3、 前端開發
4、 後端開發
開發完成後會進行內部測試以及後續的優化等,其中2,3,4可以並行開發。
⑷ 前端和後端是並行開發的么
前端開發和後端開發的區別在於 依、前端開發主要做的是用戶所能看到的前端展示界面 貳、後端開發主要做的是邏輯功能等模塊,是用戶不可見的 三、前端開發用到的技術包括但不限於 html5 css三 javascript jquery Bootstrap Node.js AngularJs等技術 四、後端開發 以java為例 主要用到的 是包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器 等技
⑸ 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發,最常遇見的前端優化問題。前端性能進行優化規則,基本可以涵蓋現在前端大部分的性能優化原則了,很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話,把這個5個文件合成一個的話,就只需要發出一次http請求,節省網路請求時間,加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發,包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候,瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值,從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的,一般對css、js、圖片資源有效。 他可以使內容具有緩存性,這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取,不需要再發出http請求。如下例子:
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應,包括html,xml,json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的,所以css放在頁面的頂部能夠優先渲染頁面,讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞,必須得等js載入完才去載入後續的文件 ,所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式,影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件,可以參考原則4。 但有時候為了減少請求,也會直接寫到頁面里,需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時,需要注意,減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名,我們可以看到他有多個域名,這樣可以保證這些不同域名能夠同時去下載圖片,而不用排隊。不過如果當使用的域名過多時,響應時間就會慢,因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件,把空格回車全部去掉,減少文件的大小。現在的壓縮工具有很多,基本主流的前端構建工具都能進行css和js文件的壓縮,如grunt,glup等。
12. 避免跳轉
有種現象會比較坑爹,看起來沒什麼差別,其實多次了一次頁面跳轉。比如當URL本該有斜杠(/)卻被忽略掉時。例如,當我們要訪問http:// .com時,實際上返回的是一個包含301代碼的跳轉,它指向的是http:// .com/(注意末尾的斜杠)。在nginx伺服器可以使用rewrite;Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉, 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME(保存一個域名和另外一個域名之間關系的DNS記錄)來替代。
13. 刪除重復的JS和CSS
重復調用腳本,除了增加額外的HTTP請求外,多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存,它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性,例如某個文件在1秒內修改了10次,Etag可以綜合Inode(文件的索引節點(inode)數),MTime(修改時間)和Size來精準的進行判斷,避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用,可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待,所以使用ajax請求時,要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話,直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時,瀏覽器中的POST方法是一個「兩步走」的過程:首先發送文件頭,然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問,這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量,就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時,會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西,因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等,客戶端請求靜態文件的時候,減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素(不僅僅是圖片)它都會運算一次,增加了內存開支,因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替,這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader,請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片,影響載入
23. 縮小favicon.ico並緩存
⑹ 前端怎麼並行開發
解決方案:多分支開發系統
服務端環境:SVN
客戶端軟體:小烏龜TortoiseSvn
分支、主幹和標記:用於並行開發,當分支的功能完成後就可以合並到主幹,而
利用標記就可以在任何時間創建一個發布版本。
注意,你可以建多個分支,但主幹只能有一個
創建分支步驟:
1、首先,你應該在本地有一個需要創建分支的工作目錄,如:E:\test
2、點擊右鍵選中這個文件夾,選中TortoiseSVN->分支/標記(branches/tag)
接下來,會彈出對話框,要求你添加創建分支或標記的目標路徑
三個版本選項:
最新版本 – 直接從版本庫中最新創建,創建過程最快。
版本庫中指定的版本號 – 可以通過指定的版本號進行創建。這種創建方式不需要從你的工作目錄拷貝數據,速度較快。
工作副本 –
這種方式會依據當前工作拷貝的版本狀況(無論是你做了本地的修改,或是將其中的某些文件更新到了一個歷史版本)來創建分支拷貝。這種創建方式會根據工作副本中每個文件的版本情況來決定是否要從工作拷貝向版本庫中傳輸數據。切換工作副本至分支/標記:
如果選中這個選項,顧名思義你用來創建分支或標記的工作拷貝就會自動切換到指定創建的版本或標記的。當然你可以通過Switch(重新定位)和Checkout(檢出)功能來完成切換的工作。
版本切換:找到工作目錄,點擊右鍵展開菜單,點擊switch(切換)
⑺ 前端是啥呢
前端到底是什麼?
我們通俗一點的說,web前端就是我們可以直接查看的內容,包含用戶可以看到和體驗的一切,比如你瀏覽網站或使用 APP 的時候,各種各樣的頁面布局、圖片、按鈕、菜單、文字、視頻等等,而後端是程序中無法被用戶看到的這部分,進行數據交互及網站數據的保存和讀取,它包含著所有的邏輯功能支撐著前端。
前端和後端在項目開發過程中都起著至關重要的作用,它們就像同一個硬幣的兩面,都起著重要的作用。
前端開發涉及到的技能主要有:Html、CSS、JavaScript、Java或kotlin(Android開發)、Object-C或Swift(iOS開發;當然也有很多前端的開發框架:Vue、React、Angular 等等;
後端開發語言比較多,現在 Java 佔了大半壁江山,常用的框架或中間件諸如 Spring 全家桶、關系型資料庫 MySQL、Oracle等、非關系型資料庫 Redis、MongoDB、ES 等、消息中間件等等。
可以看到前端開發和後端開發的差別還是比較大的。
現在有一個非常流行的詞兒叫做「前後端分離」,也就是前端工程和後端代碼分開部署,前後端通過介面的方式進行連接,這樣前後端的開發人員在約定好介面之後,就可以並行開發,並且一套後端可以支持不同的前端,實現後端代碼的復用。
⑻ web前端,並行就必須發生在多核處理器上面嗎注意這個詞:必須。
1、不是的,並行是一種邏輯概念,指的是同時執行兩個以上的任務(進程或線程)。這里的同時並不是絕對意義上的同時,比如你開兩個桌面程序,這就叫並行。同理,前端上開兩個以上任務(比如頁面)也叫並行。
2、而多核處理器是物理意義上的東西,說的是一個CPU有2個以上的核心,這個與編程里的概念是完全無關的,也壓根不應該放到一起來討論。
⑼ 前端工程師的價值體現在哪裡呢
前段工程師的作用非常大,在他們的努力下把所有呈現出來的東西都是最美的。
⑽ web前端和後端有哪些區別
前端和後端之間的區別
1、前端與後端的含義的區別
前端是用戶可以看到和交互的網站的一部分,例如圖形用戶界面(GUI)和命令行,包括設計,導航菜單,文本,圖像,視頻等。相反,後端是部分用戶無法查看和互動的網站。一切都是關於一切如何運作的。
2、前端與後端的作用的區別
兩者都在網路開發中起著至關重要的作用,盡管它們有相當大的差異,但它們就像是同一枚硬幣的兩面。前端是關於用戶可以看到和體驗的網站的視覺方面。相反,在後台發生的所有事情都可歸因於後端Web開發。它更像是前端Web體驗的推動者。
3、前端與後端開發上的區別
前端也被稱為「客戶端」而不是後端,後端基本上是應用程序的「伺服器端」。後端Web開發的基本要素包括Java,Ruby,Python,PHP,.Net等語言。最常見的前端語言是HTML,CSS和JavaScript。
如果您對前端和後端之間的差異仍然有點困惑,請始終記住前端與瀏覽器以及發送給它的所有內容相關。如果它與資料庫有關,那麼它與後端相關。
(10)前端並行擴展閱讀:
web前端與後端解耦的好處
前端 - 後端解耦是相關的,特別是在Web應用程序和移動應用程序的情況下,因為開發和發布的速度非常快。在這些域中,用戶體驗優先於其他方面,包括功能深度。讓我們看一下解耦架構提供的一些關鍵優勢。
1、快速開發和測試:作為最大優勢,解耦架構允許前端和後端開發人員獨立工作。由於開發是並行進行的,因此減少了整個項目的時間。業務團隊通常對項目的UI / UX部分的進展非常感興趣,從而導致更快的前端部署。這有助於後端開發人員創建適合前端的數據結構。解耦架構允許項目團隊獨立並行地測試他們的構建,進一步優化項目持續時間。
2、敏捷性:作為另一個好處,UI團隊可以對前端設計進行適當的更改,而無需擔心依賴性和/或對後端進行相應的更改。以同樣的方式,後端開發人員可以修改他們的代碼,而無需冒險進入前端領域。例如,後端開發人員不必確切地考慮特定數據點將如何在屏幕上顯示(反之亦然)。這提高了組織的運營效率,使其能夠以更高的靈活性響應不斷變化的市場需求。
3、開發人員自由:由於應用程序的後端和前端組件與API的謹慎使用鬆散耦合,因此可以最大限度地降低架構的整體復雜性。復雜性降低使開發人員可以自由地對代碼進行更改,從而提高更新發布頻率。