27琼稻、移動(dòng)端響應(yīng)式布局開發(fā)
響應(yīng)式布局開發(fā)
1吮螺、什么是響應(yīng)式布局開發(fā)?
把我們開發(fā)完成的產(chǎn)品帕翻,能夠讓其適配不同的設(shè)備屏幕:PC鸠补、PAD、PHONE
2嘀掸、H5
現(xiàn)在的H5已經(jīng)成為移動(dòng)端開發(fā)(響應(yīng)式布局)的代名詞
目前我們開發(fā)一款app需要h5的介入紫岩,在native-app(內(nèi)置app)中嵌入H5頁(yè)面(web-app),我們這種模式稱之為Hybrid混合App開發(fā)
1睬塌、其實(shí)就是個(gè)HTML頁(yè)面泉蝌, 需要基于瀏覽器運(yùn)行(PC或者移動(dòng)端瀏覽器再或者V8內(nèi)核的工具也可以)歇万,如果想要操作手機(jī)內(nèi)部的軟件或者硬件,需要瀏覽器的支持勋陪;
2贪磺、相比于native-app來(lái)說(shuō)性能不好
3、所有的請(qǐng)求訪問都必須基于聯(lián)網(wǎng)的狀態(tài)诅愚,雖然h5中支持manifest離線緩存缘挽,但是這個(gè)技術(shù)不怎么好用;
native-app不需要聯(lián)網(wǎng)呻粹,是因?yàn)樗械拇a文件都在手機(jī)上壕曼,一些需要聯(lián)網(wǎng)訪問的,native-app都可以做離線緩存(如緩存視頻)等浊;H5頁(yè)面部署到了自己的服務(wù)器上腮郊,源文件都在服務(wù)器上,用戶想要看頁(yè)面,必須從服務(wù)器上重新拉取才可以;
4腻脏、好處:更新比較及時(shí):H5只需要把服務(wù)器上的文件更新疗锐,用戶每次訪問看到的都是最新版本的碳默;
H5是否能操作手機(jī)內(nèi)部的軟件或者硬件,取決于瀏覽器是否支持,如果瀏覽器支持,H5頁(yè)面則可以調(diào)用掸绞,反之則不可以;例如:H5中想要調(diào)取攝像頭耕捞,
[圖片上傳失敗...(image-ecaa5e-1541658084393)]
常見的項(xiàng)目類型
1衔掸、PC端和移動(dòng)端公用一套項(xiàng)目(同一個(gè)地址),我們也要保持良好得展示性俺抽,如:獵豹瀏覽器敞映、華為官網(wǎng)等簡(jiǎn)單得展示網(wǎng)站
2、PC端和移動(dòng)端用的是不同的項(xiàng)目磷斧,如:京東振愿、淘寶、淘寶等
PC端固定布局即可
移動(dòng)端響應(yīng)式開發(fā)
1弛饭、放在瀏覽器中運(yùn)行
2冕末、放在第三方平臺(tái)中運(yùn)行(微信)
3、放在自己公司的native-app中運(yùn)行孩哑;手機(jī)常用尺寸
iphone3-5寬度:320px
iphone4:320480
iphone5:320568
iphone6:375667
iphone6plus:414736
做H5頁(yè)面開發(fā)之前栓霜,需要先從設(shè)計(jì)師手里索要UI設(shè)計(jì)圖翠桦,設(shè)計(jì)圖提供了專門做移動(dòng)端項(xiàng)目的設(shè)計(jì)稿尺寸
640960
6401136
750*1334設(shè)備像素密度比
如何做響應(yīng)式布局開發(fā)横蜒?
只要當(dāng)前頁(yè)面需要在移動(dòng)端訪問胳蛮,必然要加下面的代碼
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
不加VP,不管手機(jī)設(shè)備有多寬,我們HTML頁(yè)面的寬度都是980(如果在320的手機(jī)上觀看HTML頁(yè)面,為了保證把頁(yè)面呈現(xiàn)完全,需要HTML縮小大概三倍左右,所有內(nèi)容都變小了),為了不讓頁(yè)面縮放,我們需要讓HTML的寬度和手機(jī)的寬度保持一致
width=device-width:讓HTNML的寬度和設(shè)備的寬度保持一致
沒有加VP:全體縮小了,需要手動(dòng)縮放著看
//=>JS中動(dòng)態(tài)設(shè)置vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);
REM響應(yīng)式布局
和px像素一樣丛晌,它是一個(gè)CSS樣式單位
PX:固定單位
REM:相對(duì)單位(相對(duì)于頁(yè)面根元素HTML字體大小設(shè)定的單位)
真實(shí)項(xiàng)目中如何使用REM實(shí)現(xiàn)響應(yīng)式布局
1仅炊、先給文檔(html)設(shè)置一個(gè)font-size=100px;
2澎蛛、然后嚴(yán)格按照設(shè)計(jì)稿中提供的尺寸進(jìn)行樣式編寫(不管是寬高抚垄、還是MARGIN、還是字體);
3谋逻、根據(jù)當(dāng)前屏幕的寬度和設(shè)計(jì)稿的寬度來(lái)計(jì)算我們HTML的fontSize的值
設(shè)計(jì)稿寬:640 時(shí) fontSize=100px 呆馁。 盒子寬度 :600px 我們則寫6rem
手機(jī)寬:320 (320/640)100->只需要修改fontSize=50px就可以
手機(jī)寬:375 (375/640)100->修改fontSize=58.59375px就行了
根據(jù)當(dāng)前屏幕的寬度和設(shè)計(jì)稿的寬度的比例,動(dòng)態(tài)計(jì)算一下當(dāng)前寬度下的fontSize的值應(yīng)該是多少毁兆,fontSize改變浙滤,之前設(shè)定的所有rem單位的值會(huì)自動(dòng)跟著放大或縮小气堕;
公式:當(dāng)前設(shè)備的寬度/設(shè)計(jì)稿寬度*100='當(dāng)前手機(jī)下REM和PX的換算比例'
REM等比縮放響應(yīng)式布局:目前在市場(chǎng)上纺腊,如果單獨(dú)做移動(dòng)端項(xiàng)目(項(xiàng)目只在移動(dòng)端訪問,PC端有單獨(dú)的項(xiàng)目)茎芭,我們選擇響應(yīng)式適配的最佳方案就是REM布局(當(dāng)然細(xì)節(jié)處理可能會(huì)用到flex或者@media)
//如果當(dāng)前屏幕的寬度已經(jīng)大于設(shè)計(jì)稿的寬度揖膜,為了保證圖片的良好展示,我們一般都不讓其繼續(xù)變大了梅桩,以設(shè)計(jì)稿的寬度為最后寬度壹粟,剩余的部分留空白顯示;(如京東)
動(dòng)態(tài)計(jì)算fontSize值的自執(zhí)行函數(shù)(放在JS中即可)
~function(w){//w設(shè)計(jì)稿寬度
var winW=document.documentElement.clientWidth//當(dāng)前窗口寬
//如果當(dāng)前屏幕的寬度已經(jīng)大于設(shè)計(jì)稿的寬度宿百,為了保證圖片的良好展示煮寡,我們一般都不讓其繼續(xù)變大了,以設(shè)計(jì)稿的寬度為最后寬度犀呼,剩余的部分留空白顯示幸撕;(如京東)
if(winW>=w){
document.documentElement.style.fontSize='100px';
return;
}
document.documentElement.style.fontSize=winW/w*100+"px";
}(傳入的設(shè)計(jì)稿寬);
28外臂、移動(dòng)端常用類庫(kù)
Zepto
一個(gè)小型的坐儿,專門針對(duì)于移動(dòng)端開發(fā)的JS類庫(kù),它的開發(fā)原理以及使用方式都非常接近于jq宋光,所以很多人也把它稱之為小型JQ
1貌矿、zepto不支持IE6-8,有一些方法連IE高版本都不支持,是專門為移動(dòng)端準(zhǔn)備的罪佳;
2逛漫、zepto只實(shí)現(xiàn)了部分JQ中常用的方法,有一些方法在zepto中無(wú)法使用赘艳,例如:JQ支持animate酌毡、hide克握、show、slideDown枷踏、slideUp……這些動(dòng)畫菩暗,但是zepto中只有animate,其他快捷動(dòng)畫不支持
zepto類庫(kù)的體積比jQuery小很多
3旭蠕、zepto中提供了移動(dòng)端專用的事件操作方法停团,而jquery中沒有;
tap(點(diǎn)擊)
singleTap(單擊)
doubleTap(雙擊)
longTap(長(zhǎng)按)
swipe(滑動(dòng))
swipeUp(上滑)
swipeDown(下滑)
swipeLeft(左滑)
swipeRight(右滑)...
pinchIn/Out:放大縮小
$('selector').tap(function(e){
實(shí)現(xiàn)點(diǎn)擊的時(shí)候要做什么事
e:手指事件對(duì)象 this:當(dāng)前操作的元素
})
4掏熬、zepto中的animate支持transform變形佑稠,jQuery中是不支持的
$('selector').stop().animate({
top:100,
rotate:'360deg'
},1000,'linear',function(){
})
Swiper
swiper其實(shí)是一個(gè)UI組件,目的就是解決移動(dòng)
如果我們采用的滑動(dòng)效果(effect)是3D的(coverflow)旗芬,最好不要采用無(wú)縫銜接(loop:true)讶坯,這塊的處理是有bug的;
zepto中常用的屬性:
initialSlide:設(shè)定初始化時(shí)slide的索引岗屏。
direction:可設(shè)置滑動(dòng)的方向:水平(horizontal)或垂直(vertical)辆琅。
speed:滑動(dòng)一次所需要的時(shí)間
autoplay:自動(dòng)輪播的時(shí)間間隔,不設(shè)置不會(huì)自動(dòng)輪播
loop:設(shè)置為true 則開啟無(wú)縫滾動(dòng)模式
autoplayDisableOnInteraction:用戶操作swiper之后这刷,是否禁止自動(dòng)輪播婉烟。默認(rèn)為true:停止。
effect:切換效果暇屋。"slide" 位移切換(默認(rèn))
"fade" 淡入
"cube" 方塊
"coverflow"3d流
"flip" 3d翻轉(zhuǎn)
onlyExternal:值為true時(shí)似袁,slide無(wú)法拖動(dòng)
pagination:是否有分頁(yè)器(如果需要,則需要給個(gè)標(biāo)簽類名)咐刨,
演示pagination:<div class="swiper-pagination"></div>
pagination:'.swiper-pagination'
paginationType:分頁(yè)器樣式類型:'bullets' 圓點(diǎn)(默認(rèn))
'fraction' 分式
'progress' 進(jìn)度條
'custom' 自定義
paginationClickable:設(shè)置為true時(shí)昙衅,點(diǎn)擊分頁(yè)器的指示點(diǎn)分頁(yè)器會(huì)控制Swiper切換
prevButton:'.swiper-button-prev'(上一張圖片的按鈕)
nextButton:'.swiper-button-next'(下一個(gè)圖片的按鈕)
lazyLoading:設(shè)為true開啟圖片延遲加載,要將圖片img標(biāo)簽的src改寫成data-src,并且增加類名swiper-lazy定鸟。
lazyLoadingInPrevNext:設(shè)為true允許將延遲加載應(yīng)用到最接近的slide的圖片(前一個(gè)和后一個(gè)slide)而涉。
29、SEO與SEM優(yōu)化
SEO和SEM是兩種常規(guī)的推廣手段
SEO:互聯(lián)網(wǎng)推廣
SEM:百度競(jìng)價(jià)
搜索引擎:百度联予、谷歌啼县、360、搜狗...
當(dāng)我們?cè)诎俣人阉骺蛑休斎胍粋€(gè)關(guān)鍵詞沸久,下面會(huì)呈現(xiàn)出很多網(wǎng)站季眷,有的靠前有的靠后。如果想要靠前卷胯,就需要SE0優(yōu)化技巧
1子刮、各大網(wǎng)站都有一個(gè)自己的爬蟲,每天都會(huì)去各個(gè)網(wǎng)站中檢索內(nèi)容窑睁,把一些內(nèi)容或者關(guān)鍵詞收錄到自己的搜索引擎庫(kù)中
2挺峡、當(dāng)用戶在搜索框中輸入一個(gè)關(guān)鍵詞葵孤,搜索引擎會(huì)通過關(guān)鍵詞到自己的詞庫(kù)中進(jìn)行檢索,把所有匹配到內(nèi)容對(duì)應(yīng)的網(wǎng)站給檢索出來(lái)沙郭,并且呈現(xiàn)給用戶(誰(shuí)的關(guān)鍵詞被檢索的次數(shù)多或者其他原因佛呻,決定排名的前后)
通過
site:網(wǎng)站的域名
可以查看出當(dāng)前網(wǎng)站被搜索引擎收錄的內(nèi)容裳朋,我們也可以下載一些專門做SEO優(yōu)化的工具愛站工具
…
對(duì)于前端開發(fā)而言病线,哪些事情有助于SEO優(yōu)化
1、給網(wǎng)站設(shè)置META標(biāo)簽以及設(shè)置title(設(shè)置的內(nèi)容可以找專業(yè)的優(yōu)化人員要)
1鲤嫡、title不可以亂寫送挑,這個(gè)是一個(gè)優(yōu)化技巧
<meta name="keywords" content="">
2、keywords這個(gè)META標(biāo)簽是用來(lái)設(shè)置網(wǎng)站關(guān)鍵詞的
<meta name="description" content="">
3暖眼、description這個(gè)META標(biāo)簽是設(shè)置網(wǎng)站的描述
2惕耕、注意代碼上的優(yōu)化,合理使用HTML標(biāo)簽诫肠,以及注意代碼的SEO優(yōu)化技巧
1司澎、標(biāo)簽語(yǔ)義化
2、一個(gè)頁(yè)面中的H1標(biāo)簽只能使用一次
3栋豫、img標(biāo)簽都要設(shè)置alt屬性挤安,在這個(gè)屬性中聲明當(dāng)前圖片的信息(蜘蛛不能收錄圖片,但是可以用抓取到圖片alt屬性的值)
4丧鸯、HTML的層級(jí)不要太深蛤铜,太深的層級(jí),蜘蛛可能不會(huì)抓取和收錄
5丛肢、把需要推廣的關(guān)鍵詞盡可能的在頁(yè)面中曝光(最好寫在H2-6標(biāo)簽中)
3围肥、盡量不要使用前后端分離
在前后端分離的項(xiàng)目中,頁(yè)面中的數(shù)據(jù)綁定交給后臺(tái)處理(由服務(wù)器渲染頁(yè)面)蜂怎,如果交給前端處理(由客戶端渲染頁(yè)面)穆刻,渲染出來(lái)的數(shù)據(jù),搜索爬蟲是抓取不到的(在網(wǎng)站源碼中無(wú)法看見通過客戶端渲染數(shù)據(jù)的代碼)
所有通過JS字符串拼接(ES6模版字符串杠步、模版引擎..)綁定的數(shù)據(jù)蛹批,在網(wǎng)站源代碼中都看不見,也就是無(wú)法收錄
常用的meta標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
viewport對(duì)于移動(dòng)端設(shè)備來(lái)說(shuō)非常的重要篮愉,用于定義視口的各種行為腐芍。其中最為重要的就是要設(shè)定一個(gè)展示頁(yè)面的寬度width=device-width
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>Title</title>
</head>
<body>
</body>
</html>
[不管是PC還是移動(dòng)端都經(jīng)常使用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-06-29/457.html
[移動(dòng)端常用的]
http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-02/480.html
30、瀏覽器訪問優(yōu)化
1试躏、減少HTTP請(qǐng)求
每發(fā)送一次請(qǐng)求都要完成一次HTTP事務(wù)猪勇,會(huì)消耗時(shí)間,也可能會(huì)導(dǎo)致HTTP鏈接通道的堵塞颠蕴,為了提高頁(yè)面加載速度泣刹,我們要減少HTTP請(qǐng)求次數(shù)和請(qǐng)求資源的大小(請(qǐng)求內(nèi)容越大助析,消耗時(shí)間越長(zhǎng))
1)合并CSS、合并JS椅您、CSS Sprites:將瀏覽器一次訪問需要的javascript和CSS合并成一個(gè)文件外冀,這樣瀏覽器就只需要一次請(qǐng)求。圖片也可以合并掀泳,多張圖片合并成一張雪隧,合并成的圖片大小應(yīng)該是圖片本身的大小。通過background-position來(lái)控制需要顯示的圖片位置员舵。如果每張圖片都有不同的超鏈接脑沿,可通過CSS偏移響應(yīng)鼠標(biāo)點(diǎn)擊操作,構(gòu)造不同的URL马僻。
2)合理設(shè)置HTTP緩存:原則很簡(jiǎn)單庄拇,能緩存越多越好,能緩存越久越好韭邓。例如措近,很少變化的圖片資源可以直接通過 HTTP Header中的Expires設(shè)置一個(gè)很長(zhǎng)的過期頭 ;變化不頻繁而又可能會(huì)變的資源可以使用 Last-Modifed來(lái)做請(qǐng)求驗(yàn)證。盡可能的讓資源能夠在緩存中待得更久女淑。
1瞭郑、Expires/Cache-Control Header是控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)。只是Cache-Control比Expires可以控制的多一些诗力, 而且Cache-Control會(huì)重寫Expires的規(guī)則凰浮。
2、Last-Modified/If-Modified-Since和ETag/If-None-Match是瀏覽器發(fā)送請(qǐng)求到服務(wù)器后判斷文件是否 已經(jīng)修改過苇本,如果沒有修改過就只發(fā)送一個(gè)304回給瀏覽器袜茧,告訴瀏覽器直接從自己本地的緩存取數(shù)據(jù);如果修改過那就整個(gè)數(shù)據(jù)重新發(fā)給瀏覽器瓣窄。
- 3)啟用Gzip壓縮
Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮笛厦,然后再傳輸。
- 客戶端可以通過HTTP請(qǐng)求頭中的Accept-Encoding屬性來(lái)標(biāo)識(shí)對(duì)壓縮的支持(Accept-Encoding:gzip,deflate)俺夕,服務(wù)器看到請(qǐng)求中有這個(gè)頭裳凸,就會(huì)使用客戶端列出的一種方法來(lái)壓縮響應(yīng)。這樣可以顯著減少文件傳輸?shù)拇笮∪懊场鬏斖戤吅鬄g覽器會(huì) 重新對(duì)壓縮過的內(nèi)容進(jìn)行解壓縮姨谷,并執(zhí)行。一般Gzip的壓縮率為85%左右映九;
- 4)圖片延遲加載與數(shù)據(jù)懶加載:這條策略實(shí)際上并不一定能減少 HTTP請(qǐng)求數(shù)梦湘,但是卻能在某些條件下或者頁(yè)面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)。對(duì)于圖片和數(shù)據(jù)而言,在頁(yè)面剛加載的時(shí)候可以只加載第一屏捌议,當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片和數(shù)據(jù)哼拔。這樣一來(lái),假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)瓣颅,那剩余的圖片和數(shù)據(jù)請(qǐng)求就都節(jié)省了倦逐。
- 5)使用字體圖標(biāo)代替頁(yè)面中的位圖,可以減少HTTP請(qǐng)求次數(shù)(類似雪碧圖)
- 6)配置ETags: Etag是服務(wù)器告訴瀏覽器緩存宫补,緩存里的內(nèi)容是否已經(jīng)發(fā)生變化的一種機(jī)制檬姥,通過Etag,瀏覽器就可以知道現(xiàn)在的緩存中的內(nèi)容是不是最新的守谓,需不需要重新從服務(wù)器上下載
2穿铆、使用瀏覽器緩存(使用loaclstorage)
- 對(duì)一個(gè)網(wǎng)站而言您单,CSS斋荞、javascript、logo虐秦、圖標(biāo)這些靜態(tài)資源文件更新的頻率都比較低平酿,而這些文件又幾乎是每次http請(qǐng)求都需要的,將這些文件通過loaclstroge緩存在瀏覽器中悦陋,可以極好的改善性能蜈彼。
3、使用CDN(內(nèi)容發(fā)布網(wǎng)絡(luò))
- CDN是一組分布在多個(gè)不同地理位置的web服務(wù)器俺驶,如果web服務(wù)器離服務(wù)器更近幸逆,則一個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。每個(gè)服務(wù)器都擁有所有網(wǎng)站的文件副本暮现,用戶訪問網(wǎng)站時(shí)还绘,就可以從離用戶最近的服務(wù)器發(fā)送所需的文件給客戶端。
4栖袋、將CSS放在頂部head中拍顷,JS放在body尾部
- 由于CSS放在document底部時(shí),在IE下塘幅,為了防止重畫頁(yè)面元素昔案,會(huì)禁止HTML正常加載順序,會(huì)等到CSS加載完之后再加載HTML电媳,那么在這段期間用戶只能看到空白頁(yè)面踏揣。火狐瀏覽器不會(huì)禁止HTML正常加載匾乓,但是意味著css下載后捞稿,有些元素樣式要重畫,這樣就會(huì)導(dǎo)致頁(yè)面閃爍的問題;
- 將腳本放在頂部或頁(yè)面中括享,瀏覽器會(huì)對(duì)script標(biāo)簽內(nèi)的內(nèi)容進(jìn)行解析搂根,從而阻塞樣式的渲染。除此之外铃辖,HTTP1.1規(guī)范建議瀏覽器從每個(gè)主機(jī)并行的下載兩個(gè)組件剩愧,在高版本的IE和chrome、Firefox等瀏覽器則支持并行下載六個(gè)組件娇斩。但script會(huì)阻塞并行下載仁卷。因此我們應(yīng)該將腳本放在底部
5、避免CSS表達(dá)式
- CSS表達(dá)式具備求值計(jì)算能力犬第,然而每次頁(yè)面發(fā)生重繪時(shí)锦积,CSS表達(dá)式會(huì)影響頁(yè)面的加載時(shí)間。
6歉嗓、減少cookie傳輸
- 一方面丰介,cookie包含在每次請(qǐng)求和響應(yīng)中,太大的cookie會(huì)嚴(yán)重影響數(shù)據(jù)傳輸鉴分,因此哪些數(shù)據(jù)需要寫入cookie需要慎重考慮哮幢,盡量減少cookie中傳輸?shù)臄?shù)據(jù)量。另一方面志珍,對(duì)于某些靜態(tài)資源的訪問橙垢,如CSS、script等伦糯,發(fā)送cookie沒有意義柜某,可以考慮靜態(tài)資源使用獨(dú)立域名訪問,避免請(qǐng)求靜態(tài)資源時(shí)發(fā)送cookie敛纲,減少cookie傳輸次數(shù)喂击。
7、Javascript代碼優(yōu)化
- 1)DOM存在映射機(jī)制(瀏覽器默認(rèn)構(gòu)建的機(jī)制)载慈,操作DOM的時(shí)候獲取DOM元素集合為一個(gè)類數(shù)組集合惭等,在JS中,document.images办铡、document.forms辞做、getElementsByTagName()返回的都是HTMLCollection類型的集合,在平時(shí)使用的時(shí)候大多將它作為數(shù)組來(lái)使用寡具,因?yàn)樗?length屬性秤茅,也可以使用索引訪問每一個(gè)元素。不過在訪問性能上則比數(shù)組要差很多童叠,原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果框喳,它表示的僅僅是一個(gè)特定的查詢课幕,每次訪問該集合時(shí)都會(huì)重新執(zhí)行這個(gè)查詢從而更新查詢結(jié)果。所謂的“訪問集合” 包括讀取集合的 length屬性五垮、訪問集合中的元素乍惊。 因此,當(dāng)你需要遍歷 HTML Collection的時(shí)候放仗,盡量將它轉(zhuǎn)為數(shù)組后再訪問润绎,以提高性能。即使不轉(zhuǎn)換為數(shù)組诞挨,也請(qǐng)盡可能少的訪問它莉撇,例如在遍歷的時(shí)候可以將 length屬性、成員保存到局部變量后再使用局部變量惶傻。
- 2)DOM操作還需要考慮瀏覽器的回流和重繪棍郎,當(dāng)元素的樣式發(fā)生改變(不修改元素位置的樣式),瀏覽器會(huì)把當(dāng)前元素重新的進(jìn)行渲染(DOM性能消耗低)银室。當(dāng)元素的位置發(fā)生改變涂佃,瀏覽器會(huì)把整個(gè)頁(yè)面的DOM結(jié)構(gòu)進(jìn)行重新計(jì)算,計(jì)算出所有元素的最新位置粮揉,然后再渲染(DOM性能消耗非常大)巡李。這些都是需要消耗資源的抚笔;
- 3)給DOM綁定事件的時(shí)候避免一個(gè)個(gè)綁定扶认,而是采用性能更高的事件委托來(lái)實(shí)現(xiàn);
- 4)避免使用eval和Function函數(shù)殊橙,每次 eval 或Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時(shí)辐宾,腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 —— 通常比簡(jiǎn)單的函數(shù)調(diào)用慢 100倍以上膨蛮。
- 5)使用異步編程:同步編程可能會(huì)有阻塞作用叠纹,如AJAX請(qǐng)求,我們一般都要使用異步編程敞葛,最好事基于promise設(shè)計(jì)模式進(jìn)行管理
- 6)JS中盡量少使用閉包:閉包會(huì)形成一個(gè)不銷毀的棧內(nèi)存誉察,過多的棧內(nèi)存累積會(huì)影響頁(yè)面的性能,還會(huì)導(dǎo)致內(nèi)存泄露惹谐;
8持偏、保持Js和CSS外部引用
- 使用外部文件通常會(huì)加快頁(yè)面速度,因?yàn)檫@樣js,css文件可以被瀏覽器緩存氨肌。如果js,css采用內(nèi)嵌式鸿秆,每次請(qǐng)求頁(yè)面的時(shí)候都會(huì)重新加載。這樣雖然減少了http請(qǐng)求數(shù)量怎囚,但是增加了html的大小卿叽。從另一方面來(lái)說(shuō),如果js,css在外部文件中并且被瀏覽器緩存,那么后續(xù)請(qǐng)求不會(huì)增加html文檔大小考婴,也不會(huì)增加http請(qǐng)求數(shù)量(外部文件從瀏覽器緩存中取贩虾,不經(jīng)過http請(qǐng)求了)。
內(nèi)聯(lián)可以降低http請(qǐng)求沥阱,使用外部文件緩存也有好處整胃。通常的處理是首頁(yè)內(nèi)聯(lián)js,css,當(dāng)也加載完成之后再動(dòng)態(tài)下載外部文件喳钟,這樣后續(xù)頁(yè)面就可以從瀏覽器緩存中獲取這些文件屁使。
9、壓縮以及剔除重復(fù)的CSS和JS
10奔则、減少DNS查詢
- DNS查詢有時(shí)間開銷蛮寂,通常一個(gè)瀏覽器查找一個(gè)給定主機(jī)名的IP地址需要20-120ms。緩存DNS:緩存DNS查詢可以很好地提高網(wǎng)頁(yè)性能易茬,一旦緩存了DNS查詢酬蹋,之后對(duì)于相同主機(jī)名的請(qǐng)求就無(wú)需進(jìn)行再次的DNS查找,至少短時(shí)間內(nèi)不需要抽莱。所以在使用頁(yè)面中URL范抓、圖片、js文件食铐、css文件等時(shí)匕垫,不要使用過多不同的主機(jī)名。
11虐呻、避免重定向
- 重定向的英文是Redirect象泵,用于將用戶從一個(gè)URL重新跳轉(zhuǎn)到另一個(gè)URL。最常見的Redirect就是301和302兩種斟叼。在我們實(shí)際開發(fā)中避免重定向最簡(jiǎn)單也最容易被忽視的一個(gè)問題就是偶惠,設(shè)置URL的時(shí)候,最后的“/”朗涩,有些人有時(shí)候會(huì)忽略忽孽,其實(shí)你少了“/”,這時(shí)候的URL就被重定向了谢床,所以在給頁(yè)面鏈接加URL的時(shí)候切記最后的“/”不可丟兄一。
12、使Ajax可緩存
- 針對(duì)頁(yè)面中主動(dòng)的Ajax請(qǐng)求返回的數(shù)據(jù)要緩存到本地萤悴,當(dāng)然這個(gè)是針對(duì)短期內(nèi)不會(huì)變化的數(shù)據(jù)瘾腰。如果不確定數(shù)據(jù)變化周期的話,可以增加一個(gè)修改標(biāo)識(shí)的判斷覆履,我正常處理過程中會(huì)給一些Ajax請(qǐng)求返回的數(shù)據(jù)增加一個(gè)MD5值的判斷蹋盆,每次請(qǐng)求會(huì)判斷當(dāng)前MD5是否變化费薄,如果變化了取最新的數(shù)據(jù),如果不變化栖雾,則不變楞抡。
13、客戶端與服務(wù)器端通信時(shí)盡量采用JSON格式數(shù)據(jù)進(jìn)行傳輸
- 優(yōu)勢(shì):
- 1)JSON數(shù)據(jù)能夠清晰明了的展示出數(shù)據(jù)解構(gòu)析藕,而且也方便我們獲取和操作
- 2)相對(duì)于XML召廷,JSON數(shù)據(jù)更加輕量級(jí)
- 3)客戶端和服務(wù)器端都支持JSON數(shù)據(jù)的處理,使用起來(lái)方便账胧;
并不是所有數(shù)據(jù)都可以用JSON竞慢,如:文件流的傳輸或者文檔的傳輸,用JSON就不合適了治泥;
14筹煮、CSS選擇器優(yōu)化
1)盡量減少標(biāo)簽選擇器的使用
2)盡可能少使用ID選擇器,多使用樣式雷選擇器(通用性強(qiáng))
3)減少選擇器前的前綴
31居夹、前后端的通信方式以及HTTP
前后端需要用的技術(shù)
需要用到的技術(shù)棧
[前端]
HTML(5)+CSS(3)
JAVAscript[后端]
java
Node
PHP
C#
C
[數(shù)據(jù)庫(kù)]mySQL
SQL Server
mongodb(和node結(jié)合緊密)[自動(dòng)化]
git败潦、svn
weboack(基于NODE運(yùn)行的)
服務(wù)器部署工具 iis、apache准脂、nginx
前端和后端是如何通信的
前端:客戶端
后端:服務(wù)器端
前后端通過HTTP協(xié)議進(jìn)行通信劫扒;
所謂的全棧,其實(shí)是你可以實(shí)現(xiàn)客戶端和服務(wù)器端程序的編寫狸膏,而且還可以實(shí)現(xiàn)兩端之間的通信
經(jīng)典面試題
當(dāng)我們?cè)跒g覽器地址欄中輸入一個(gè)URL地址沟饥,到最后看到頁(yè)面,中間都經(jīng)歷了哪些事情环戈?
主要分為三個(gè)階段(請(qǐng)求request闷板、響應(yīng)response、渲染dom render)院塞;
[Request請(qǐng)求階段]
1、首先根據(jù)客戶端輸入的域名性昭、到DNS服務(wù)器上進(jìn)行反解析(通過域名找到對(duì)應(yīng)服務(wù)器的外網(wǎng)IP)
2拦止、通過找到的外網(wǎng)IP,找到對(duì)應(yīng)的服務(wù)器
3糜颠、通過在地址欄中輸入的端口號(hào)(沒輸入是因?yàn)椴煌瑓f(xié)議有自己不同的默認(rèn)端口號(hào))找到服務(wù)器上發(fā)布的對(duì)應(yīng)的項(xiàng)目汹族;
[Response響應(yīng)階段]
4、服務(wù)器獲取到請(qǐng)求資源文件的地址
例如:/stu/index.html
,把資源文件中的源代碼找到
5其兴、服務(wù)器端會(huì)把找到的源代碼通過HTTP等傳輸協(xié)議返回給客戶端(
[瀏覽器渲染階段]
6顶瞒、客戶端接收到源代碼后,會(huì)交給瀏覽器的內(nèi)核進(jìn)行渲染元旬,最后由瀏覽器繪制出對(duì)應(yīng)的頁(yè)面
[圖片上傳失敗...(image-5bb40-1541658084393)]
假設(shè)我們?cè)L問的是www.baidu.com這個(gè)地址榴徐,按下enter之后守问,我們可以看到百度首頁(yè)面:
1)百度頁(yè)面并沒有在我們自己的客戶端本地,我們是輸入地址后坑资,才請(qǐng)求過來(lái)的
2)輸入不同域名可以看到不同的頁(yè)面
3)有的網(wǎng)址是https耗帕,有的是http(有的是ftp)
4)需要客戶端聯(lián)網(wǎng)才能完成這些事情
什么是內(nèi)網(wǎng)IP
內(nèi)網(wǎng)(局域網(wǎng):具備相同的DNS和默認(rèn)網(wǎng)關(guān),并且由相同的路由器下發(fā)的IP袱贮,限定在一定區(qū)域內(nèi)訪問的)
自測(cè):自己開發(fā)測(cè)試
內(nèi)測(cè):上傳到公司內(nèi)網(wǎng)測(cè)試服務(wù)器上仿便,交由公司測(cè)試進(jìn)行BUG追蹤
公測(cè):產(chǎn)品正式部署到外網(wǎng)服務(wù)器上
什么是外網(wǎng)IP
外網(wǎng)是不管是不是在同一個(gè)網(wǎng)段,用戶都可以通過外網(wǎng)IP訪問到你的服務(wù)器(一般我們會(huì)在服務(wù)器上做處理攒巍,禁止直接通過IP訪問)
如何把本地文件上傳到服務(wù)器
通過FTP把自己本地的項(xiàng)目文件上傳到服務(wù)器執(zhí)行的目錄中(filezilla:ftp上傳文件工具)
DNS服務(wù)器 域名解析服務(wù)器
域名和服務(wù)器關(guān)聯(lián)在一起嗽仪,是通過DNS解析完成的,所謂DNS解析就是在DNS服務(wù)器上生成了一條解析記錄柒莉,標(biāo)注了子域名和對(duì)應(yīng)的服務(wù)器的外網(wǎng)IP地址钦幔;
URL/URI/URN
URI:統(tǒng)一資源標(biāo)識(shí)符
URL:統(tǒng)一資源路徑地址
URN:統(tǒng)一資源名稱
URI=URL+URN 統(tǒng)一資源標(biāo)識(shí)符(統(tǒng)一資源信息)一個(gè)完整的URL包含很多部分:
http://v.qq.com:80/index.html?name=zhufeng&age=7#bbs
傳輸協(xié)議
客戶端傳遞給服務(wù)器端的內(nèi)容和服務(wù)器端傳遞給客戶端的內(nèi)容都是通過HTTP傳輸協(xié)議進(jìn)行傳輸?shù)模梢园袶TTP理解為快遞小哥)
1、客戶端不僅可以向服務(wù)器發(fā)送請(qǐng)求常柄,而且還可以把一些內(nèi)容傳遞給服務(wù)器
2鲤氢、服務(wù)器端也可以把內(nèi)容返回給客戶端
客戶端請(qǐng)求的內(nèi)容和服務(wù)器端響應(yīng)的內(nèi)容總稱為<font color=red>HTTP報(bào)文</font>。這些報(bào)文信息都是基于傳輸協(xié)議完成傳輸?shù)奈髋耍蛻舳藗鬟f給服務(wù)器叫做請(qǐng)求(Request)卷玉,服務(wù)器返回給客戶端叫做響應(yīng)(Respone),request+response兩個(gè)階段統(tǒng)稱為HTTP事務(wù)(事務(wù):一件完整的事情)
HTTP事務(wù):
1喷市、當(dāng)客戶端向服務(wù)器端發(fā)送請(qǐng)求相种,此時(shí)客戶端和服務(wù)器端會(huì)建立一個(gè)傳輸通道(鏈接通道),傳輸協(xié)議就是基于這個(gè)通道把信息進(jìn)行傳輸?shù)?br> 2品姓、當(dāng)服務(wù)器端接收到請(qǐng)求信息寝并,把內(nèi)容返回給客戶端后,傳輸通道會(huì)自動(dòng)銷毀關(guān)閉腹备;
傳輸協(xié)議分類
http
:超文本傳輸協(xié)議
- 客戶端和服務(wù)器端傳輸?shù)膬?nèi)容除了文本以外衬潦,還可以傳輸圖片、音視頻等文件流[二進(jìn)制編碼植酥、BASE64碼]镀岛,以及傳輸XML格式的數(shù)據(jù)等),是目前市場(chǎng)上應(yīng)用最廣泛的傳輸協(xié)議友驮;
https
:http ssl
- 它比http更加安全漂羊,因?yàn)閿?shù)據(jù)內(nèi)容的傳輸通道是經(jīng)過ssl加密的(它需要在服務(wù)器端進(jìn)行特殊的處理),所以涉及資金類的網(wǎng)站一般都是https協(xié)議的
ftp
:資源文件傳輸協(xié)議
- 一般用于客戶端把資源文件(不是代碼)上傳到服務(wù)器端卸留,或者從服務(wù)器端下載一些資源文件(一般ftp傳輸?shù)膬?nèi)容會(huì)比http這類協(xié)議傳輸?shù)膬?nèi)容多)
HTTP報(bào)文
客戶端請(qǐng)求的內(nèi)容和服務(wù)器端響應(yīng)的內(nèi)容總稱為<font color=red>HTTP報(bào)文</font>
包括以下部分:
1走越、起始行
- 請(qǐng)求起始行
- 響應(yīng)起始行
2、首部(頭)
- 請(qǐng)求頭:內(nèi)置請(qǐng)求頭耻瑟、自定義請(qǐng)求頭
- 響應(yīng)頭:內(nèi)置響應(yīng)頭旨指、自定義響應(yīng)頭
- 通用頭:請(qǐng)求和響應(yīng)的都有
3赏酥、主體
- 請(qǐng)求主體
- 響應(yīng)主體
請(qǐng)求xxx都是客戶端設(shè)置的信息,服務(wù)器端獲取這些信息淤毛;
響應(yīng)xxx都是服務(wù)器端設(shè)置的信息今缚,客戶端獲取這些信息;在谷歌瀏覽器控制臺(tái)NetWork中選項(xiàng)中低淡,我們可以看見當(dāng)前客戶端和服務(wù)器端交互的全部信息姓言;
客戶端向服務(wù)器端傳遞數(shù)據(jù)的3種方式
1、URL問號(hào)傳參
2蔗蹋、設(shè)置請(qǐng)求頭
3何荚、設(shè)置請(qǐng)求主體服務(wù)器端返回給客戶端數(shù)據(jù)的2種方式
1、設(shè)置響應(yīng)頭(例如服務(wù)器時(shí)間)
2猪杭、設(shè)置響應(yīng)主體
域名
設(shè)置域名其實(shí)就給不好記憶的服務(wù)器外網(wǎng)IP設(shè)置了一個(gè)好記憶的名字
頂級(jí)域名(一級(jí)域名):qq.com
二級(jí)域名:www.qq.com餐塘、v.qq.com、sports.qq.com ...
三級(jí)域名:kbs.sports.qq.com
端口號(hào)
在服務(wù)器上發(fā)布項(xiàng)目的時(shí)候皂吮,我們用端口號(hào)來(lái)區(qū)分不同的項(xiàng)目
一臺(tái)服務(wù)器的端口號(hào)范圍:0~65535
如果電腦上安裝了很多程序戒傻,有一些端口號(hào)是被占用了
HTTP默認(rèn)端口號(hào):80
HTTPS默認(rèn)端口號(hào):443
FTP:默認(rèn)端口號(hào)21
對(duì)于上述三個(gè)端口號(hào)是很重要的,如果被其他程序占用蜂筹,我們則不能使用了需纳;所以服務(wù)器上一般是禁止安裝其他程序的;
請(qǐng)求資源文件的路徑名稱
在服務(wù)器中發(fā)布項(xiàng)目的時(shí)候艺挪,我們一般都會(huì)配置一些默認(rèn)文檔:用戶及時(shí)不輸入請(qǐng)求文件的名稱不翩,服務(wù)器也會(huì)找到默認(rèn)文檔(一般默認(rèn)文檔都是index/default...);
我們通常為了做SEO優(yōu)化,會(huì)把一些動(dòng)態(tài)頁(yè)面的地址進(jìn)行偽URL重寫(服務(wù)器處理)麻裳,把動(dòng)態(tài)的URL地址重寫為靜態(tài)的URL地址口蝠,利于爬蟲抓取
問號(hào)傳參
?name=zf&age=9
把一些值通過xxx=xxx的方式奸焙,放在一個(gè)URL的末尾多糠,通過問號(hào)傳遞;
[作用]
1免猾、在AJAX請(qǐng)求中国瓮,我們可以通過問號(hào)傳遞參數(shù)的方式灭必,客戶端把一些信息傳遞給服務(wù)器,服務(wù)器根據(jù)傳遞信息的不一樣乃摹,返回不同的數(shù)據(jù);
2跟衅、消除AJAX請(qǐng)求中GET方式的緩存:比如
http://www.xxxxx.com/index.html
http://www.xxxxx.com/index.html?test123123
兩個(gè)url打開的頁(yè)面一樣孵睬,但是后面這個(gè)有問號(hào),說(shuō)明不調(diào)用緩存的內(nèi)容伶跷,而認(rèn)為是一個(gè)新地址掰读,重新讀取秘狞。
3、通過URL傳參的方式蹈集,可以實(shí)現(xiàn)頁(yè)面之間信息的通訊烁试,例如:我們有兩個(gè)頁(yè)面A/B,A是列表頁(yè)面拢肆,B是詳情頁(yè)减响,點(diǎn)擊A中的某一條信息,進(jìn)入到唯一的詳情頁(yè)B郭怪,可以通過URL傳遞不同得參數(shù)來(lái)獲取不同的數(shù)據(jù)支示;
哈希值
URL末尾傳遞的井號(hào)什么,就是HASH值(哈希值)
作用:
1鄙才、頁(yè)面中錨點(diǎn)定位
2颂鸿、前端路由(SPA單頁(yè)面開發(fā))
32、AJAX基礎(chǔ)知識(shí)
什么是AJAX攒庵?
async javascript and xml(異步的JS和XML)
客戶端JS中的方法嘴纺,用來(lái)向服務(wù)器端發(fā)送請(qǐng)求(還可以傳遞給服務(wù)器端數(shù)據(jù)),然后把服務(wù)器端返回的內(nèi)容獲取到(一般運(yùn)行在客戶端的瀏覽器中的)浓冒。XML:可擴(kuò)展的標(biāo)記語(yǔ)言(一種數(shù)據(jù)格式)
利用自己擴(kuò)展的有規(guī)則的標(biāo)記來(lái)存儲(chǔ)相關(guān)數(shù)據(jù)的
異步的JS
這里的異步不是說(shuō)AJAX只能基于異步進(jìn)行請(qǐng)求栽渴,這里的異步特指的是局部刷新
全局刷新和局部刷新
[全局刷新]
所謂的全局刷新就是頁(yè)面中的每次數(shù)據(jù)更新,都會(huì)從服務(wù)器獲取到最新的已經(jīng)渲染好的源代碼裆蒸,然后拿到瀏覽器中進(jìn)行展示熔萧;
[優(yōu)勢(shì)]
1)動(dòng)態(tài)展示的數(shù)據(jù)在頁(yè)面的源代碼中可以看見,有利于SEO優(yōu)化推廣(有利于搜索引擎的收錄和抓攘诺弧)
2)從服務(wù)器獲取的結(jié)果就已經(jīng)是最后要呈現(xiàn)的結(jié)果了佛致,不需要客戶端做額外的事,所以頁(yè)面加載速度快辙谜,(前提是服務(wù)器端處理的速度夠快)如淘寶俺榆、京東的首屏數(shù)據(jù)一般都是由服務(wù)器端渲染[弊端]
1)頁(yè)面中的數(shù)據(jù)需要實(shí)時(shí)更新,即使是一張小圖片更新装哆,每次也都需要重新刷新一次罐脊。
2)都交給服務(wù)器端做數(shù)據(jù)渲染,服務(wù)器端的壓力大蜕琴,如果服務(wù)器處理不過來(lái)萍桌,頁(yè)面呈現(xiàn)的速度更慢
3)全局刷新不利于開發(fā)(開發(fā)效率低)[局部刷新]
前后端完全分離的項(xiàng)目,頁(yè)面中需要?jiǎng)討B(tài)綁定的數(shù)據(jù)是交給客戶端完成渲染的:客戶端渲染要以下步驟:
1凌简、向服務(wù)器端發(fā)送AJAX請(qǐng)求
2上炎、把從服務(wù)器端獲取的數(shù)據(jù)解析處理,拼接成為我們需要展示的HTML字符串
3雏搂、拿拼接好的字符串替換頁(yè)面中某一部分需要更新的內(nèi)容(局部刷新)藕施,頁(yè)面整體不需要重新加載寇损,局部渲染即可
[優(yōu)勢(shì)]
1、我們可以根據(jù)需求裳食,任意修改頁(yè)面中某一部分內(nèi)容(如實(shí)時(shí)刷新)矛市,整體頁(yè)面不刷新,性能好诲祸,體驗(yàn)好(所有表單驗(yàn)證浊吏、需要實(shí)時(shí)刷新的需求都要基于AJAX實(shí)現(xiàn))
2、有利于開發(fā)烦绳,提高開發(fā)效率
- 1)前后端的完全分離卿捎,后臺(tái)不需要考慮前端如何實(shí)現(xiàn),前端也不需要考慮后臺(tái)用什么技術(shù)径密,真正實(shí)現(xiàn)了前后端分離
- 2)可以同時(shí)開發(fā):項(xiàng)目開發(fā)開始午阵,先制定前后端數(shù)據(jù)交互的接口文檔(文檔中包含了調(diào)取哪個(gè)接口或者哪些數(shù)據(jù)等協(xié)議規(guī)范),后臺(tái)把接口寫好享扔,客戶端按照接口調(diào)取即可底桂,后臺(tái)再去實(shí)現(xiàn)接口功能即可;
[弊端]
1惧眠、不利于SEO優(yōu)化:第一次從服務(wù)器端獲取的內(nèi)容不包含需要?jiǎng)討B(tài)綁定的數(shù)據(jù)籽懦,不利于SEO收錄,后期通過JS添加到頁(yè)面中的內(nèi)容氛魁,并不會(huì)寫到源代碼中
2暮顺、由于需要?jiǎng)討B(tài)綁定數(shù)據(jù)后,再交給瀏覽器渲染秀存。所以沒有服務(wù)器渲染頁(yè)面呈現(xiàn)速度快捶码;
基于原生JS實(shí)現(xiàn)AJAX
Ajax四步:
let xhr=new XMLHttpRequest();
xhr.open("get","/data.txt",false);
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
var val=xhr.responseText;
}
};
xhr.send(null)或链;
AJAX請(qǐng)求方式
AJAX第一步:let xhr=new XMLHttpRequest;
創(chuàng)建一個(gè)AJAX對(duì)象惫恼,IE6以下不支持;
AJAX第二步:xhr.open(method,url,async,username,userpass);解析
第二步代表發(fā)送前的基本信息配置(并沒有發(fā)送請(qǐng)求)。open方法中的參數(shù)詳解如下:
method:請(qǐng)求方式(以下方法都可以從服務(wù)器獲取數(shù)據(jù)澳盐,也可以向服務(wù)器傳遞數(shù)據(jù))
GET:一般用于從服務(wù)器獲取數(shù)據(jù)(也可以向服務(wù)器發(fā)送數(shù)據(jù))
POST:一般用于向服務(wù)器推送數(shù)據(jù)
PUT:用于給服務(wù)器上增加資源文件(上傳圖片)
DELETE:用于從服務(wù)器上刪除資源文件
HEAD:用于只獲取服務(wù)器的響應(yīng)頭信息
url:請(qǐng)求的URL地址(配置向哪一個(gè)服務(wù)器地址發(fā)送請(qǐng)求)
async:同步還是異步(true代表異步祈纯,false代表同步,默認(rèn)為true)
用戶名和密碼:這兩個(gè)參數(shù)一般不用叼耙,如果你請(qǐng)求的URL地址所在的服務(wù)器設(shè)定了訪問權(quán)限腕窥,則需要我們提供可通行的用戶名和密碼,才可以(一般服務(wù)器都是可以允許匿名訪問的)
總結(jié):
<font color=red>GET與POST區(qū)別:</font>
1筛婉、大小問題:GET請(qǐng)求傳遞給服務(wù)器的內(nèi)容大小存在限制而POST理論上沒有限制油昂。存在限制的原因是瀏覽器對(duì)URL的長(zhǎng)度存在限制
。各瀏覽器都有自己的URL最大長(zhǎng)度限制(谷歌:8KB倾贰,火狐:7KB冕碟,IE:2KB),超出的部分會(huì)被截却艺恪安寺;而post請(qǐng)求一般都是基于設(shè)置請(qǐng)求主體
來(lái)實(shí)現(xiàn)的,理論上post通過請(qǐng)求主體傳遞是沒有大小限制的首尼;
2挑庶、速度的問題:與 GET 請(qǐng)求相比, POST 請(qǐng)求消耗的資源會(huì)更多一些软能。從性能角度來(lái)看迎捺,以發(fā)送相同的數(shù)據(jù)計(jì), GET 請(qǐng)求的速度最多可達(dá)到 POST 請(qǐng)求的兩倍
3查排、緩存的問題:GET請(qǐng)求會(huì)出現(xiàn)緩存(這個(gè)緩存不一定是304)凳枝,會(huì)產(chǎn)生緩存是因?yàn)镚ET請(qǐng)求是通過URL問號(hào)傳參來(lái)實(shí)現(xiàn)數(shù)據(jù)傳遞的(瀏覽器會(huì)根據(jù)每次請(qǐng)求時(shí)的URL地址與上次請(qǐng)求的地址是否相同,來(lái)判定是讀取上次請(qǐng)求的緩存跋核,還是再請(qǐng)求一次拿到最新數(shù)據(jù))岖瑰;POST是沒有緩存的。如何解決GET請(qǐng)求出現(xiàn)緩存:在URL的末尾追加一個(gè)隨機(jī)數(shù)砂代;
$.ajax({
url:''+Math.random()
})
4蹋订、安全問題:一般來(lái)說(shuō)GET不安全,GET請(qǐng)求是通過URL傳參把數(shù)據(jù)傳遞給服務(wù)器刻伊,用戶名和密碼將明文出現(xiàn)在URL上露戒,而黑客可通過URL劫持獲取到get請(qǐng)求問號(hào)傳參傳遞的內(nèi)容。數(shù)據(jù)不太安全而POST相對(duì)安全一些
AJAX第三步:xhr.onreadystatechange=function(){};解析
此步驟作用:監(jiān)聽AJAX狀態(tài)改變捶箱,獲取響應(yīng)信息(獲取響應(yīng)頭信息智什、獲取響應(yīng)主體信息)
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
var val=xhr.responseText;
}
};
xhr.readyState:AJAX狀態(tài)碼讼呢,代表當(dāng)前AJAX處理的進(jìn)度撩鹿,可能的值如下:
<font color=red>0</font> :UNSENT 當(dāng)前的請(qǐng)求還沒發(fā)送(未調(diào)用open方法)
<font color=red>1</font> :OPENED URL地址已經(jīng)打開(已調(diào)用open方法未調(diào)用send方法)
<font color=red>2</font> :HEADERS_RECEIVED 當(dāng)前AJAX的請(qǐng)求已經(jīng)發(fā)送,并且已經(jīng)接收到服務(wù)器端返回的響應(yīng)頭信息了(已經(jīng)調(diào)用send方法悦屏,2的時(shí)候就已經(jīng)可以拿到響應(yīng)頭信息了)
<font color=red>3</font> :LOADING 已經(jīng)接收到部分響應(yīng)數(shù)據(jù)
<font color=red>4</font> :DONE 響應(yīng)主體的內(nèi)容已經(jīng)成功返回到客戶端
xhr.status:HTTP網(wǎng)絡(luò)狀態(tài)碼节沦,描述了當(dāng)前服務(wù)器返回信息的狀態(tài),可能的值如下:
<font color=red>200 或者^2\d{2}</font> : (200或以2開頭的)都代表響應(yīng)主體的內(nèi)容已經(jīng)返回成功
(以3開頭的也算請(qǐng)求成功础爬,只不過服務(wù)器端做了很多特殊的處理)
<font color=red>301</font> :永久重定向/永久轉(zhuǎn)移(一般用于域名遷移)
<font color=red>302</font> :臨時(shí)重定向/臨時(shí)轉(zhuǎn)移(一般用于服務(wù)器的負(fù)載均衡甫贯,當(dāng)服務(wù)器訪問量過大,就把當(dāng)前的請(qǐng)求臨時(shí)交給其他服務(wù)器處理)
<font color=red>304</font> :本次獲取的內(nèi)容是讀取緩存中的數(shù)據(jù)(把一些不經(jīng)常更新的文件或者內(nèi)容緩存到瀏覽器中看蚜,下一次從緩存中獲取叫搁,減輕服務(wù)器壓力,也提高了頁(yè)面加載速度)
(以4開頭的一般都是失敗,而且客戶端的問題偏大)
<font color=red>400</font> :客戶端傳遞給服務(wù)器端的參數(shù)出現(xiàn)錯(cuò)誤
<font color=red>401</font> :無(wú)權(quán)限訪問
<font color=red>404</font> :要訪問地址不存在
(以5開頭的一般都是失敗渴逻,而且服務(wù)器端的問題偏大)
<font color=red>500</font> :未知的服務(wù)器錯(cuò)誤
<font color=red>503</font> : 服務(wù)器已經(jīng)超負(fù)荷
xhr.responseText:接收到的響應(yīng)主體中的內(nèi)容疾党;
AJAX第四步:xhr.send(null);解析
這一步才算發(fā)送請(qǐng)求:參數(shù)是請(qǐng)求主體中需要傳遞給服務(wù)器的內(nèi)容
向服務(wù)器發(fā)送請(qǐng)求的任務(wù),才算開始惨奕;
AJAX屬性方法解析
屬性
readyState:存儲(chǔ)的是當(dāng)前AJAX的狀態(tài)碼
response/responseText/responseXML:都是用來(lái)接收服務(wù)器返回的響應(yīng)主體中的內(nèi)容雪位,只是格式不一樣
- responseText:是最常用的,接收到的結(jié)果是字符串格式的(一般服務(wù)器返回的數(shù)據(jù)都是JSON格式字符串)
- responseXML偶爾會(huì)用到梨撞,如果服務(wù)器返回的是XML文檔數(shù)據(jù)雹洗,需要用此屬性接收
status:服務(wù)器返回的HTTP狀態(tài)碼
statusText:對(duì)返回狀態(tài)碼的描述
timeout:設(shè)置當(dāng)前AJAX請(qǐng)求的超時(shí)時(shí)間,表示請(qǐng)求在等待響應(yīng)多少毫秒之后就終止卧波。在給timeout 設(shè)置一個(gè)數(shù)值后时肿,如果在規(guī)定的時(shí)間內(nèi)瀏覽器還沒有接收到響應(yīng),那么就會(huì)觸發(fā) timeout事件
方法
abort:強(qiáng)制中斷AJAX請(qǐng)求
open:打開一個(gè)URL地址
send:發(fā)送AJAX請(qǐng)求(參數(shù)是請(qǐng)求主體中傳遞給服務(wù)器的內(nèi)容)
getAllResponseHeaders:獲取全部的響應(yīng)頭信息(結(jié)果為字符串文本)
getResponseHeader(key):獲取指定屬性名的響應(yīng)頭信息
setRequestHeader(key港粱,value):設(shè)置請(qǐng)求頭信息(可以是自定義的請(qǐng)求頭)
overrideMimeType:重寫數(shù)據(jù)的MIME類型
事件
onabort:AJAX被中斷觸發(fā)此事件
onreadyStateChange:AJAX狀態(tài)發(fā)生改變觸發(fā)此事件
ontimeout:請(qǐng)求超時(shí)后觸發(fā)此事件
JS中常用的編碼解碼方法
正常的編碼解碼(非加密)
1螃成、escape/unescape:主要就是把中文漢字進(jìn)行編碼和解碼(一般只有JS語(yǔ)言支持:常用于前端頁(yè)面通信時(shí)候的中文漢字編碼)
2、encodeURI/decodeURI:基本上所有的編程語(yǔ)言都支持啥容;
3锈颗、encodeURIComponent/ decodeURIComponent:使用對(duì)應(yīng)的編碼替換所有非字母數(shù)字字符。
encodeURI與encodeURIComponent[k?m?po?n?nt]的區(qū)別:
- encodeURI() 編碼后的結(jié)果是除了空格之外的其他字符都原封不動(dòng),只有空格被替換 咪惠。而 encodeURIComponent() 方法則會(huì)使用對(duì)應(yīng)的編碼替換所有非字母數(shù)字字符击吱。
加密編碼解碼
1、可逆轉(zhuǎn)加密(一般都是自己定規(guī)則)
2遥昧、不可逆轉(zhuǎn)加密(基于MD5加密完成覆醇,為了安全一般都進(jìn)行二次加密)
let str = 'http://www.baidu.com/?',
obj = {
name:'珠峰培訓(xùn)',
age:9,
url:'http://www.zhufengpeixun.cn/?lx=1'
};
//=>把OBJ中的每一項(xiàng)屬性名和屬性值拼接到URL的末尾(問號(hào)傳參方式)
for(let key in obj){
str+=`${key}=${encodeURIComponent(obj[key])}&`;
//=>不能使用encodeURI必須使用encodeURIComponent,原因是encodeURI不能編碼特殊的字符
}
console.log(str.replace(/&$/g,''));
//=>后期獲取URL問號(hào)參數(shù)的時(shí)候炭臭,我們把獲取的值在依次的解碼即可
String.prototype.myQueryUrlParameter=function myQueryUrlParameter(){
let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g,
obj={};
this.replace(reg,(...arg)=>{
let [,key,value]=arg;
obj[key]=decodeURIComponent(value);//=>此處獲取的時(shí)候可以進(jìn)行解碼
});
return obj;
}
AJAX中的同步異步
Ajax中的同步:當(dāng)AJAX任務(wù)開始的時(shí)候永脓,直到readyState為4的時(shí)候任務(wù)才結(jié)束,此時(shí)才可以處理其他的事情鞋仍;
Ajax中的異步:當(dāng)AJAX任務(wù)開始的時(shí)候常摧,不需要等到readyState為4我依然可以繼續(xù)做其他的任務(wù),并且只有當(dāng)其他的任務(wù)完成后威创,我們?cè)倏磖eadyState是否等于4落午,到4再做相關(guān)操作;
倒計(jì)時(shí)搶購(gòu)時(shí)間差如何處理肚豺,在異步ajax請(qǐng)求readyState=2的時(shí)候拿到服務(wù)器時(shí)間溃斋,減少時(shí)間差。
倒計(jì)時(shí)搶購(gòu)
let getSeverTime=function () {
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
/*以2或3開頭都算獲取成功*/
if(!/^(2|3)\d{2}$/.test(xhr.status))return;
if(xhr.readyState===2){
/*只在第一次的時(shí)候獲取服務(wù)器的時(shí)間吸申,下次直接在其基礎(chǔ)上+1就行*/
severTime=new Date(xhr.getResponseHeader("date")).getTime();
}
};
/*盡可能的減少時(shí)間差*/
/*只獲取響應(yīng)頭信息即可梗劫,所以請(qǐng)求方式使用head即可享甸,head請(qǐng)求中狀態(tài)碼沒有3,因?yàn)椴恍枰却邮枕憫?yīng)主體內(nèi)容*/
xhr.open('head','json/banner.txt',true);
//只能使用異步梳侨,同步的時(shí)候無(wú)法在狀態(tài)為2或3的時(shí)候做處理蛉威,而我們要獲取響應(yīng)頭信息,在狀態(tài)為2的時(shí)候就可以獲取了猫妙,所以需要異步
xhr.send(null);
};
jQuery中的AJAX
$.ajax({
url:'xxx.txt',
method:'get',
/*dataType只是我們預(yù)設(shè)獲取結(jié)果的類型瓷翻,無(wú)法影響服務(wù)器傳遞給我們的類型,只能拿到服務(wù)器的數(shù)據(jù)后割坠,jQuery再進(jìn)行轉(zhuǎn)化*/
dataType:'json',
/*是否清除緩存*/
cache:true,
/*同步還是異步 false代表同步*/
async:true,
/*我們可以通過data屬性把一些信息傳遞給服務(wù)器;get方式通過問號(hào)傳參妒牙,post通過設(shè)置請(qǐng)求主體*/
/*data的值可以為:字符串彼哼、對(duì)象,如果是對(duì)象湘今,JQ會(huì)把對(duì)象轉(zhuǎn)化為xxx=xxx&xx=xx 這種字符串傳遞給服務(wù)器*/
data:null,
success:function (result) {
/*請(qǐng)求成功后(xhr.readyState為2或3開頭)才會(huì)觸發(fā)此函數(shù)*/
},
complete:function () {
/*不管請(qǐng)求是否成功都會(huì)觸發(fā)此函數(shù)*/
}
})