A. web前端有哪些性能優
一，關鍵資源位元組數
位元組數也就是我通常說的減少資源文件（js,css,image,video...）的大小
1，壓縮
前端使用uglify混淆壓縮
後端開啟gzip
對圖片進行壓縮，使用壓縮比例更高的格式（webP）
強緩存（http狀態碼：200），不用請求伺服器直接使用本地緩存
協商緩存（http狀態碼：304），使用時先請求伺服器若被告知緩存沒過期則使用本地緩存，不用下載資源
使用localstorage對數據進行存儲
使用http2.0的多路復用合並請求
配置combo，在無法使用http2.0的情況下作為一種合並資源請求的手段
使用spite圖
使用svg-symbol
2，緩存
3，針對首屏優化
對非關鍵資源延遲載入、非同步載入，減少首屏資源大小
二，關鍵資源連接數
1，合並請求
2，減少圖片請求數
3，針對一些場景採用css、js內聯的方式
4，使用強緩存減少了一次伺服器請求
5，非關鍵資源延遲、非同步載入，減少了首屏資源連接數
三，關鍵渲染路徑
網上有張關於頁面渲染路徑的圖，這里我就不放了，大家有興趣自己網路下
1，bigpipe分塊輸出
這里主要是因為要完成一整個頁面的輸出後端需要處理很多個任務，我們可以將這些多個任務進行分塊，誰先完成誰就先輸出，最終通過JS回填的方式輸出DOM節點。這種方式主要解決了直出頁面阻塞的問題
2，bigrender分塊渲染
常規的手段就是採用前端模板渲染頁面，針對首屏時間主要減少了首次構建DOM樹時的節點數
3，針對reflow，repaint，composit路徑處理
4，涉及到動畫時關於layer的概念render layer、graphics layer
5，css放在頭部、js放底部避免阻塞DOM樹的構建，
關於css、js的位置對於頁面渲染的影響大家可以關注下相關的文章。
核心：css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染，JS會阻塞DOM樹的構建，CSS會阻塞JS的執行
B. web前端是什麼
Web前端開發是從網頁製作演變而來，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。
隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。Web前端主要是用來開發用戶通過瀏覽器可以瀏覽和使用的Web頁面的。一般而言，所涉及的內容主要包括W3C中的HTML、CSS和JavaScript這三方面的內容。
(2)web前端頁面模版擴展閱讀：
隨著互聯網的迅猛發展和普及，一個新型的行業和新興的職位正在上升到技術的層面：web前端開發工程師
Web前端開發工程師，除了主要職責外，還要為網站上提供的產品和服務實現一流的Web界面，優化代碼並保持良好兼容性
Web前端表現層及與前後端交互的架構設計和開發web前端開發工程師-web2.0時代
配合後台開發人員實現產品界面和功能
利用各種Web技術模擬開發產品原型
Web新技術調研和資訊整理
精通HTML/XHTML、CSS，熟悉頁面架構和布局，對Web標准和標簽語義化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技術，掌握面向對象編程思想
C. web後端和前端是怎麼連接的
WEB後端和WEB前端可以通過前端模板引擎與後端模板引擎進行連接。
後端模板引擎：
WEB前端開發人員開發好前端靜態頁面，然後交給WEB後端開發人員，他們再利用後端引擎模板（比如：freemarker）把前端頁面與後端數據進行連接，形參一個動態頁面。
前端模板引擎：
描述成前端模板引擎可能不太對，但是比較好理解吧。當前比較流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自帶了前端模板引擎。
WEB前端人員與WEB後端人員一起協定好數據介面格式（請求地址、數據格式、數據欄位等），然後WEB前端人員與WEB後端人員同時進行項目的開發，WEB前端人員通過AJAX的方式從WEB後端獲取到前端頁面的相關JSON數據，然後通過MVVM前端框架把JSON數據渲染到頁面裡面，最終形成了一個動態頁面。
D. 前端常用的框架有哪些
前端三大框架，是Angular、React、Vue，這三個框架現在是最為流行也是最多人用的框架。
React：
1.聲明式設計：React採用聲明範式，可以輕松描述應用。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1.速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2.跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的API，甚至在IE8中都是沒問題的。
3.模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4.單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構5.同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。6.兼容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點：React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。
Vue：
Vue是尤雨溪編寫的一個構建數據驅動的Web界面的庫，准確來說不是一個框架，它聚焦在V（view）視圖層。
它有以下的特性：
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
優點：
1.簡單：官方文檔很清晰，比Angular簡單易學。
2.快速：非同步批處理方式更新DOM。
3.組合：用解耦的、可復用的組件組合你的應用程序。
4.緊湊：~18kbmin+gzip，且無依賴。
5.強大：表達式無需聲明依賴的可推導屬性(computedproperties)。
6.對模塊友好：可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
缺點：
1.新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2.影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3.不支持IE8。
Angular：
Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
它有以下的特性：
1.良好的應用程序結構
2.雙向數據綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味著他有一個堅實的基礎和社區支持。
缺點：
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔例子非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7兼容不算特別好,就是可以用jQuery自己手寫代碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果代碼壓縮需要顯示聲明。
E. web前端開發框架有哪些
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
國內首個開源HTML5跨屏前端框架產品系列，中文排版支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(5)web前端頁面模版擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
參考資料來源：網路-前端開發
F. Web前端課程都學什麼
html、CSS3、js、node開發、vue、React、微信小程序等等。
G. web前端 和java
舉個例子，對於廣告系統的來說， 我們先不管一些job，CACHE，config ... 這些優化，些框架和分層可以是這樣的，
MVC的技術選型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架構
前端開發剛興起的階段，前端開發人員的工作經常穿插在後端開發過程中擔任輔助作用的，隨著業務越來越復雜，前端必須有自己的開發框架和流程，使得後端專注於服務類的開發，前端專注於與用戶交互類的開發。
WEB前端從概念上劃分為三個層次：結構、表現、和行為。三層相對獨立，互不影響。在物理上層面上分別對應HTML、CSS、JS三種不同的的文件格式。
HTML：負責定義網頁的結構，內容
CSS：負責內容的展現方式
JS：負責網頁關於動態的行為反應
好的層次劃分對前端的開發也很關鍵。顯示內容問題的唯一來源應該是html文件定義的，內容展示問題的唯一來源應該是CSS文件定義的，行為問題的唯一來源應該是javascript文件定義的，各司其職相互獨立。但是他們是相關的，因為行為和樣式無法與結構分離，必須寫在同一個文件里。這種情況下，首先還是你要把行為和樣式從html標簽中分開，然後在html文件中引入。
前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。
1）結構層
在java領域，表現層技術主要有三種：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在傳統的網頁HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP標記(tag)，它實現Html語法中的java擴展（以 <%, %>形式）。從而形成JSP文件，後綴名為(.jsp)。因為java具有跨平台特點， 用JSP開發的Web應用是跨平台的，既能在Linux下運行，也能在其他操作系統上運行。JSP與Servlet一樣，是在伺服器端執行的，最終都要變.class文件，通常返回給客戶端的就是一個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。
優點：
可以寫java代碼
支持jsp標簽（jsp tag）
支持表達式語言（el）
官方標准，用戶群廣，豐富的第三方jsp標簽庫
性能良好，jsp編譯成class文件執行，有很好的性能表現
缺點：
編寫java代碼，如使用不當容易破壞mvc結構。
(2) Freemarker
它生成靜態頁面，首先需要使用自己定義的模板頁面，這個模板頁面可以是最最普通的html，也可以是嵌套freemarker中的 取值表達式， 標簽或者自定義標簽等等，然後後台讀取這個模板頁面，解析其中的標簽完成相對應的操作， 然後採用鍵值對的方式傳遞參數替換模板中的的取值表達式，做完之後 根據配置的路徑生成一個新的html頁面， 以達到靜態化訪問的目的。
模板+數據模型=輸出，模板只負責數據在頁面中的表現，不涉及任何的邏輯代碼，而所有的邏輯都是由數據模型來處理的。用戶最終看到的輸出是模板和數據模型合並後創建的。
FreeMarker與Web容器無關，即在Web運行時，它並不知道Servlet或者其他。
優點：
可以徹底的分離表現層和業務邏輯，使用JSP 開發過程中在頁面中大量的存在業務邏輯的代碼，使得頁面內容凌亂，在後期大量的修改維護過程中就變得非常困難。FreeMarker根本不支持Java代碼。
可以提高開發效率，JSP在第一次執行的時候需要轉換成Servlet類，開發階段進行功能調適時，需要頻繁的修改JSP，每次修改都要編譯和轉換 。FreeMarker模板技術不存在編譯和轉換的問題，開發過程中，後端不必在等待界面設計開發人員完成頁面原形後，再來開發程序。
對jsp標簽支持良好
內置大量常用功能，比如html過濾，日期金額格式化等等
使用表達式語言 (EL)
缺點：
不是官方標准
用戶群體和第三方標簽庫沒比jsp豐富
使用FreeMarker後，作為界面開發人員，只專心創建HTML文件、圖像以及Web頁面的其他可視化方面，不用理會數據；而程序開發人員則專注於系統實現，負責為頁面准備要顯示的數據。
還有一些像velocity這樣較早出現的用於代替jsp的模板語言 ... ...
2) 表現層CSS
結構搭建之後，就是為他們添加樣式表屬性。它實現的是頁面內容和現實樣式分離，所有的CSS都是非必需的，就算無法應用CSS或CSS沖突，網頁也能夠正常訪問。
為了管理的方便，可以將不同樣式進行拆分，比如可以拆分為全局樣式，結構布局樣式，色彩樣式，文字樣式和重置樣式。css在開發時代碼採用了規范的形式，比如有注釋，縮進等，這樣，這些文件的大小比較大，為了減少網路流量，提高網頁的下載速度，一般發布時需要對javascript和css進行壓縮處理，我們將樣式文件進行合並壓縮，目的是減少與伺服器交互的時間和次數。如http://www.jb51.net/tools/cssyasuo.shtml可以在線進行壓縮。
樣式混合使用選擇：
有關整個網站統一的樣式代碼，放置在獨立的樣式文件中.css
某些樣式不同的頁面，除了鏈接外部樣式文件，還需要自定義的樣式
某張網頁中，部分內容如果需要一種不同，採用內行樣式
) 行為層 javaScript
常見的也是最有名的javascript 框架，其實准確來說應該是庫：
（http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 類庫，它是比較輕量級的類庫，對 DOM 的操作也比較方便到位，支持的效果和控制項也很多。同時，基於 jQuery 有很多擴展項目，包括 jQuery UI(jQuery 支持的一些控制項和效果框架)、jQuery Mobile(移動端的 jQuery 框架)、QUnit(JavaScript 的測試框架)。這些補充使得 jQuery 框架更加完整，而且這些擴展與目前的框架基本都是兼容的，可以交叉使用，使得前端開發更加豐富。
Ext
相比 jQuery，Ext JS 更重量級，有幾個兆的文件，使得 Ext 在開發中成為的弊端和累贅。但是，另一方面，在 Ext JS 龐大的文件背後是 Ext JS 強大的功能。Ext JS 的控制項和功能可以說強大和華麗到的程度。圖表、菜單、特效，Ext JS 的控制項庫非常豐富，同時它的交互也非常強大，獨立靠 Ext JS 幾乎就可以取代控制層完成於客戶的交互。強大的功能，豐富的控制項庫，華麗的效果也使得 Ext JS 成為內網開發利器。
YUI
YUI 也有自己的 JavaScript 類庫，DOM 操作和效果處理也還比較方便，功能和控制項也很齊全，但是相比 jQuery 和 Ext JS 顯得比較中庸一些。隨著 Yahoo的沒落，YUI 也漸漸的被淡化。
目前前端框架主要採用 JavaScript+CSS 模式。基於上面的幾種javascript庫，我們可以基於JQuery框架搭建起一個java web前端系統的框架。如叢林的前端就是COS-UI+jQuery搭建起來的，再利用插件ztree實現品類樹在前端的展示。
jquery對javascript的封裝
JQuery能大大簡化Javascript程序的編寫，主要表現：
定位元素
JS寫法:
document.getElementById("abc")
jQuery寫法:
$("#abc") 通過id定位
$(".abc") 通過class定位
$("div") 通過標簽定位
改變元素的內容
JS寫法：
abc.innerHTML = "TEST";
jQuery寫法：
abc.html("TEST");
顯示隱藏元素
JS 寫法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 寫法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();
修改元素樣式
JS寫法：
abc.STYLE.fontSize=size;
jQuery寫法：
abc.css('font-size', 20);
Ajax
JS
自己創建對象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，則如下處理
//result = eval('(' + result + ')');
//ALERT(result);
}
獲得焦點
為表單賦值
獲得表單的值
設置元素不可用
3) 瀏覽器的渲染
4）web前端開發流程
H. web前端工程師做什麼
主要工作是把UI的設計圖按照w3c標准做成html頁面，並且用javascript腳本語言實現頁面上的前端互動。互動效果包括，彈出層，頁簽切換，圖片滾動，ajax非同步互動等。
高級前端工程師還要承擔前端優化的工作，優化的知識就會更多一些，比如文件過期Expires，緩存，非同步緩存，js和css以及圖片的壓縮等。
前端開發是一項很特殊的工作，前端工程師的工作說得輕松，看似輕巧，但做起來絕對不是那麼的簡單。在開發過程中涵蓋的東西非常寬廣，既要從技術的角度來思 考界面的實現，規避技術的死角，又要從用戶的角度來思考，怎樣才能更好地接受技術呈現的枯燥的數據，更好的呈現信息。簡單地說，它的主要職能就將網站的數 據和用戶的接受更好地結合在一起，為用戶呈現一個友好的數據界面。
前端工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。互聯網的發展速度迅猛，網頁由WEB1.0到WEB2.0，再 到新生的HTML5、CSS3，到現在手機、3G網路等新科技的興起，網頁也由最原先的圖文為主，到現在各種各樣的基於哀前端技術實現的應用、交互和富媒 體的呈現，更多的信息、更豐富的內容、更友好的體驗，已經成為網站前端開發的要求，網站的前端開發發生了翻天可覆地的變化。網站的開發對前端的需要越來越重要，但目前前端工程師需求遠大於供給，前端人才非常緊缺。所以高質量的前端開發工程師將會是後五年內一個非常熱門的職業，發展的前景非常可觀。
PS：歡迎加入我的前端qq交流群，裡面也是一群學前端的小夥伴，我們可以一起學習，互相監督，互相交流學習經驗，一起進行項目實踐。期待你的加入。
I. webpack如何簡單實現類似後端模板功能
// 通用js靜態資源+JS([ 'common/xxx/xxx.js'], 'common/xxx/xxx.js')// 通用css靜態資源+CSS([ 'common/xxx/xxxx.css'], [ 'common/xxx/xxxx.css'])// jade模板中使用的靜態資源img(src="aaaa/bbbb/ccc.png")
div(style="background:url(aaaa/bbbb/cccc.png)")// jade擴展的布局模板extends xxxxx.jade// jade包涵模塊include xxxxx.jade