整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)習(xí)網(wǎng)頁的概念和分類，了解靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的不同；了解網(wǎng)頁瀏覽器的工作原理。了解HTML,XHTML,HTML5的概念，制作簡單的HTML頁面的開發(fā)。
可以在internet上通過網(wǎng)頁瀏覽信息，如新聞，圖片等，還可發(fā)布信息，如招聘信息等，網(wǎng)頁是在某個(gè)地方某一臺計(jì)算機(jī)上的一個(gè)文件。
網(wǎng)頁主要由3部分組成：結(jié)構(gòu)，表現(xiàn)，行為。
靜態(tài)網(wǎng)頁的特點(diǎn)是不論在何時(shí)何地瀏覽這個(gè)網(wǎng)頁，看到的形式和內(nèi)容都相同，且只能瀏覽，用戶無法與網(wǎng)站進(jìn)行互動。靜態(tài)頁面由HTML編寫，擴(kuò)展名一般為.htm, .html, .shtml, .xml等。與動態(tài)頁面相比，動態(tài)網(wǎng)頁是以.asp, .jsp, .php, .perl, .cgi等形式為后綴。
動態(tài)網(wǎng)頁指網(wǎng)頁的內(nèi)容可以根據(jù)某種條件而自動改變。
采用B/S結(jié)構(gòu)，即瀏覽器/服務(wù)器結(jié)構(gòu)，用戶工作界面是通過www瀏覽器來實(shí)現(xiàn)的：
瀏覽器的工作原理：
www的基礎(chǔ)是HTTP協(xié)議，web瀏覽器就是用于通過url來獲取并顯示web網(wǎng)頁的一種軟件工具，url用于指定要取得的Internet上資源的位置與方式。
HTML是一種用來制作超文本文檔的簡單標(biāo)記語言，用其編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺。
可擴(kuò)展超文本標(biāo)記語言XHTML：
XHTML是不需要編譯，可以直接由瀏覽器執(zhí)行，是一種增強(qiáng)了的HTML。它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用的更多需求，是基于XML的應(yīng)用。開發(fā)者在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行一些擴(kuò)展，由此得到了XHTML，所以，建立XHTML的目的是為了實(shí)現(xiàn)HTML向xml的過渡。
HTML5簡化了：<!DOCTYPE html>，簡化了DOCTYPE,簡化了字符集聲明，以瀏覽器的原生能力替代腳本代碼的實(shí)現(xiàn)，簡單而強(qiáng)大的HTML5API。
文件擴(kuò)展名是操作系統(tǒng)用來標(biāo)志文件格式的一種機(jī)制。擴(kuò)展名如同文件的身份說明，區(qū)別了文件的類別和作用。
HTML網(wǎng)頁的文件后綴名是.html或者.htm.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xxx">
聲明的作用，告訴瀏覽器所書寫的HTML代碼的版本。
復(fù)制代碼<meta>標(biāo)簽，是HTML文檔<head>標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽，meta標(biāo)簽分為2個(gè)重要的屬性：name和http-equiv，通常用于能夠優(yōu)化頁面被搜索的可能性。
meta標(biāo)簽下name屬性的使用：
<head>
<meta name="keywords" content="nine, twenty-three">
<meta name="description" content="...">
<meta name="generator" content="Dreamweaver">
<meta name="author" content="depp">
<meta name="robots" content="all">
</head>
復(fù)制代碼meta標(biāo)簽下的另一個(gè)屬性http-equiv,其作用是反饋給瀏覽器一些明確的信息，幫助瀏覽器更精確地展示頁面。
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
復(fù)制代碼link標(biāo)簽，定義了一個(gè)外部文件的鏈接，經(jīng)常被用于鏈接外部css樣式。
base標(biāo)簽為整個(gè)頁面定義了所有鏈接的基礎(chǔ)定位，其主要的作用是確保文檔中所有的相對url都可以被分解成確定的文檔地址。
style標(biāo)簽用于定義css的樣式。表明了在頁面中引入一個(gè).style的樣式表。
script標(biāo)簽用于定義頁面內(nèi)的腳本。
titl標(biāo)題標(biāo)簽，body體標(biāo)簽.
一個(gè)好的HTML文檔應(yīng)具備以下3個(gè)方面：
<br>..</br>
<p>...</p>
復(fù)制代碼<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
復(fù)制代碼給文本加標(biāo)注：<acronym title="">...</acronym>注釋的內(nèi)容放在title屬性后的引號中，被注釋的內(nèi)容放在標(biāo)簽內(nèi)。
無序列表：ul,li，有序列表：ol li
定義列表：
<dl>
<dt>...</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
</dl>
復(fù)制代碼所以總的來說：jepg可以壓縮圖像的容量，png的質(zhì)量較好，gif可以做動畫。
矢量圖
說說矢量圖和位圖最大的區(qū)別：
無論是否對圖像進(jìn)行縮放，都不會影響矢量圖的效果，但會影響圖的質(zhì)量。
設(shè)計(jì)者一般只愿意將logo,ui圖標(biāo)，標(biāo)識符號等簡單圖像存為矢量圖。
圖像的分辨率
分辨率的單位是dpi即每英寸顯示的線數(shù)。通常所指的分辨率有兩種，屏幕分辨率和圖片分辨率，屏幕分辨率即計(jì)算機(jī)顯示器默認(rèn)的分辨率。
一般目前大部分顯示器的分辨率是1024px x 768px，圖片分辨率定義是用于量度位圖圖像內(nèi)數(shù)據(jù)量多少的一個(gè)參數(shù)。
分辨率越高的圖像，包含的數(shù)據(jù)越多，圖像的容量就越大，會消耗更多的計(jì)算機(jī)資源，需要更大的存儲空間。
分辨率指的是每英寸的像素值，通過像素和分辨率的換算可以測算圖片的長度。
頁面中的圖像
<img src=... alt=.../>
復(fù)制代碼<img style="vertial-align:text-top"/>
復(fù)制代碼<img style="vertical-align:middle"/>
復(fù)制代碼<img style="vertical-align:text-bottom"/>
復(fù)制代碼<img style="vertical-alignbaseline"/>
復(fù)制代碼hspace=30px表示圖像左，右兩邊與頁面其他內(nèi)容隔30px的距離。vspace=30px表示圖像上，下兩邊與頁面的其他內(nèi)容的間隔距離是30px。
<img src="" widht="" height="">
<img src="..." border=>
<hr align=".." width="..." size="...">
<a href="鏈接對象的路徑">鏈接錨點(diǎn)對象</a>
復(fù)制代碼把郵箱留給需要聯(lián)系你的人
<a href="mailto:郵箱地址">鏈接錨點(diǎn)對象</a>
復(fù)制代碼dashed 虛線
double 雙線
groove 槽線
inset 內(nèi)陷
outset 外陷
復(fù)制代碼熱點(diǎn)圖像區(qū)域的鏈接
map標(biāo)簽：
<map id=...>
<area shape="..." coords="..." href="...">
</map>
復(fù)制代碼shape屬性，用于確定選區(qū)的形狀，rect矩形，circle圓形，poly多邊形。href屬性，就是超鏈接。coords屬性，用于控制形狀的位置，通過坐標(biāo)來找到這個(gè)位置。
計(jì)算矩形的面積
<html>
<head>
<title>計(jì)算矩形的面積</title>
<style type="text/css">
.result {font-weight:bold;}
</style>
<script language="JavaScript">
function calculate() {
var length=document.data.length.value;
var width=document.data.width.value;
var height=document.data.height.value;
var area=document.getElementById('area');
area.innerHTML=length*widht;
volume.innerHTML=length*widht*height;
}
</script>
復(fù)制代碼<form action="my.php"></form>
復(fù)制代碼它表明了這是一個(gè)表單，其作用是提交my.php頁面中的數(shù)據(jù)。
<form name="data">
復(fù)制代碼原理：在客戶端接收用戶的信息，然后將數(shù)據(jù)遞交給后臺的程序來操控這些數(shù)據(jù)。
<script language="JavaScript">
復(fù)制代碼如果通過引用外部javascript程序，就像鏈接外聯(lián)樣式：
<script type="text/javascript" src="dada.js"></script>
復(fù)制代碼<form action="da.php"></form>
復(fù)制代碼提交方式用get，表單域中輸入的內(nèi)容會添加在action指定的url中，當(dāng)表單提交之后，用戶會獲取一個(gè)明確的url。get在安全性上較差，所有表單域的值直接呈現(xiàn)。post除了有可見的處理腳本程序，別的東西都可以隱藏。
<form name="dada">
復(fù)制代碼<form action="mailto:da@qq.com" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
復(fù)制代碼是指用戶輸入數(shù)據(jù)的地方，表單域可分為3個(gè)對象，input, textarea, select。
input對象下的多種表單的表現(xiàn)形式。
<input name="" type="" value="" size="" maxlength="">
復(fù)制代碼<form action="" method="post">
<input name="name" type="text" size="20" maxlength="12">
</form>
<input name="secret" type="password" size="20" maxlength="20">
<input name="one" type="radio" value="one" checked="checked">
<input name="one" type="radio" value="two">
<input type="submit" value="確定">
<input type="reset" value="恢復(fù)">
復(fù)制代碼創(chuàng)建submit按鈕或reset按鈕時(shí)，name屬性不是必需的。
使用hidden來記錄頁面的數(shù)據(jù)并將它隱藏起來，用戶對這些數(shù)據(jù)通常并不關(guān)心，但是必須提交數(shù)據(jù)。
<form action=da.asp>
<input type=hidden name=somehidden value=dada>
<input type=submit value=下一頁>
</form>
復(fù)制代碼image樣式的表單
<input type="image" src="圖片/小圖標(biāo).jpg" alt="確定">
復(fù)制代碼file上傳文件的樣式表單
file樣式表單允許用戶上傳自己的文件
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body {font:120% 微軟雅黑;}
input {font:100% 微軟雅黑;}
</style>
</head>
上傳我的文件：
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
</body>
</html>
復(fù)制代碼textarea對象的表單
textarea對象的表單
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body{font:120% 微軟雅黑;}
textarea{font:80% 微軟雅黑;color:navy;}
</style>
</head>
<body>
留言板
<form action="..." method="post" enctype="multipart/form-data">
<textarea name="dada" rows="10" cols="50" value="dada">請說：</textarea>
</form>
</body>
</html>
復(fù)制代碼select對象的表單
select對象的表單
<form action="">
地址:
<select name="da1">
<option>1</option>
</select>
</form>
復(fù)制代碼使用optgroup標(biāo)簽配合label屬性來給選項(xiàng)分類：
<select name="上海">
<optgroup label="da1">
<option>1</option>
</optgroup>
<optgroup label="da2">
<option>2</option>
</optgroup>
</select>
復(fù)制代碼在select標(biāo)簽中加入size屬性即可，如size=6表示是一個(gè)能容納6行文字的文本框，超出設(shè)置的行數(shù)時(shí)，將出現(xiàn)滾動條。
<select name="上海" size="6">
復(fù)制代碼表單域集合：表單域的代碼由fieldset標(biāo)簽和legend標(biāo)簽組合而成。
<form action="..." method="post">
<fieldset>
<legend>注冊信息：</legend>
輸入用戶名：<input name="name" type="text" size="20" maxlength="12">
</fieldset>
</form>
復(fù)制代碼表單輸入類型
<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
復(fù)制代碼<input type="email" name="dada" id="dada" value="23@qq.com"/>
復(fù)制代碼<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
復(fù)制代碼<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
復(fù)制代碼增加表單的特性以及元素
<input name="name" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
復(fù)制代碼<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交到page1" formaction="?page=1”/>
<input type="submit" value="提交到page2" formaction="?page=2"/>
<input type="submit" value="提交"/>
</form>
復(fù)制代碼placeholder特性
<input name="name" type="text" placeholder="請輸入關(guān)鍵詞"/>
復(fù)制代碼autofocus特性：用于當(dāng)頁面加載完成時(shí)，可自動獲取焦點(diǎn)，每個(gè)頁面只允許出現(xiàn)一個(gè)有autofocus特性的input元素。
<input name="key" type="text" autofocus/>
復(fù)制代碼autocomplete特性用于form元素和輸入型的Input元素，用于表單的自動完成。
input name="key" type="text" autocommplete="on"/>
復(fù)制代碼autocomplete特性有三個(gè)值，可以指定"on","off"和""不指定，不指定就將使用瀏覽器的默認(rèn)設(shè)置。
<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
復(fù)制代碼keygen元素提供一個(gè)安全的方式來驗(yàn)證用戶。
<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
復(fù)制代碼<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
復(fù)制代碼為某個(gè)表單內(nèi)部的元素設(shè)置了required特性，那么這項(xiàng)的值不能為空，否則無法提交表單。
<input name="name" type="text" placeholder="dada" required/>
復(fù)制代碼<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
復(fù)制代碼<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
復(fù)制代碼<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
復(fù)制代碼var validityState=document.getElementById("username").validity;
復(fù)制代碼var willValidate=document.getElementById("username").willValidate;
復(fù)制代碼var validationMessage=document.getElementById("username").validationMessage;
復(fù)制代碼好了各位，以上就是這篇文章的全部內(nèi)容，能看到這里的人都是人才。我后面會不斷更新技術(shù)相關(guān)的文章，如果覺得文章對你有用，歡迎給個(gè)“贊”，也歡迎分享，感謝大家 ！！
前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式，通過nginx+tomcat的方式（也可以中間加一個(gè)nodejs）有效的進(jìn)行解耦，并且前后端分離會為以后的大型分布式架構(gòu)、彈性計(jì)算架構(gòu)、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等等）打下堅(jiān)實(shí)的基礎(chǔ)。這個(gè)步驟是系統(tǒng)架構(gòu)從猿進(jìn)化成人的必經(jīng)之路。
核心思想：前端html頁面通過ajax調(diào)用后端的restuful api接口并使用json數(shù)據(jù)進(jìn)行交互。
在互聯(lián)網(wǎng)架構(gòu)中，
web服務(wù)器：一般指像nginx，apache這類的服務(wù)器，他們一般只能解析靜態(tài)資源。
應(yīng)用服務(wù)器：一般指像tomcat，jetty，resin這類的服務(wù)器可以解析動態(tài)資源也可以解析靜態(tài)資源，但解析靜態(tài)資源的能力沒有web服務(wù)器好。
一般都是只有web服務(wù)器才能被外網(wǎng)訪問，應(yīng)用服務(wù)器只能內(nèi)網(wǎng)訪問。
以前的JavaWeb項(xiàng)目大多數(shù)都是java程序員又當(dāng)?shù)之?dāng)媽，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。
隨著時(shí)代的發(fā)展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情。正所謂術(shù)業(yè)有專攻。
對于后端java工程師：
把精力放在java基礎(chǔ)，設(shè)計(jì)模式，jvm原理，spring+springmvc原理及源碼，linux，mysql事務(wù)隔離與鎖機(jī)制，mongodb，http/tcp，多線程，分布式架構(gòu)（dubbo，dubbox，spring cloud），彈性計(jì)算架構(gòu)，微服務(wù)架構(gòu)（springboot+zookeeper+docker+jenkins），java性能優(yōu)化，以及相關(guān)的項(xiàng)目管理等等。
后端追求的是：三高（高并發(fā)，高可用，高性能），安全，存儲，業(yè)務(wù)等等。
對于前端工程師：
把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多線程，模塊化，面向切面編程，設(shè)計(jì)模式，瀏覽器兼容性，性能優(yōu)化等等。
前端追求的是：頁面表現(xiàn)，速度流暢，兼容性，用戶體驗(yàn)等等。
通常我們的JavaWeb項(xiàng)目都是使用了若干后臺框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。大多數(shù)項(xiàng)目在java后端都是分了三層，控制層（controller/action），業(yè)務(wù)層（service/manage），持久層（dao）。控制層負(fù)責(zé)接收參數(shù)，調(diào)用相關(guān)業(yè)務(wù)層，封裝數(shù)據(jù)，以及路由&渲染到j(luò)sp頁面。然后jsp頁面上使用各種標(biāo)簽（jstl/el/struts標(biāo)簽等）或者手寫java表達(dá)式（<%=%>）將后臺的數(shù)據(jù)展現(xiàn)出來，玩的是MVC那套思路。緊接著系統(tǒng)發(fā)布，你需要用maven或者eclipse等工具把你的代碼打成一個(gè)war包，然后把這個(gè)war包發(fā)布到你的生產(chǎn)環(huán)境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，對吧？發(fā)布完了之后，你要啟動你的web容器，開始提供服務(wù)，這時(shí)候你通過配置域名，dns等等相關(guān)，你的網(wǎng)站就可以訪問了。這樣一來，你的前后端代碼全都在那個(gè)war包里了，包括你的js，css，圖片，各種第三方的庫。
在瀏覽器中輸入你的網(wǎng)站域名（www.xxx.com），之后發(fā)生了什么？瀏覽器通過域名，再通過dns服務(wù)器找到你的服務(wù)器外網(wǎng)ip,將http請求發(fā)送到你的服務(wù)器，在tcp3次握手之后（http下面是tcp/ip），通過tcp協(xié)議開始傳輸數(shù)據(jù)，你的服務(wù)器得到請求后，開始提供服務(wù)，接收參數(shù)，之后返回你的應(yīng)答給瀏覽器，瀏覽器再通過content-type來解析你返回的內(nèi)容，呈現(xiàn)給用戶。
我們先假設(shè)你的首頁中有100張圖片，此時(shí)，用戶的看似一次http請求，其實(shí)并不是一次，用戶在第一次訪問的時(shí)候，瀏覽器中不會有緩存，你的100張圖片，瀏覽器要連著請求100次http請求（有人會跟我說http長連短連的問題，不在這里討論），你的服務(wù)器接收這些請求，都需要耗費(fèi)內(nèi)存去創(chuàng)建socket來玩tcp傳輸（消耗你服務(wù)器上的計(jì)算資源）。這樣的話，你的服務(wù)器的壓力會非常大，因?yàn)轫撁嬷械乃姓埱蠖际侵徽埱蟮侥氵@臺服務(wù)器上，如果1個(gè)人還好，如果10000個(gè)人并發(fā)訪問呢（先不聊服務(wù)器集群，這里就說是單實(shí)例服務(wù)器），那你的服務(wù)器能扛住多少個(gè)tcp連接？你的帶寬有多大？你的服務(wù)器的內(nèi)存有多大？你的硬盤是高性能的嗎？你能抗住多少IO？你給web服務(wù)器分的內(nèi)存有多大？會不會宕機(jī)？
這就是為什么，越是大中型的web應(yīng)用，他們越是要解耦。
理論上你可以把你的數(shù)據(jù)庫+應(yīng)用服務(wù)+消息隊(duì)列+緩存+用戶上傳的文件+日志+等等都扔在一臺服務(wù)器上，你也不用玩什么服務(wù)治理，也不用做什么性能監(jiān)控，什么報(bào)警機(jī)制等等。但是這樣把雞蛋都放在一個(gè)籃子里，隱患非常大。如果因?yàn)橐粋€(gè)子應(yīng)用的內(nèi)存不穩(wěn)定導(dǎo)致整個(gè)服務(wù)器內(nèi)存溢出而hung住，那你的整個(gè)網(wǎng)站就掛掉了。
JSP的痛點(diǎn)：
以前的javaWeb項(xiàng)目大多數(shù)使用jsp作為頁面層展示數(shù)據(jù)給用戶，因?yàn)榱髁坎桓撸虼艘矝]有那么苛刻的性能要求，但現(xiàn)在是大數(shù)據(jù)時(shí)代，對于互聯(lián)網(wǎng)項(xiàng)目的性能要求是越來越高。
1.動態(tài)資源和靜態(tài)資源全部耦合在一起，服務(wù)器壓力大，因?yàn)榉?wù)器會收到各種http請求，例如css的http請求，js的，圖片的等等。一旦服務(wù)器出現(xiàn)狀況，前后臺一起玩完，用戶體驗(yàn)極差。
2.UI出好設(shè)計(jì)圖后，前端工程師只負(fù)責(zé)將設(shè)計(jì)圖切成html，需要由java工程師來將html套成jsp頁面，出錯率較高，修改問題時(shí)需要雙方協(xié)同開發(fā)，效率低下。
3.jsp必須要在支持java的web服務(wù)器里運(yùn)行（例如tomcat，jetty，resin等），無法使用nginx等（nginx據(jù)說單實(shí)例http并發(fā)高達(dá)5w，這個(gè)優(yōu)勢要用上），性能提不上來。
4.第一次請求jsp，必須要在web服務(wù)器中編譯成servlet，第一次運(yùn)行會較慢。
5.每次請求jsp都是訪問servlet再用輸出流輸出的html頁面，效率沒有直接使用html高。
6.jsp內(nèi)有較多標(biāo)簽和表達(dá)式，前端工程師在修改頁面時(shí)會遇到很多痛點(diǎn)。
7.如果jsp中的內(nèi)容很多，頁面響應(yīng)會很慢，因?yàn)槭峭郊虞d。
8.需要前端工程師使用java的ide（例如eclipse），以及需要配置各種后端的開發(fā)環(huán)境，你們有考慮過前端工程師的感受嗎。
基于上述的一些痛點(diǎn)，我們應(yīng)該把整個(gè)項(xiàng)目實(shí)現(xiàn)前后端真正的解耦！
前后分離的優(yōu)勢：
1.可以實(shí)現(xiàn)真正的前后端解耦，前端服務(wù)器使用nginx。
前端/WEB服務(wù)器放的是css，js，圖片等等一系列靜態(tài)資源（甚至你還可以css，js，圖片等資源放到特定的文件服務(wù)器，例如阿里云的oss，并使用cdn加速），前端服務(wù)器負(fù)責(zé)控制頁面引用&跳轉(zhuǎn)&路由，前端頁面異步調(diào)用后端的接口，后端/應(yīng)用服務(wù)器使用tomcat（把tomcat想象成一個(gè)數(shù)據(jù)提供者），加快整體響應(yīng)速度。
（這里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）
2.發(fā)現(xiàn)bug，可以快速定位是誰的問題，不會出現(xiàn)互相踢皮球的現(xiàn)象。
頁面邏輯，跳轉(zhuǎn)錯誤，瀏覽器兼容性問題，腳本錯誤，頁面樣式等問題，全部由前端工程師來負(fù)責(zé)。
接口數(shù)據(jù)出錯，數(shù)據(jù)沒有提交成功，應(yīng)答超時(shí)等問題，全部由后端工程師來解決。
雙方互不干擾，前端與后端是相親相愛的一家人。
3.在大并發(fā)情況下，可以同時(shí)水平擴(kuò)展前后端服務(wù)器，比如淘寶的一個(gè)首頁就需要2000+臺前端服務(wù)器做集群來抗住日均多少億+的日均pv。
4.減少后端服務(wù)器的并發(fā)/負(fù)載壓力
除了接口以外的其他所有http請求全部轉(zhuǎn)移到前端nginx上，接口的請求調(diào)用tomcat，參考nginx反向代理tomcat。
且除了第一次頁面請求外，瀏覽器會大量調(diào)用本地緩存。
5.即使后端服務(wù)暫時(shí)超時(shí)或者宕機(jī)了，前端頁面也會正常訪問，只不過數(shù)據(jù)刷不出來而已。
6.也許你也需要有微信相關(guān)的輕應(yīng)用，那樣你的接口完全可以共用，如果也有app相關(guān)的服務(wù)，
那么只要通過一些代碼重構(gòu)，也可以大量復(fù)用接口，提升效率。（多端應(yīng)用）
7.頁面顯示的東西再多也不怕，因?yàn)槭钱惒郊虞d。
8.nginx支持頁面熱部署，不用重啟服務(wù)器，前端升級更無縫。
9.增加代碼的維護(hù)性&易讀性（前后端耦在一起的代碼讀起來相當(dāng)費(fèi)勁）。
10.提升開發(fā)效率，因?yàn)榭梢郧昂蠖瞬⑿虚_發(fā)，而不是像以前的強(qiáng)依賴。
11.在nginx中部署證書，外網(wǎng)使用https訪問，并且只開放443和80端口，其他端口一律關(guān)閉（防止黑客端口掃描），內(nèi)網(wǎng)使用http，性能和安全都有保障。
12.前端大量的組件代碼得以復(fù)用，組件化，提升開發(fā)效率，抽出來！
總結(jié)一下新的方式的請求步驟：
大量并發(fā)瀏覽器請求--->web服務(wù)器集群(nginx)--->應(yīng)用服務(wù)器集群(tomcat)--->文件/數(shù)據(jù)庫/緩存/消息隊(duì)列服務(wù)器集群
同時(shí)又可以玩分模塊，還可以按業(yè)務(wù)拆成一個(gè)個(gè)的小集群，為后面的架構(gòu)升級做準(zhǔn)備。
擊上方 關(guān)注訂閱黑碼教主獲取更多精彩內(nèi)容
在多重嵌套循環(huán)的程序上，如果能分出出多個(gè)獨(dú)立循環(huán)也比嵌套在一個(gè)循環(huán)體內(nèi)來的更有益。
優(yōu)化循環(huán)的3種方式：減少每次迭代的開銷、減少迭代的次數(shù)或者重新設(shè)計(jì)應(yīng)用程序。
在測試的時(shí)候僅可能模擬真實(shí)環(huán)境:如低端機(jī)器和低速網(wǎng)絡(luò)。
?
對于連續(xù)頁面之間的差別很小的應(yīng)用而言，使用Ajax技術(shù)能帶來顯著的改善。
?
在HTML頁面完成展現(xiàn)之后，動態(tài)改變頁面元素或調(diào)整CSS樣式都會引起瀏覽器重繪，性能的損耗直接取決于動態(tài)改變的范圍：如果只是改變一個(gè)元素的顏色之類的信息則只會重繪該元素；而如果是增刪節(jié)點(diǎn)或調(diào)整節(jié)點(diǎn)位置則會引起其兄弟節(jié)點(diǎn)也一并重繪。
減少重繪并不是說不要重繪，而是要注意重繪范圍：
以改變一個(gè)<a>標(biāo)簽的背景色、寬度和顏色為例。
<a href="javascript：void(0);" id="example">傳統(tǒng)的代碼</a>
<script>
var example=document.getElementById("example");
example.ondblclick=function() {
example.style.backgroundColor="red";
example.style.width="200px";
example.style.color="white";
}
</script>
以上會執(zhí)行3次重繪，而通過CSS代替javascript多次執(zhí)行則只進(jìn)行一次重繪。
<style>
.dblClick {
width: 200px;
background: red;
color: white;
}
</style>
<a href="javascript：;" id="example">CSS優(yōu)化的代碼</a>
<script>
var example=document.getElementById("example");
example.ondblclick=function() {
example.className="dblClick";
}
</script>
當(dāng)瀏覽器在解析常規(guī)的script標(biāo)簽時(shí)，它需要等待script下載完畢，再解析執(zhí)行，而后續(xù)的HTML代碼只能等待。CSS文件引入要放在頭部，因?yàn)檫@是HTML渲染必備元素。
?
為了避免阻塞加載，應(yīng)把腳本放到文檔的末尾，而CSS是需要放在頭部的！
<head> <link rel="stylesheet" href="common.css"> ...... <script src="example.js"></script> </body>
深層級嵌套的節(jié)點(diǎn)在初始化構(gòu)建時(shí)往往需要更多的內(nèi)存占用，并且在遍歷節(jié)點(diǎn)時(shí)也會更慢些，這與瀏覽器構(gòu)建DOM文檔的機(jī)制有關(guān)。瀏覽器會把整個(gè)HTML文檔的結(jié)構(gòu)存儲為DOM“樹”結(jié)構(gòu)。當(dāng)文檔節(jié)點(diǎn)的嵌套層次越深，構(gòu)建的DOM樹層次也會越深。
如下代碼，完全能夠去掉
或其中一個(gè)標(biāo)簽。<div> <span> <label>嵌套</label> </span> </div>
頁面緩存
通常不設(shè)置緩存的情況下，每次刷新頁面都會重新讀取服務(wù)器的文件，而如果設(shè)置緩存之后，所有文件都可以從本地取得，這樣明顯極大提高了頁面效率。
我們可以通過設(shè)置頁面頭的expires來定義頁面過期時(shí)間，將過期時(shí)間定久一點(diǎn)就達(dá)到了“永久”緩存。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
當(dāng)然，如果你的項(xiàng)目代碼有變更，因?yàn)榭蛻舳司彺媪宋募偷貌坏阶钚碌奈募瑒荼卦斐娠@示錯誤。基于這個(gè)問題的解決方案就是給鏈接文件加一個(gè)時(shí)間戳，如果時(shí)間戳有變化，瀏覽器會認(rèn)為是新文件，就會向服務(wù)器請求最新文件。
<script src="example2014-6-17.js"></script>
//如果是JSP，可以用EL表達(dá)式來取時(shí)間戳信息，這樣管理更加方便
<script src="example${your time param}.js"></script>
//或者這樣的寫法更優(yōu)秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>
所有涉及到請求數(shù)據(jù)的文件盡量做壓縮，比如Javascript文件、css文件及圖片文件，特別是圖片文件，如果沒有高清晰要求，完全可以壓縮后再使用。
數(shù)量少體積大的文件要比數(shù)量多體積小的文件加載速度快，所以有時(shí)候可以考慮將多個(gè)js文件、多個(gè)css文件合并在一起。
除此之外減少HTML文檔大小還可以采取下面幾種方法：
圖像合并其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS 的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
一個(gè)頁面要用到多個(gè)圖標(biāo)，完全可以將多個(gè)圖標(biāo)合并成一個(gè)圖，然后只需要發(fā)一次圖片請求，通過css定位分割圖標(biāo)即可。
使用iframe并不會增加同域名下的并行下載數(shù)，瀏覽器對同域名的連接總是共享瀏覽器級別的連接池，在頁面加載過程中iframe元素還會阻塞父文檔onload事件的觸發(fā)。并且iframe是html標(biāo)簽中最消耗資源的標(biāo)簽，它的開銷比DIV、SCRIPT、STYLE等DOM高1~2個(gè)數(shù)量級。
避免onload事件被阻塞，可使用JavaScript動態(tài)的加載iframe元素或動態(tài)設(shè)置iframe的src屬性（但其僅在高級瀏覽器IE9及以上有效）。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");
一般來說，瀏覽器對于相同域名的圖片，最多用2-4個(gè)線程并行下載（不同瀏覽器的并發(fā)下載數(shù)是不同的）。而相同域名的其他圖片，則要等到其他圖片下載完后才會開始下載。
有時(shí)候，圖片數(shù)據(jù)太多，一些公司的解決方法是將圖片數(shù)據(jù)分到多個(gè)域名的服務(wù)器上，這在一方面是將服務(wù)器的請求壓力分到多個(gè)硬件服務(wù)器上，另一方面，是利用了瀏覽器的特性。（大家可以去新浪、騰訊門戶網(wǎng)站查看，這些大型站點(diǎn)同一頁面加載的圖片可能由多個(gè)站點(diǎn)提供）
注：一個(gè)HTML請求的域名也不要太多（2~3個(gè)差不多），多了可能造成不同服務(wù)器連接時(shí)間差異，反而影響速度。
如<img src=""><a href="">這樣的設(shè)置方式是非常不可取的，即使鏈接為空，在舊的瀏覽器也會以固定步驟發(fā)送請求信息。
另外<a href="#"></a>也不可取，最好的方式是在鏈接中加一個(gè)空的js代碼<a href="javascript：void();"></a>
base64是一串字符串，他可以代表一個(gè)圖片的所有信息，也就是可以通過
（S表示一串base64碼）來顯示圖片，這種方式不需要再向服務(wù)器發(fā)送請求，完全由瀏覽器解析成圖片。
目前高級瀏覽器都支持此功能，但要注意兩點(diǎn)：
如果HTML里的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實(shí)際圖片的尺寸不符時(shí)，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示，這會消耗額外時(shí)間。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");
如果瀏覽器不能獲知頁面的編碼字符集，一般都會在執(zhí)行腳本和渲染頁面前，把字節(jié)流緩存，然后再搜索可進(jìn)行解析的字符集，或以默認(rèn)的字符集來解析頁面代碼，這會導(dǎo)致消耗不必要的時(shí)間。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");
漸進(jìn)式增強(qiáng)設(shè)計(jì)的通俗解釋就是：首先寫一段滿足所有瀏覽器的基本樣式，再在后面針對不同高級瀏覽器編寫更漂亮的樣式
如下代碼，所有瀏覽器都支持background-color: #2067f5;滿足了瀏覽器基本現(xiàn)實(shí)需求，而后面的background-image: -webkit-gradient等則為不同高級瀏覽器使用，只要瀏覽器識別就能執(zhí)行這段代碼（不識別，CSS也不會報(bào)錯只會直接忽略）。
<div class="someClass"></div>
.someClass
{ width: 100px;
height: 100px;
background-color: #2067f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5),
to(#154096));
background-image: -webkit-linear-gradient(top, #2067f5, #154096);
background-image: -moz-linear-gradient(top, #2067f5, #154096);
background-image: -ms-linear-gradient(top, #2067f5, #154096);
background-image: -o-linear-gradient(top, #2067f5, #154096);
background-image: linear-gradient(to bottom, #2067f5, #154096);
}
預(yù)加載和懶加載，是一種改善用戶體驗(yàn)的策略，它實(shí)際上并不能提高程序性能，但是卻可以明顯改善用戶體驗(yàn)或減輕服務(wù)器壓力。
預(yù)加載表示當(dāng)前用戶在請求到需要的數(shù)據(jù)之后，頁面自動預(yù)加載下一次用戶可能要看的數(shù)據(jù)，這樣用戶下一次操作的時(shí)候就立刻呈現(xiàn)，依次類推。
懶加載表示用戶請求什么再顯示什么，如果一個(gè)請求要響應(yīng)的時(shí)間非常長，就不推薦懶加載。
當(dāng)一個(gè)頁面非常大，內(nèi)容非常多，可以采用flush的形式分部分返回給頁面，這樣能告訴用戶我正在工作，顯示一部分內(nèi)容比白屏等很長時(shí)間要好得多。在Java Web技術(shù)中，實(shí)現(xiàn)Flush非常簡單，只要調(diào)用 HttpServletResponse.getWriter輸出流的flush方法，就可以將已經(jīng)完成加載的內(nèi)容寫回給客戶端。
這種方式只適用于返回?cái)?shù)據(jù)特別多、請求時(shí)間特別長的情況，常規(guī)數(shù)據(jù)還是用正常的實(shí)時(shí)全部返回最佳。這種實(shí)現(xiàn)方式實(shí)際會增加瀏覽器渲染時(shí)間和用戶整體等待時(shí)間，但從用戶體驗(yàn)上會更加優(yōu)秀。
所謂的CDN，就是一種內(nèi)容分發(fā)網(wǎng)絡(luò)，它采用智能路由和流量管理技術(shù)，及時(shí)發(fā)現(xiàn)能夠給訪問者提供最快響應(yīng)的加速節(jié)點(diǎn)，并將訪問者的請求導(dǎo)向到該加速節(jié)點(diǎn)，由該加速節(jié)點(diǎn)提供內(nèi)容服務(wù)。
通俗點(diǎn)說，你在成都（瀏覽器）購買了北京賣家（服務(wù)器）的產(chǎn)品，北京賣家通過快遞（CDN服務(wù)）寄送包裹，從北京到成都可以走路、坐汽車、火車或飛機(jī)，而采用CND的快遞會選擇飛機(jī)直達(dá)，因?yàn)檫@種寄送方式最快。
當(dāng)然使用CDN有兩個(gè)注意事項(xiàng)：
瀏覽器緩存帶來的性能提升已經(jīng)眾人皆知了，而很多人卻并不知道瀏覽器的緩存過期時(shí)間、緩存刪除、什么頁面可以緩存等，都可以由我們程序員來控制，只要您熟悉HTTP協(xié)議，就可以輕松的控制瀏覽器。
所謂的動靜分離，就是將Web應(yīng)用程序中靜態(tài)和動態(tài)的內(nèi)容分別放在不同的Web服務(wù)器上，有針對性的處理動態(tài)和靜態(tài)內(nèi)容，從而達(dá)到性能的提升。我們知道如果一個(gè)HTML有多個(gè)域名請求數(shù)據(jù)文件會提高
Tomcat服務(wù)器在處理靜態(tài)和并發(fā)問題上比較弱，所以事先動靜分離的方式一般會用Apache+Tomcat、Nginx+Tomcat等。
以Apache+Tomcat為例，其運(yùn)行機(jī)理是：頁面請求首先給Apache，然后Apache分析請求信息是靜態(tài)還是動態(tài)，靜態(tài)則本機(jī)處理，動態(tài)則交給Tomcat做處理。
這其實(shí)是負(fù)載均衡的雛形，這樣的實(shí)現(xiàn)不用讓開發(fā)人員做任何特殊開發(fā)，一個(gè)
交給服務(wù)器即可，至于這個(gè)文件是從Apache還是從Tomcat取得，開發(fā)人員完全無需關(guān)注。
持久連接（Keep-Alive）也叫做長連接，它是一種TCP的連接方式，連接會被瀏覽器和服務(wù)器所緩存，在下次連接同一服務(wù)器時(shí)，緩存的連接被重新使用。HTTP無狀態(tài)性表示了它不屬于長連接，但HTTP/1.1提供了對長連接的支持（不過這必須依賴瀏覽器和服務(wù)器雙方均支持長連接功能才行），最常見的HTTP長連接例子是“斷點(diǎn)下載”。
瀏覽器在請求的頭部添加 Connection:Keep-Alive，以此告訴服務(wù)器“我支持長連接，你支持的話就和我建立長連接吧”，而倘若服務(wù)器的確支持長連接，那么就在響應(yīng)頭部添加“Connection:Keep-Alive”，從而告訴瀏覽器“我的確也支持，那我們建立長連接吧”。服務(wù)器還可以通過Keep-Alive:timeout=..., max=...的頭部告訴瀏覽器長連接失效時(shí)間。
配置長連接通常是要服務(wù)器支持設(shè)置，有測試數(shù)據(jù)顯示，使用長連接和不使用長連接的性能對比，對于Tomcat配置的maxKeepAliveRequests為50來說，效率竟然提升了將近5倍。
HTTP協(xié)議支持GZIP的壓縮格式，當(dāng)服務(wù)器返回的HTML信息報(bào)頭中包含Content-Encoding:gzip，它就告訴瀏覽器，這個(gè)響應(yīng)的返回?cái)?shù)據(jù)已經(jīng)壓縮成GZIP格式，瀏覽器獲得數(shù)據(jù)后要進(jìn)行解壓縮操作，一定程度上減輕了服務(wù)器傳輸數(shù)據(jù)的壓力。
很多服務(wù)器已經(jīng)支持通過配置來自動將HTML信息壓縮成GZIP，比如tomcat、又比如很火的Nginx。如果無法配置服務(wù)器級別的GZIP壓縮機(jī)制，可以改為程序壓縮。
// 監(jiān)視對 gzipCategory 文件夾的請求
@WebFilter(urlPatterns={ "/gzipCategory/*" })
public class GZIPFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
String parameter=request.getParameter("gzip");
// 判斷是否包含了 Accept-Encoding 請求頭部
HttpServletRequest s=(HttpServletRequest)request;
String header=s.getHeader("Accept-Encoding");
//"1".equals(parameter) 只是為了控制，如果傳入 gzip=1，才執(zhí)行壓縮，目的是測試用
if ("1".equals(parameter) && header !=null && header.toLowerCase().contains("gzip")) {
HttpServletResponse resp=(HttpServletResponse) response;
final ByteArrayOutputStream buffer=new ByteArrayOutputStream();
HttpServletResponseWrapper hsrw=new HttpServletResponseWrapper(
resp) {
@Override
public PrintWriter getWriter() throws IOException {
return new PrintWriter(new OutputStreamWriter(buffer,
getCharacterEncoding()));
}
@Override
public ServletOutputStream getOutputStream() throws IOException {
return new ServletOutputStream() {
@Override
public void write(int b) throws IOException {
buffer.write(b);
}
};
}
};
chain.doFilter(request, hsrw);
byte[] gzipData=gzip(buffer.toByteArray());
resp.addHeader("Content-Encoding", "gzip");
resp.setContentLength(gzipData.length);
ServletOutputStream output=response.getOutputStream();
output.write(gzipData);
output.flush();
} else {
chain.doFilter(request, response);
}
}
// 用 GZIP 壓縮字節(jié)數(shù)組
private byte[] gzip(byte[] data) {
ByteArrayOutputStream byteOutput=new ByteArrayOutputStream(10240);
GZIPOutputStream output=null;
try {
output=new GZIPOutputStream(byteOutput);
output.write(data);
} catch (IOException e) {
} finally {
try {
output.close();
} catch (IOException e) {
}
}
return byteOutput.toByteArray();
}
……
}
如果你覺得本篇還不錯，請點(diǎn)贊關(guān)注！
文字由黑碼教主創(chuàng)作，配圖源于網(wǎng)絡(luò)，版權(quán)歸原作者所有,如有侵權(quán)聯(lián)系刪除！
你有更好的網(wǎng)站性能優(yōu)化方案嗎？
歡迎留言分享。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
