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ù)*/
        }
})