⑴ 淺談如何做一名優秀的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前端培訓課程，這樣學起來更方便。
⑵ 如何實現前端工程化和靜態資源的管理
提升開發體驗
我們主要從以下三個方面來提升我們的開發體驗。
規范化
當團隊人員不斷擴充時，我們需要制定統一的規范來對平時的開發工作做出一定約束和指導。統一的規范包括前端的代碼規范，根據規范定義好一套代碼檢查的規則，在代碼提交的時候進行檢查，讓開發人員知道自己的代碼情況。
同時，根據以往的開發經驗，我們制定了統一的項目框架，根據業務功能不同，將一個項目(app)拆分成不同的業務模塊(mole)，而每一個模塊都包含自身的頁面(page)以及構成頁面所需要的組件(widget)，每一個項目涉及到app、mole、page、widget這些已經約定好的概念，這樣讓項目結構更加清晰，而且讓團隊內不同業務的人員之間切換無障礙。
組件化
在項目中引入組件化的概念，這里的組件對應上文講到的widget，每一個組件都會包含組件自身的模板、css、js、圖片以及說明文件，我們使用組件來拼裝頁面，像搭積木一樣來拼裝我們的頁面，同時一個組件內可以調用另一個組件。
在拿到設計稿後，我們首先需要確定哪些需要做成公共組件，那些是要做成獨立組件，以及組件間如何進行通信。在頁面中調用這些組件後，會自動載入組件的模板以及組件的靜態資源，而當組件不再需要時，只要移除掉組件引用，那麼相應的模板和靜態資源也會不再載入。
組件化的好處主要有這么幾點
管理方便，我們可以把一個獨立功能相關的文件在工程目錄中放在一起，這樣代碼管理起來會非常便利
組件復用，通過抽取公共組件，可以實現組件復用，從而減少工作量，創造價值
分而治之，這是組件化最重要的一點，將頁面組件化，就是對頁面功能的拆分，將一個大的工程拆成小的零件，我們只需要關注每一個零件的功能，極大地降低了頁面的開發與維護的難度
自動化編譯
在前端開發中，我們總是會去使用很多工具、手段來優化代碼、提升開發效率，例如，我們會使用sass、less等CSS預處理工具來編寫更好維護的樣式代碼，我們也會使用CSSLint、eslint等代碼檢查工具來檢查代碼的語法錯誤，使用文件合並壓縮等手段來減少資源大小，除此之外我們還會去做雪碧圖合並、多倍圖處理、字體壓縮處理、代碼發布等等。
曾經有大神說過，超過90s的工作都應該自動化掉。而以上所有的這些工作，貫穿我們整個開發流程，但是不同工具的切換不但顯得凌亂，而且影響開發效率。在自動化、工程編譯的思想早已深入人心的當下，我們當然也要緊跟潮流，所以我們考慮通過自動化手段來提升我們的效率，讓所有操作可以一鍵式開速執行完。
我們將通過定義好一系列的編譯任務，按照一定順序依次對我們的項目自動進行編譯操作，最後產生出可上線的代碼。
⑶ 為什麼有些前端代碼審查的時候可以看到，另存到本地或查看源代碼就看不到了呢
不是靜態的保存到本地是沒有的，審查的時候能看到某些代碼是因為此刻的網頁是動態編譯並非靜態
⑷ 前端怎麼快速篩選頁面沒用的js和css文件
從我用過的方法，可以從兩個層面來說，不過都是沒有辦法100%的精準和全面的。也可能還有一些更好的方法，不過我沒用過。
代碼檢測
對於JS，可以使用JSHint或者ESLint進行進行代碼檢測，可以檢測到每個代碼裡面你定義（或者引入）但是並沒有用到的變數。你可以在你的編輯器裡面安裝相關插件，也可以通過在每次代碼提交之前進行檢測。相關使用方法可以看這里：ESLint，JSHint比如：我使用VI作為編輯器，截圖中使用的是ESLint:
.
⑸ 求前端驗證js代碼
這是一般表單中會用到的 1. 長度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(」不能超過50個字元！」);
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit=」return test()」>
<textarea name=」b」 cols=」40″ wrap=」VIRTUAL」 rows=」6″></textarea>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
2. 只能是漢字
<input onkeyup=」value=」/oblog/value.replace(/[^\u4E00-\u9FA5]/g,」)」>
3.」 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyEng();」>
4. 只能是數字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考慮小鍵盤上的數字鍵
event.returnvalue=false;
}
</script>
<input onkeydown=」onlyNum();」>
5. 只能是英文字元和數字
<input onkeyup=」value=」/oblog/value.replace(/[\W]/g,」」) 「onbeforepaste=」clipboardData.setData(』text』,clipboardData.getData(』text』).replace(/[^\d]/g,」))」>
6. 驗證郵箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert(」oh」);
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽關鍵字(這里屏蔽***和****)
<script language=」javascript1.2″>
function test() {
if((a.b.value.indexOf (」***」) == 0)||(a.b.value.indexOf (」****」) == 0)){
alert(」:)」);
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit=」return test()」>
<input type=text name=b>
<input type=」submit」 name=」Submit」 value=」check」>
</form>
8. 兩次輸入密碼是否相同
<FORM METHOD=POST ACTION=」">
<input type=」password」 id=」input1″>
<input type=」password」 id=」input2″>
<input type=」button」 value=」test」 onclick=」check()」>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(」false」)
input1.value = 「」;
input2.value = 「」;
}
else document.forms[0].submit();
}
}
</script>
夠了吧 :)
屏蔽右鍵 很酷
oncontextmenu=」return false」 ondragstart=」return false」 onselectstart=」return false」
加在body中
二
2.1 表單項不能為空
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(」請輸入您姓名!」);
document.form.name.focus();
return false;
}
return true;
}
–>
</script>
2.2 比較兩個表單項的值是否相同
<script language=」javascript」>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert(」您兩次輸入的密碼不一樣！請重新輸入.」);
document.ADDUser.PWD.focus();
return false;
}
return true;
}
–>
</script>
2.3 表單項只能為數字和」_」,用於電話/銀行帳號驗證上,可擴展到域名注冊等
<script language=」javascript」>
<!–
function isNumber(String)
{
var Letters = 」1234567890-」; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )==』-')
return false;
if( String.charAt( String.length - 1 ) == 』-』 )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert(」您的電話號碼不合法！」);
document.form.TEL.focus();
return false;
}
return true;
}
–>
</script>
2.4 表單項輸入數值/長度限定
<script language=」javascript」>
<!–
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert(」輸入數值不能小於零大於100!」);
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert(」輸入文字小於10!」);
document.form.MESSAGE.focus();
return false;
}
return true;
}
//–>
</script>
2.5 中文/英文/數字/郵件地址合法性判斷
<SCRIPT LANGUAGE=」javascript」>
<!–
function isEnglish(name) //英文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值檢測
{
if(! isEnglish(name))
return false;
i = name.indexOf(」 at 」);
j = name dot lastIndexOf(」 at 」);
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //數值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < 」0″ || name.charAt(i) > 」9″)
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert(」您的電子郵件不合法！」);
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert(」英文名不合法！」);
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert(」中文名不合法！」);
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert(」郵政編碼不合法！」);
form.PublicZipCode.focus();
return false;
}
return true;
}
//–>
</SCRIPT>
2.6 限定表單項不能輸入的字元
<script language=」javascript」>
<!–
function contain(str,charset)// 字元串包含測試函數
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, 」%\(\)><」)) || (contain(document.form.MESSAGE.value, 」%\(\)><」)))
{
alert(」輸入了非法字元」);
document.form.NAME.focus();
return false;
}
return true;
}
//–>
</script>
1. 檢查一段字元串是否全由數字組成
—————————————
<script language=」Javascript」><!–
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum(」1232142141″))
alert(checkNum(」123214214a1″))
// –></script>
2. 怎麼判斷是否是字元
—————————————
if (/[^\x00-\xff]/g.test(s)) alert(」含有漢字」);
else alert(」全是字元」);
3. 怎麼判斷是否含有漢字
—————————————
if (escape(str).indexOf(」%u」)!=-1) alert(」含有漢字」);
else alert(」全是字元」);
4. 郵箱格式驗證
—————————————
//函數名：chkemail
//功能介紹：檢查是否為Email Address
//參數說明：要檢查的字元串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf(』@');
var tempd = a.indexOf(』.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 數字格式驗證
—————————————
//函數名：fucCheckNUM
//功能介紹：檢查是否為數字
//參數說明：要檢查的數字
//返回值：1為是數字，0為不是數字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp=」0123456789″;
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//說明有字元不是數字
return 0;
}
}
//說明是數字
return 1;
}
6. 電話號碼格式驗證
—————————————
//函數名：fucCheckTEL
//功能介紹：檢查是否為電話號碼
//參數說明：要檢查的字元串
//返回值：1為是合法，0為不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp=」0123456789-()# 「;
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//說明有字元不合法
return 0;
}
}
//說明合法
return 1;
}
7. 判斷輸入是否為中文的函數
—————————————
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 綜合的判斷用戶輸入的合法性的函數
—————————————
<script language=」javascript」>
//限制輸入字元的位數開始
//m是用戶輸入，n是要限制的位數
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判斷密碼是否輸入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判斷用戶名是否為數字字母下滑線
—————————————
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true); }
}
2.8. form文本域的通用校驗函數
—————————————
作用：檢測所有必須非空的input文本，比如姓名，賬號，郵件地址等等。
該校驗現在只針對文本域，如果要針對form裡面的其他域對象，可以改變判斷條件。
使用方法：在要檢測的文本域中加入title文字。文字是在提示信息，你要提示給用戶的該欄位的中文名。比如要檢測用戶名
html如下<input name=」txt_1″ title=」姓名」>,當然，最好用可視化工具比如dreamweaver什麼的來編輯域。
如果要檢測數字類型數據的話，再把域的id統一為sz.
javascript判斷日期類型比較麻煩，所以就沒有做日期類型校驗的程序了.高手可以補充。
程序比較草，只是提供一個思路。拋磚引玉！ ：）
哦，對了，函數調用方法：
< form onsubmit=」return dovalidate()」>
function dovalidate()
{
fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件
for(i=0;i<fm.length;i++)
{
//檢測判斷條件，根據類型不同可以修改
if(fm[i].tagName.toUpperCase()==」INPUT」 &&fm[i].type.toUpperCase()==」TEXT」 && (fm[i].title!=」"))
if(fm[i].value=」/blog/=」")//
{
str_warn1=fm[i].title+」不能為空!」;
alert(str_warn1);
fm[i].focus();
return false;
}
if(fm[i].id.toUpperCase()==」SZ」)//數字校驗
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+」格式不對」;
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}
⑹ 請問，有沒有一款綜合性的前端測試工具，集成常用的前端測試工具
沒有特別集成的總和工具，給樓主列舉了一系列的測試工具
1. Browser Shots
Browsershots工具提供了對你的Web設計在不同操作系統和瀏覽器下截圖的功能。它是一個免費的在線開源Web工具，使開發人員能以一種便捷的方式同時測試網頁的瀏覽器兼容情況。在Browsershots上提交的網址將被添加到一個任務隊列。隨後一些分布式的計算機將在各自的瀏覽器中打開該網站並截圖。最終可通過一個中央伺服器來查看這些上傳的截圖。
2. IETester
IETester是一個免費的Web瀏覽器調試工具，可以模擬出不同的js引擎來幫助程序員設計效果統一的代碼。IETester可以在獨立的標簽頁中開啟IE 5.5、IE 6、IE 7以及最新的IE 8（9） beta等不同版本的IE。
3. WebPage Speed Test
使用該工具可在全球不同位置及不同瀏覽器中測試網頁的真實鏈接速度。除了簡單的測速，你還可以執行一些其他高級測試，如多步執行（multi-step transaction）、視頻錄制、內容阻止等。測試結果將提供豐富的診斷信息，包括資源載入瀑布圖、網頁速度優化檢查及改進建議等。
4. Mobile testing
使用這個工具你可以查看你的網站在移動設備上的效果。可以設置移動設備的類型、錄屏，以及結果不公開。
5. Feed validator
免費的W3C Feed校驗服務，可用於查找Atom和RSS Feed中的語法錯誤。
6. Instant Website Test
該工具提供免費即時的網站性能測試服務。可從全球不同位置探測你的網站載入速度有多快，並查明是何者降低了頁面性能。
7. Pingdom
輸入URL，即可測試頁面的載入時間，分析並發現加速的「瓶頸」所在。
8. Link Checker
該工具可用於搜尋查明你網站內的所有鏈接里是否有斷鏈。
9. DNS Health Checker
正確的DNS設置對網站運行來說是至關重要的。Pingdom的DNS Health test工具可以幫助你發現錯誤的DNS設置，並檢查域名解析是否正確。它能夠自動發現你所指定域名使用的DNS伺服器，然後執行一系列迭代測試來查明域名設置及DNS伺服器響應是否正確。
10. Load impact
Load Impact是一個在線網站負載測試服務，可以幫助你測試網站的負載和壓力。
11. Google web page tester
Google的Page Speed Service，可以為第三方網站提供網頁加速服務。你只需要把以前的域名CNAME到ghs.google.com，瀏覽者就不再直接訪問網站的伺服器，而是轉到Google的伺服器上。Google的伺服器會抓取網站伺服器上的網站內容，然後進行重寫、緩存。它使用類似CDN（內容分發）的原理，而比普通只提供緩存的CDN多了內容重寫的環節，自動為網頁提供合並CSS、合並JavaScript、將CSS移到HTML的Head、壓縮圖片、優化圖片、緩存圖片、碎片域名、gzip資源等網頁加速技巧。
12. Validate you HTML code
該工具可用於檢查Web文檔中HTML、XHTML、SMIL、MathML等標記的有效性。
13. Website vulnerability tool
免費的在線網路漏洞掃描工具，可用於檢查你的網站的安全性。
⑺ javascript代碼冗餘檢查工具有什麼推薦的
目前後端語言 靜態代碼檢查工具已經有很多成熟的工具可用，前端代碼有的靜態代碼檢查工具
網上有些工具，可以參考。
就這些了。
⑻ 怎麼樣才算是優秀的前端工程師
首先，優秀的Web前端開發工程師要在知識體繫上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。
再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。
這時候，你才能算是一個嚴格意義上的「前端」工程師。可見要想成為一名優秀的Web前端工程師是需要經歷一番歷練的，有基礎的人可以自學，沒基礎的需要參加Web前端培訓課程，這樣學起來更方便。
⑼ 前端的代碼code review工具有沒有推薦
首先，我們先來看看Code Reivew的用處：
Code reviews 中，可以通過大家的建議增進代碼的質量。
Code reviews 是一個傳遞知識的手段，可以讓其它並不熟悉代碼的人知道作者的意圖和想法，從而可以在以後輕松維護代碼。
Code reviews 也鼓勵程序員們相互學習對方的長處和優點。
Code reviews 也可以被用來確認自己的設計和實現是一個清楚和簡單的。
你也許注意到了在上面的Code Reivew中的諸多用處中，我們沒有提到可以幫助找到程序的bug和保證代碼風格和編碼標准。這是因為我們認為：
Code reviews 不應該承擔發現代碼錯誤的職責。Code Review主要是審核代碼的質量，如可讀性，可維護性，以及程序的邏輯和對需求和設計的實現。代碼中的bug和錯誤應該由單元測試，功能測試，性能測試，回歸測試來保證的（其中主要是單元測試，因為那是最接近Bug，也是Bug沒有擴散的地方）
Code reviews 不應該成為保證代碼風格和編碼標準的手段。編碼風格和代碼規范都屬於死的東西，每個程序員在把自己的代碼提交團隊Review的時候，代碼就應該是符合規范的，這是默認值，屬於每個人自己的事情，不應該交由團隊來完成，否則只會浪費大家本來就不夠的時間。我個人認為「meeting」是奢侈的，因為那需要大家在同一時刻都擠出時間，所以應該用在最需要的地方。代碼規范比起程序的邏輯和對需求設計的實現來說，太不值得讓大家都來了。
10年前，上面這兩件事會是理所當然的（10年前的中國的軟體開發還沒有Code Reivew呢），今天，在中國的很多公司上面這兩件事依然被認為是Code Reivew最重要的事，所以，我能夠看到很多開發Team抱怨Code Review就是一個形式，費時費力不說，發現的問題還不如測試，而評審者們除了在代碼風格上有些見術，別的也就沒什麼用了，長而久之，大家都會開始厭煩這個事了。
所以，在今天，請不要把上面的那兩件事分散了Code Review的注意力，取而代之的是，對於Bug，程序的作者要在Review前提交自己的單元測試報告（如：XUnit的測試結果），對於代碼規范，這是程序作者自己需要保證的，而且，有一些工具是可以幫你來檢查代碼規范的。
⑽ 前端工作的時候主要做些什麼
隨著WEB前端技術發展，前端的技術已經擴展到任何網站、系統、應用。web前端有廣闊的發展空間，app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業，前端有WEB前端、HTML前端等，隨著互聯網技術發展，就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是，使用HTML5不僅僅可以開發前端，還有網頁游戲，手機APP，使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發，而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高，技術要求高，掌握多種技能，包括：後端技術、DBA、Platform等等，甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能，懂可視化的一定是有前端能力的，懂hadoop的一定java要熟悉，屬於Web開發的拓展方向。
大前端方向
比如阿里，在大量實踐rn和weex;由於公司內部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系，除了上面提到了可視化，還有相關3d引擎的開發工作。做這一行要求也非常高了，圖形學相關的演算法，3d引擎的開發，這都需要圖形學相關知識。