正文

簡述web的工作原理（簡述Web的工作原理）

發(fā)布時間：2023-04-22 02:10:02 稿源：創(chuàng)意嶺閱讀： 93

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于簡述web的工作原理的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、Web服務(wù)器是什么？通俗易懂的回答
2、web2.0的工作原理
3、什么是Web前端？
4、瀏覽器工作原理？

簡述web的工作原理（簡述Web的工作原理）

一、Web服務(wù)器是什么？通俗易懂的回答

WEB服務(wù)器也稱為WWW(WORLD WIDE WEB)服務(wù)器，主要功能是提供網(wǎng)上信息瀏覽服務(wù)。 WWW 是 Internet 的多媒體信息查詢工具，是 Internet 上發(fā)展起來的服務(wù)，也是發(fā)展最快和目前用的最廣泛的服務(wù)。其工作特點為：

1、服務(wù)器是一種被動程序：只有當(dāng)Internet上運行其他計算機中的瀏覽器發(fā)出的請求時，服務(wù)器才會響應(yīng)。

2 、最常用的Web服務(wù)器是Apache和Microsoft的Internet信息服務(wù)器（Internet Information Services，IIS）。

3、Internet上的服務(wù)器也稱為Web服務(wù)器，是一臺在Internet上具有獨立IP地址的計算機，可以向Internet上的客戶機提供WWW、Email和FTP等各種Internet服務(wù)。

4、Web服務(wù)器是指駐留于因特網(wǎng)上某種類型計算機的程序。當(dāng)Web瀏覽器（客戶端）連到服務(wù)器上并請求文件時，服務(wù)器將處理該請求并將文件反饋到該瀏覽器上，附帶的信息會告訴瀏覽器如何查看該文件。服務(wù)器使用HTTP（超文本傳輸協(xié)議）與客戶機瀏覽器進行信息交流。

簡述web的工作原理（簡述Web的工作原理）

擴展資料：

工作原理：

1、連接過程：Web服務(wù)器和其瀏覽器之間所建立起來的一種連接。查看連接過程是否實現(xiàn)，用戶可以找到和打開socket這個虛擬文件，這個文件的建立意味著連接過程這一步驟已經(jīng)成功建立。

2、請求過程：Web的瀏覽器運用socket這個文件向其服務(wù)器而提出各種請求。

3、應(yīng)答過程就是運用HTTP協(xié)議把在請求過程中所提出來的請求傳輸?shù)絎eb的服務(wù)器，進而實施任務(wù)處理，然后運用HTTP協(xié)議把任務(wù)處理的結(jié)果傳輸?shù)絎eb的瀏覽器，同時在Web的瀏覽器上面展示上述所請求之界面。

4、關(guān)閉連接就是當(dāng)上一個過程--應(yīng)答過程完成以后，Web服務(wù)器和其瀏覽器之間斷開連接之過程。Web服務(wù)器上述4個步驟環(huán)環(huán)相扣、緊密相聯(lián)，邏輯性比較強，可以支持多個進程、多個線程以及多個進程與多個線程相混合的技術(shù)。

考資料來源：百度百科-web服務(wù)器

二、web2.0的工作原理

最近互聯(lián)網(wǎng)上比較火熱的話題當(dāng)然是關(guān)于WEB2.0的應(yīng)用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術(shù)，它實際上是幾項技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用，它包括

使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；

使用DOM實現(xiàn)動態(tài)顯示和交互；

使用XML和XSLT進行數(shù)據(jù)交換與處理；

使用XMLHttpRequest進行異步數(shù)據(jù)讀??；

最后用JavaScript綁定和處理所有數(shù)據(jù)；

Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達到節(jié)約ISP的空間及帶寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應(yīng)用：

(1) 用文本字符串的方式返回服務(wù)器的響應(yīng)來驗證網(wǎng)易通行證帳號是否存在；

(2) 以XMLDocument對象方式返回響應(yīng)來驗證金山通行證帳號是否存在；

首先，我們需要用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。后來Mozilla、Netscape、Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創(chuàng)建XMLHttpRequest類的方法不同。

對于Internet Explorer瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來創(chuàng)建XMLHttpRequest類，上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法。

對于Mozilla、Netscape、Safari等瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：

xmlhttp_request = new XMLHttpRequest();

如果服務(wù)器的響應(yīng)沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。為了解決這個問題，如果服務(wù)器響應(yīng)的header不是text/xml，可以調(diào)用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

在實際應(yīng)用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng)建XMLHttpRequest類的方法寫成如下形式：

try{

if( window.ActiveXObject ){

for( var i = 5; i; i-- ){

try{

if( i == 2 ){

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

}else{

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

}

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312");

break;}

catch(e){

xmlhttp_request = false;

}

}else if( window.XMLHttpRequest ){

xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType) {

xmlhttp_request.overrideMimeType('text/xml');

}

}catch(e){

xmlhttp_request = false;

}

在定義了如何處理響應(yīng)后，就要發(fā)送請求了。可以調(diào)用HTTP請求類的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true);

xmlhttp_request.send(null);

open()的第一個參數(shù)是HTTP請求方式—GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。按照HTTP規(guī)范，該參數(shù)要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。

第二個參數(shù)是請求頁面的URL。

第三個參數(shù)設(shè)置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。

用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個HTTP請求后，接下來要決定當(dāng)收到服務(wù)器的響應(yīng)后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應(yīng)?？梢詫ο蟮膐nreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當(dāng)然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){

// JavaScript代碼段

};

在這個函數(shù)中。首先要檢查請求的狀態(tài)。只有當(dāng)一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來對服務(wù)器響應(yīng)進行判斷。

readyState的取值如下：

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (交互中)

4 (完成)

所以只有當(dāng)readyState=4時，一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。具體代碼如下：

if (http_request.readyState == 4) {

// 收到完整的服務(wù)器響應(yīng)

} else {

// 沒有收到完整的服務(wù)器響應(yīng)

}

當(dāng)readyState=4時，一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，接著，函數(shù)會檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時，表示狀態(tài)正常。

在檢查完請求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后，就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：

(1) 以文本字符串的方式返回服務(wù)器的響應(yīng)

(2) 以XMLDocument對象方式返回響應(yīng)

實例一：用文本字符串的方式返回服務(wù)器的響應(yīng)來驗證網(wǎng)易通行證帳號是否存在

首先，我們登陸網(wǎng)易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：

reg.163.com/register/checkssn.jsp?username=用戶名

根據(jù)上面講到的方法，我們可以利用AJAX技術(shù)對網(wǎng)易通行證用戶名進行檢測：

第一步：新建一個基于Xhtml標(biāo)準(zhǔn)的網(wǎng)頁，在<head>區(qū)域插入Javascript函數(shù)如下：

function getXMLRequester( ){

var xmlhttp_request = false;

try{

if( window.ActiveXObject ){

for( var i = 5; i; i-- ){

try{

if( i == 2 ){

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

}else{

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312");

}

break;}

catch(e){

xmlhttp_request = false;

}

}else if( window.XMLHttpRequest ){

xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType) {

xmlhttp_request.overrideMimeType('text/xml');

}

}catch(e){

xmlhttp_request = false;

}

return xmlhttp_request ;

}

function IDRequest(n) {//定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的JavaScript函數(shù)

url=n+document.getElementById('163id').value;//定義網(wǎng)址參數(shù)

xmlhttp_request=getXMLRequester();//調(diào)用創(chuàng)建XMLHttpRequest的函數(shù)

xmlhttp_request.onreadystatechange = doContents;//調(diào)用doContents函數(shù)

xmlhttp_request.open('GET', url, true);

xmlhttp_request.send(null);

}

function doContents() {

if (xmlhttp_request.readyState == 4) {// 收到完整的服務(wù)器響應(yīng)

if (xmlhttp_request.status == 200) {//HTTP服務(wù)器響應(yīng)的值OK

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

//將服務(wù)器返回的字符串寫到頁面中ID為message的區(qū)域

} else {

alert(http_request.status);

}

</script>

在<body>區(qū)域建立一個文本框，id為163id

再建一個id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示)：

這樣，一個基于AJAX技術(shù)的用戶名檢測頁面就做好了，不過這個頁面將返回服務(wù)器響應(yīng)生成頁面的所有字符串，當(dāng)然還可以對返回的字符串進行一些操作，便于應(yīng)用到不同的需要當(dāng)中。

實例二：以XMLDocument對象方式返回響應(yīng)來驗證金山通行證帳號是否存在

在上面的例子中，當(dāng)服務(wù)器對HTTP請求的響應(yīng)被收到后，我們會調(diào)用請求對象的reponseText屬性。該屬性包含了服務(wù)器返回響應(yīng)文件的內(nèi)容?，F(xiàn)在我們以XMLDocument對象方式返回響應(yīng)，此時將不再需要reponseText屬性而使用responseXML屬性。

首先登陸金山通行證注冊頁面，我們發(fā)現(xiàn)金山通行證用戶名的檢測方式為：

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<method>isExistedUid</method>

</response>

當(dāng)result值為-1時表示此用戶名已被注冊，當(dāng)result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。

對上例代碼進行修改：

首先找到

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

改為:

var response = xmlhttp_request.responseXML.documentElement;

var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節(jié)點數(shù)據(jù)

if(result ==-2){

document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊";

}

else if(result ==-1){

document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經(jīng)注冊";

}

通過以上兩個實例說明了AJAX的客戶端基礎(chǔ)應(yīng)用，采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序，當(dāng)然為了開發(fā)合適自己頁面的程序，還需要對自己編寫服務(wù)器端程序，這設(shè)計到程序語言及數(shù)據(jù)庫的操作，對于有一定程序基礎(chǔ)的讀者一定不是很難的事情，本文著重討論了客戶端AJAX的應(yīng)用體驗，廣大讀者可以根據(jù)本文講的原理結(jié)合各種樣式表現(xiàn)手法作出絢麗多彩的應(yīng)用，希望本文能夠起到拋磚引玉的作用。

附錄

(一) HTTP 1.1支持的狀態(tài)代碼

100 Continue 初始的請求已經(jīng)接受，客戶應(yīng)當(dāng)繼續(xù)發(fā)送請求的其余部分

101 Switching Protocols 服務(wù)器將遵從客戶的請求轉(zhuǎn)換到另外一種協(xié)議

200 OK 一切正常，對GET和POST請求的應(yīng)答文檔跟在后面。

201 Created 服務(wù)器已經(jīng)創(chuàng)建了文檔，Location頭給出了它的URL。

202 Accepted 已經(jīng)接受請求，但處理尚未完成。

203 Non-Authoritative Information 文檔已經(jīng)正常地返回，但一些應(yīng)答頭可能不正確，因為使用的是文檔的拷貝

204 No Content 沒有新文檔，瀏覽器應(yīng)該繼續(xù)顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態(tài)代碼是很有用的

205 Reset Content 沒有新的內(nèi)容，但瀏覽器應(yīng)該重置它所顯示的內(nèi)容。用來強制瀏覽器清除表單輸入內(nèi)容

206 Partial Content 客戶發(fā)送了一個帶有Range頭的GET請求，服務(wù)器完成了它

300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經(jīng)在返回的文檔內(nèi)列出。如果服務(wù)器要提出優(yōu)先選擇，則應(yīng)該在Location應(yīng)答頭指明。

301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應(yīng)該自動地訪問新的URL。

302 Found 類似于301，但新的URL應(yīng)該被視為臨時性的替代，而不是永久性的。

303 See Other 類似于301/302，不同之處在于，如果原來的請求是POST，Location頭指定的重定向目標(biāo)文檔應(yīng)該通過GET提取

304 Not Modified 客戶端有緩沖的文檔并發(fā)出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務(wù)器告訴客戶，原來緩沖的文檔還可以繼續(xù)使用。

305 Use Proxy 客戶請求的文檔應(yīng)該通過Location頭所指明的代理服務(wù)器提取

307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應(yīng)302應(yīng)答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應(yīng)答是303時才能重定向。由于這個原因，HTTP 1.1新增了307，以便更加清除地區(qū)分幾個狀態(tài)代碼：當(dāng)出現(xiàn)303應(yīng)答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應(yīng)答，則瀏覽器只能跟隨對GET請求的重定向。

400 Bad Request 請求出現(xiàn)語法錯誤。

401 Unauthorized 客戶試圖未經(jīng)授權(quán)訪問受密碼保護的頁面。應(yīng)答中會包含一個WWW-Authenticate頭，瀏覽器據(jù)此顯示用戶名字/密碼對話框，然后在填寫合適的Authorization頭后再次發(fā)出請求。

403 Forbidden 資源不可用。

404 Not Found 無法找到指定位置的資源

405 Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。

406 Not Acceptable 指定的資源已經(jīng)找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容

407 Proxy Authentication Required 類似于401，表示客戶必須先經(jīng)過代理服務(wù)器的授權(quán)。

408 Request Timeout 在服務(wù)器許可的等待時間內(nèi)，客戶一直沒有發(fā)出任何請求?？蛻艨梢栽谝院笾貜?fù)同一請求。

409 Conflict 通常和PUT請求有關(guān)。由于請求和資源的當(dāng)前狀態(tài)相沖突，因此請求不能成功。

410 Gone 所請求的文檔已經(jīng)不再可用，而且服務(wù)器不知道應(yīng)該重定向到哪一個地址。它和404的不同在于，返回407表示文檔永久地離開了指定的位置，而404表示由于未知的原因文檔不可用。

411 Length Required 服務(wù)器不能處理請求，除非客戶發(fā)送一個Content-Length頭。

412 Precondition Failed 請求頭中指定的一些前提條件失敗

413 Request Entity Too Large 目標(biāo)文檔的大小超過服務(wù)器當(dāng)前愿意處理的大小。如果服務(wù)器認(rèn)為自己能夠稍后再處理該請求，則應(yīng)該提供一個Retry-After頭

414 Request URI Too Long URI太長

416 Requested Range Not Satisfiable 服務(wù)器不能滿足客戶在請求中指定的Range頭

500 Internal Server Error 服務(wù)器遇到了意料不到的情況，不能完成客戶的請求

501 Not Implemented 服務(wù)器不支持實現(xiàn)請求所需要的功能。例如，客戶發(fā)出了一個服務(wù)器不支持的PUT請求

502 Bad Gateway 服務(wù)器作為網(wǎng)關(guān)或者代理時，為了完成請求訪問下一個服務(wù)器，但該服務(wù)器返回了非法的應(yīng)答

503 Service Unavailable 服務(wù)器由于維護或者負(fù)載過重未能應(yīng)答。例如，Servlet可能在數(shù)據(jù)庫連接池已滿的情況下返回503。服務(wù)器返回503時可以提供一個Retry-After頭

504 Gateway Timeout 由作為代理或網(wǎng)關(guān)的服務(wù)器使用，表示不能及時地從遠程服務(wù)器獲得應(yīng)答

505 HTTP Version Not Supported 服務(wù)器不支持請求中所指明的HTTP版本

(二) XMLHttpRequest 對象方法

abort() 停止當(dāng)前請求

getAllResponseHeaders() 作為字符串返問完整的headers

getResponseHeader("headerLabel") 作為字符串返問單個的header標(biāo)簽

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請求的目標(biāo) URL, 方法, 和其他參數(shù)

send(content) 發(fā)送請求

setRequestHeader("label", "value") 設(shè)置header并和請求一起發(fā)送

(三) XMLHttpRequest 對象屬性

onreadystatechange 狀態(tài)改變的事件觸發(fā)器

readyState 對象狀態(tài)(integer):

0 = 未初始化

1 = 讀取中

2 = 已讀取

3 = 交互中

4 = 完成

responseText 服務(wù)器進程返回數(shù)據(jù)的文本版本

responseXML 服務(wù)器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象

status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"

statusText 服務(wù)器返回的狀態(tài)文本信息

三、什么是Web前端？

許多初學(xué)者對WEB前端還很陌生，不知道什么是Web前端？web前端是干什么的？以及web前端技術(shù)需要學(xué)習(xí)什么？其實Web前端開發(fā)也戲稱“web前端開發(fā)攻城獅”，目前這個職位也叫“大前端”。這個職位好多人并不知道是怎么叫出來的，那么我偷偷告訴你：其實是淘寶團隊，發(fā)明出來的本土化的名稱，因為歷史原因，淘寶在2005以后迅速崛起，并且爆發(fā)式的訪問量，讓淘寶網(wǎng)的用戶體驗受到巨大考驗和急需前進。

然后淘寶官方第一次有了【web前端開發(fā)】這個字眼和招聘職位，或許其他網(wǎng)站也想到了這樣一種描述，但是畢竟知名度巨高的淘寶，受關(guān)注度自然高，口碑相傳，就把前端開發(fā)這個叫法發(fā)揚光大了。

而那時候的網(wǎng)頁設(shè)計師如果要入此道，必須要掌握的就是Dreamweaver，并不是說只有他能寫html和css，而是它在當(dāng)時的自動提示實在太好用、太強大了，簡直不用費腦細(xì)胞，你就可以輕輕松松地完成你所想。在當(dāng)時前端工具和編輯器貧乏的時代，這個絕對是神奇級別了（當(dāng)然后來寫的多了都熟悉基本不用提示的）。當(dāng)年還有很多基于Dreamweaver構(gòu)建網(wǎng)站的教程，那時候真的是個基情滿滿的年代，這些工具類的歷史產(chǎn)物，有興趣的朋友可以去了解一下就好了.

Web前端工程師主要做什么？前端工程師需要的知識和技能？

前端工程師是互聯(lián)網(wǎng)時代軟件產(chǎn)品研發(fā)中不可缺少的一種專業(yè)研發(fā)角色。從狹義上講，前端工程師使用HTML、CSS、JavaScript等專業(yè)技能和工具將產(chǎn)品UI設(shè)計稿實現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動端網(wǎng)頁，處理視覺和交互問題。從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分，都是前端工程師的專業(yè)領(lǐng)域。

前端是最接近產(chǎn)品和設(shè)計的工程師，起到銜接產(chǎn)品和技術(shù)的作用，前端為用戶可以看到的部分負(fù)責(zé)，所以也是最接近用戶的工程師。

在多終端的時代，如果一個產(chǎn)品同時支持PC、移動端，前端工程師還需要和更多的角色打交道。

前端要解決界面和交互問題，實際上UI層面上的問題一直是軟件工程方面的一個難題，因為UI不停地在變化。瀏覽器各個版本的兼容性、Web標(biāo)準(zhǔn)、移動設(shè)備、多終端適配，給了前端工程師很大的挑戰(zhàn)，對前端工程師的能力也有很高的要求。許多UI問題有不只一種解決方法，許多問題有非常巧妙的思路和精彩的解決辦法，前端在工程師群體里是屬于非常有創(chuàng)造力的一個群體，因為這個行業(yè)需要豐富的創(chuàng)造力和想象力。

前端工程師還是Web標(biāo)準(zhǔn)的制定者、實踐者和推動者，而現(xiàn)在的W3C標(biāo)準(zhǔn)不僅僅局限于瀏覽器，還包括各種手持智能設(shè)備，車載設(shè)備、智能家居等等。在未來萬物互聯(lián)的時代，前端將不僅僅是網(wǎng)頁上的工程師，而是所有人機交互領(lǐng)域的工程師。

web前端自學(xué)建議：

1、作為一個初學(xué)者，你必須明確系統(tǒng)的學(xué)習(xí)方案，我建議一定要有一個指導(dǎo)人，全靠自己學(xué)，放棄的幾率非常大，在你對于web前端還沒有任何概念的時候，需要一個人領(lǐng)進門，之后就全靠自己鉆研，第一步就是確定web前端都需要學(xué)哪些東西，并且在多長時間內(nèi)學(xué)完，建議時間6個月保底。

2、視頻為主，書為輔。很多初學(xué)者在學(xué)習(xí)前端的時候非常喜歡去買書，但是最后的結(jié)果是什么？看來看去什么都不會寫，所以在這里告訴大家，書可以看，但是是建立在你已經(jīng)對于某個知識點有了具體的操作的執(zhí)行后，再用書去鞏固概念，這樣更加利于你對知識的理解。

3、對于學(xué)習(xí)技術(shù)來講，掌握一個學(xué)習(xí)方法是非常重要的，其實對于學(xué)習(xí)web前端來講，學(xué)習(xí)方法確實很多都是相通的，一旦學(xué)習(xí)方法不對，可能就會造成“方法不對，努力白費”。其實關(guān)于這反面還是很多的，我就簡單說個例子，有的人邊聽課邊敲代碼，這樣是不對的，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經(jīng)驗，一定要聽。根據(jù)每個人的不同，可能學(xué)習(xí)方法也會有所出路，找到適合自己的學(xué)習(xí)方法是學(xué)習(xí)的前提。