老有所依电视剧,私人家庭影院的最新配置要求,初恋的滋味2电视剧免费观看}

Web前端技術(shù)由html

、css和javascript三大部分構(gòu)成

，是一個(gè)龐大而復(fù)雜的技術(shù)體系

，其復(fù)雜程度不低于任何一門(mén)后端語(yǔ)言

。而我們?cè)趯W(xué)習(xí)它的時(shí)候往往是先從某一個(gè)點(diǎn)切入

，然后不斷地接觸和學(xué)習(xí)新的知識(shí)點(diǎn)，因此對(duì)于初學(xué)者很難理清楚整個(gè)體系的脈絡(luò)結(jié)構(gòu)

。本文將對(duì)Web前端知識(shí)體系進(jìn)行簡(jiǎn)單的梳理

，對(duì)應(yīng)的每個(gè)知識(shí)點(diǎn)點(diǎn)到為止，不作詳細(xì)介紹

。目的是幫助大家審查自己的知識(shí)結(jié)構(gòu)是否完善

，如有遺漏或不正確的地方，希望共勉

。

JAVASCRIPT 篇

、基礎(chǔ)語(yǔ)法

Javascript基礎(chǔ)語(yǔ)法包括：變量定義、數(shù)據(jù)類(lèi)型

、循環(huán)

、選擇

、內(nèi)置對(duì)象等

。

數(shù)據(jù)類(lèi)型有string,number,boolean,null,undefined,object等。其中

，string,number和boolean是基礎(chǔ)類(lèi)型,null和undefined是JS中的兩個(gè)特殊類(lèi)型,object是引用類(lèi)型

。

Javascript可以通過(guò)typeof來(lái)判斷基礎(chǔ)數(shù)據(jù)類(lèi)型

，但不能夠準(zhǔn)確判斷引用類(lèi)型, 因此需要用到另外一個(gè)方法，那就是Object的toString,關(guān)于數(shù)據(jù)類(lèi)型及其判斷可以參考以下博客：數(shù)據(jù)類(lèi)型詳解 和 判斷JS數(shù)據(jù)類(lèi)型的四種方法

JS常用的內(nèi)置對(duì)象有Date

、Array

、JSON,RegExp等。一般來(lái)講

，Date和Array用的最頻繁

，JSON可以對(duì)對(duì)象和數(shù)組進(jìn)行序列化和反序列化，還有一個(gè)作用就是實(shí)現(xiàn)對(duì)象的深拷貝

。

RegExp即正則表達(dá)式

，是處理字符串的利器。關(guān)于數(shù)據(jù)類(lèi)型和正則表達(dá)式的介紹可以參考博客：ES5對(duì)數(shù)組增強(qiáng)的9個(gè)API 和 JS正則表達(dá)式精簡(jiǎn)

、函數(shù)原型鏈

Javascript雖然沒(méi)有繼承概念

，但Javascript在函數(shù)Function對(duì)象中建立了原型對(duì)象prototype，并以Function對(duì)象為主線

，從上至下

，在內(nèi)部構(gòu)建了一條原型鏈。

簡(jiǎn)單來(lái)說(shuō)就是建立了變量查找機(jī)制

，當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)

，先查找對(duì)象本身是否存在

，如果不存在就去該對(duì)象所在的原型連上去找，直到Object對(duì)象為止

，如果都沒(méi)有找到該屬性才會(huì)返回undefined

。

因此我們經(jīng)常會(huì)利用函數(shù)的原型機(jī)制來(lái)實(shí)現(xiàn)JS繼承。關(guān)于函數(shù)原型鏈可參考博客：JS原型對(duì)象和原型鏈

、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的

。在JS中沒(méi)有會(huì)塊級(jí)作用域，只有函數(shù)作用域

，因此JS中還存在著另外一種怪異現(xiàn)象

，那就是變量提升。關(guān)于作用域的介紹請(qǐng)參考博客：函數(shù)的作用域和作用域鏈

、函數(shù)指針 this

this 存在于函數(shù)中，它指向的是該函數(shù)在運(yùn)行時(shí)被調(diào)用的那個(gè)對(duì)象

。在實(shí)際項(xiàng)目中

，遇到this的坑比較多，因此需要對(duì)this作深入的理解

。

Function對(duì)象還提供了call

、apply和bind等方法來(lái)改變函數(shù)的this指向，其中call和apply主動(dòng)執(zhí)行函數(shù)

，bind一般在事件回調(diào)中使用

，而call和apply的區(qū)別只是參數(shù)的傳遞方式不同。關(guān)于call,apply和bind的用戶請(qǐng)參考博客：詳解JS的call,apply和bind

、構(gòu)造函數(shù) new

JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來(lái)調(diào)用

，當(dāng)使用new來(lái)創(chuàng)建對(duì)象時(shí)，對(duì)應(yīng)的函數(shù)就是構(gòu)造函數(shù)

，通過(guò)對(duì)象來(lái)調(diào)用時(shí)就是普通函數(shù)

。

普通函數(shù)的創(chuàng)建有：顯式聲明、匿名定義

、new Function() 等三種方式

。

當(dāng)通過(guò)new來(lái)創(chuàng)建一個(gè)新對(duì)象時(shí)，JS底層將新對(duì)象的原型鏈指向了構(gòu)造函數(shù)的原型對(duì)象

，于是就在新對(duì)象和函數(shù)對(duì)象之間建立了一條原型鏈

，通過(guò)新對(duì)象可以訪問(wèn)到函數(shù)對(duì)象原型prototype中的方法和屬性。new的詳細(xì)介紹請(qǐng)參考博客：理解JS中的new運(yùn)算符

、閉包

閉包其實(shí)是一個(gè)主動(dòng)執(zhí)行的代碼塊

，這個(gè)代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量

，可以形成一個(gè)獨(dú)立的執(zhí)行過(guò)程

，因此我們經(jīng)常用閉包來(lái)定義組件

。關(guān)于閉包的介紹請(qǐng)參考：干貨分享：讓你分分鐘學(xué)會(huì)JS閉包

6、單線程和異步隊(duì)列

setTimeout和setInterval是JS內(nèi)置的兩個(gè)定時(shí)器

，使用很簡(jiǎn)單

，但這兩個(gè)方法背后的原理卻不簡(jiǎn)單。

我們知道

，JS是單線程語(yǔ)言

，在瀏覽器中，當(dāng)JS代碼被加載時(shí)

，瀏覽器會(huì)為其分配一個(gè)主線程來(lái)執(zhí)行任務(wù)(函數(shù))

，主線程會(huì)形成一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來(lái)執(zhí)行

。

但在瀏覽器中有一些任務(wù)是非常耗時(shí)的

，比如http請(qǐng)求、定時(shí)器

、事件回調(diào)等

，為了保證其他任務(wù)的執(zhí)行效率不被影響，JS在執(zhí)行環(huán)境中維護(hù)了一個(gè)異步隊(duì)列(也叫工作線程)

，并將這些任務(wù)放入隊(duì)列中進(jìn)行等待

，這些任務(wù)的執(zhí)行時(shí)機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后

，才會(huì)去檢查異步隊(duì)列中的任務(wù)是否需要開(kāi)始執(zhí)行
。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。關(guān)于單線程和異步隊(duì)列問(wèn)題請(qǐng)參考：setTimeout（0）

、異步通訊 Ajax技術(shù)

Ajax是瀏覽器專(zhuān)門(mén)用來(lái)和服務(wù)器進(jìn)行交互的異步通訊技術(shù)

，其核心對(duì)象是XMLHttpRequest,通過(guò)該對(duì)象可以創(chuàng)建一個(gè)Ajax請(qǐng)求。為了防止XSS攻擊

，瀏覽器對(duì)Ajax做了限制

，不允許Ajax跨域請(qǐng)求服務(wù)器,就是只能訪問(wèn)當(dāng)前域名下的url。

當(dāng)然

，如果確信你的站點(diǎn)不存在跨域的風(fēng)險(xiǎn)

，可以在服務(wù)端主動(dòng)開(kāi)啟跨域請(qǐng)求。也可以直接通過(guò)CORS或JSONP來(lái)實(shí)現(xiàn)

。

JSONP是利用腳本(script)跨域能力來(lái)模擬Ajax請(qǐng)求

。

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是”跨域資源共享”（Cross-origin resource sharing）

。它允許瀏覽器向跨源服務(wù)器

，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制

。關(guān)于CORS的介紹請(qǐng)參考：跨域資源共享 CORS 詳解

、DOM對(duì)象 document

document對(duì)象里保存著整個(gè)web頁(yè)面dom結(jié)構(gòu)

，在頁(yè)面上所有的元素最終都會(huì)映射為一個(gè)dom對(duì)象。 document也提供了很多api來(lái)查找特定的dom對(duì)象

，比如getElementById,querySelector等等

。

9、事件系統(tǒng) Event

事件是用戶與頁(yè)面交互的基礎(chǔ)

，到目前為止

，DOM事件從PC端的鼠標(biāo)事件(mouse) 發(fā)展到移動(dòng)端的觸摸事件(touch) 和手勢(shì)事件(guesture)

由于DOM結(jié)構(gòu)可能會(huì)多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡

，后者最常用

。利用事件冒泡機(jī)制可以實(shí)現(xiàn)很多功能，比如頁(yè)面點(diǎn)擊統(tǒng)計(jì)

。關(guān)于兩種事件流的介紹請(qǐng)參考：事件冒泡和捕獲

除此之外

，在頁(yè)面初始化、滾動(dòng)

、隱藏

、返回等操作時(shí)分別內(nèi)置了onload/onDOMContentLoaded、onscroll

、onvisibility和onhashchange等事件，如果想要捕獲這些事件

，需要通過(guò)addEventLisener/attachEvent來(lái)進(jìn)行綁定

。

10、全局對(duì)象 window

在JS中

，當(dāng)一段JS代碼在瀏覽器中被加載執(zhí)行

，JS引擎會(huì)在內(nèi)存中構(gòu)建一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境的作用是保證所有的函數(shù)能按照正確的順序被執(zhí)行

，而window對(duì)象則是這個(gè)執(zhí)行環(huán)境中的一個(gè)全局對(duì)象

，window對(duì)象中內(nèi)置了很多操作api和對(duì)象，document對(duì)象就是其中一個(gè)

。關(guān)于JS執(zhí)行環(huán)境的介紹請(qǐng)參考博客：深入理解JS執(zhí)行細(xì)節(jié)

CSS 篇

css是用來(lái)對(duì)html進(jìn)行修飾的一門(mén)語(yǔ)言

。

1、選擇器

css的選擇器有很多種

，常用的有類(lèi)選擇器

、標(biāo)簽選擇器、ID選擇器

、后代選擇器

、群組選擇器、偽類(lèi)選擇器(before/after)

、兄弟選擇器(+~)

、屬性選擇器等等

。

2、定位

定位一般有相對(duì)定位(relative)

、絕對(duì)定位(absolute)

、固定定位(fixed)，relative和absolute在移動(dòng)端用的最多

，fixed 在移動(dòng)端有兼容性問(wèn)題

，因此不推薦使用，在移動(dòng)端替代fixed的方案是 absolute+內(nèi)部滾動(dòng)

。

、浮動(dòng)

設(shè)置float為left或right，就能使該元素脫離文檔流

，向左或向右浮動(dòng)

。一般在做宮格模式布局時(shí)會(huì)用到，如果子元素全部設(shè)置為浮動(dòng)

，則父元素是塌陷的

，這時(shí)就需要清除浮動(dòng)，清除浮動(dòng)的方法也很多

，常用的方法是在元素末尾加空元素設(shè)置clear:both, 更高級(jí)一點(diǎn)的就給父容器設(shè)置before/after來(lái)模擬一個(gè)空元素

，還可以直接設(shè)置overflow:auto/hidden。除過(guò)浮動(dòng)可以實(shí)現(xiàn)宮格模式

，行內(nèi)盒子(inline-block)和table也可以

。

4、盒子模型

盒子模型是css最重要的一個(gè)概念

，也是css布局的基石

。常見(jiàn)的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，盒子最關(guān)鍵的幾個(gè)屬性包括margin

、border

、padding和content,這幾個(gè)元素可以設(shè)置盒子和盒子之間的關(guān)系以及盒子和內(nèi)容之間的關(guān)系。還有一個(gè)問(wèn)題是計(jì)算盒子的大小

，需要注意的是

，box-sizing屬性的設(shè)置會(huì)影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并

。行內(nèi)框

、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

、Flex布局

Flex布局的容器是一個(gè)伸縮容器

，首先容器本身會(huì)更具容器中的元素動(dòng)態(tài)設(shè)置自身大小

；然后當(dāng)Flex容器被應(yīng)用一個(gè)大小時(shí)（width和height）

，將會(huì)自動(dòng)調(diào)整容器中的元素適應(yīng)新大小

。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動(dòng)換行

。有了這個(gè)神器

，做頁(yè)面布局的可以方便很多了。注意

，設(shè)為Flex布局以后

，子元素的float、clear和vertical-align屬性將失效

。

、transition(過(guò)渡) 和 transform(旋轉(zhuǎn))

應(yīng)用transform可以對(duì)元素進(jìn)行平移(translate)、旋轉(zhuǎn)(rotate)

、放大縮小(scale)

、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時(shí)間內(nèi)平滑的過(guò)渡

。使用transition和transform就可以實(shí)現(xiàn)頁(yè)面的滑動(dòng)切換效果

。

7、動(dòng)畫(huà) Animation

Animation首先需要設(shè)置一個(gè)動(dòng)畫(huà)函數(shù)

，然后以這個(gè)動(dòng)畫(huà)的方式來(lái)改變?cè)氐?span>css屬性之的變化

，動(dòng)畫(huà)可以被設(shè)置為永久循環(huán)演示。和transition相比

，animation設(shè)置動(dòng)畫(huà)效果更靈活更豐富

，二者還有一個(gè)區(qū)別是：transition只能通過(guò)主動(dòng)改變?cè)氐?span>css值才能觸發(fā)動(dòng)畫(huà)效果，而animation一旦被應(yīng)用

，就開(kāi)始執(zhí)行動(dòng)畫(huà)。

、Sprite圖

對(duì)于大型站點(diǎn)

，為了減少http請(qǐng)求的次數(shù)，一般會(huì)將常用的小圖標(biāo)排到一個(gè)大圖中

，頁(yè)面加載時(shí)只需請(qǐng)求一次網(wǎng)絡(luò)

，然后在css中通過(guò)設(shè)置background-position來(lái)控制顯示所需要的小圖標(biāo)。

、字體圖標(biāo) iconfont

所謂字體圖標(biāo)就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中

，通過(guò)在CSS中引用該字體文件，然后可以直接通過(guò)控制字體的css屬性來(lái)設(shè)置圖標(biāo)的樣式

。

HTML 篇

、Web語(yǔ)義化 和 SEO

html 常規(guī)標(biāo)簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語(yǔ)義化的標(biāo)簽

，比如header,acticle,aside,section,footer,audio,radio 等等

。

Web語(yǔ)義化是指使用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽

，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義

，能夠讓人和搜索引擎都容易理解

。

SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化

，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名

，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點(diǎn)擊訪問(wèn)網(wǎng)站

，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷(xiāo)及品牌建設(shè)的目標(biāo)

。

搜索引擎通過(guò)爬蟲(chóng)技術(shù)獲取的頁(yè)面就是由一堆html標(biāo)簽組成的代碼,，人可以通過(guò)可視化的方式來(lái)判斷頁(yè)面上哪些內(nèi)容是重點(diǎn)

，而機(jī)器做不到

。但搜索引擎會(huì)根據(jù)標(biāo)簽的含義來(lái)判斷內(nèi)容的權(quán)重，因此

，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽

，使整個(gè)頁(yè)面的語(yǔ)義明確，結(jié)構(gòu)清晰

，搜索引擎才能正確識(shí)別頁(yè)面中的重要內(nèi)容

，并予以較高的權(quán)值。比如h1~h6這幾個(gè)標(biāo)簽在SEO中的權(quán)值非常高

，用它們作頁(yè)面的標(biāo)題就是一個(gè)簡(jiǎn)單的SEO優(yōu)化

。

2、頁(yè)面渲染機(jī)制

頁(yè)面渲染就是瀏覽器的渲染引擎將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的過(guò)程

。大致工作原理如下：

用戶輸入網(wǎng)址
，瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件
；
渲染引擎開(kāi)始載入html代碼
，并將HTML中的標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，生成DOM樹(shù)
；
如果中引用了外部css文件
，則發(fā)出css文件請(qǐng)求，服務(wù)器返回該文件
；
如果中引用了外部js文件
，則發(fā)出js文件請(qǐng)求，服務(wù)器返回該文件后開(kāi)始運(yùn)行
；
渲染引擎繼續(xù)載入html中的部分的代碼
，并開(kāi)始解析前面返回的css文件，然后根據(jù)css選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建渲染樹(shù)
；
從根節(jié)點(diǎn)遞歸調(diào)用
，計(jì)算每一個(gè)元素的大小、位置等
，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)
；
如果body中的引用了圖片資源，則立即向服務(wù)器發(fā)出請(qǐng)求
，此時(shí)渲染引擎不會(huì)等待圖片下載完畢
，而是繼續(xù)渲染后面的代碼；
服務(wù)器返回圖片文件
，由于圖片占用了一定面積
，影響了后面段落的排版，因此引擎需要回過(guò)頭來(lái)重新渲染這部分代碼
；
如果此時(shí)js腳本中運(yùn)行了style.display=”none”, 布局被改變
，引擎也需要重新渲染這部分代碼；
直到為止
，頁(yè)面渲染完畢
。

3、重繪和回流

當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸

，布局

，隱藏等改變而需要重新構(gòu)建。這就稱為回流

。比如上面的img文件加載完成后就會(huì)引起回流

，每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候

。

當(dāng)渲染樹(shù)中的一些元素需要更新屬性

，而這些屬性只是影響元素的外觀，風(fēng)格

，而不會(huì)影響布局的

，比如background-color。則就叫稱為重繪

。

從上面可以看出，回流必將引起重繪

，而重繪不一定會(huì)引起回流

。

會(huì)引起重繪和回流的操作

添加、刪除元素(回流+重繪)
隱藏元素
，display:none(回流+重繪)
，visibility:hidden(只重繪，不回流)
移動(dòng)元素
，比如改變top,left,transform的值
，或者移動(dòng)元素到另外一個(gè)父元素中
。(重繪+回流)
對(duì)style的操作(對(duì)不同的屬性操作，影響不一樣)
還有一種是用戶的操作
，比如改變?yōu)g覽器大小
，改變?yōu)g覽器的字體大小等(回流+重繪)

4、本地存儲(chǔ)

本地存儲(chǔ)最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本

，數(shù)據(jù)以鍵值對(duì)的形式保存

，可以設(shè)置過(guò)期時(shí)間。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)

，因?yàn)槊空?qǐng)求一次頁(yè)面

，cookie 都會(huì)發(fā)送給服務(wù)器，這使得 cookie 速度很慢而且效率也不高

。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)

，如下所示：

Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名（name）
、值（value）和等號(hào)
。
Opera允許cookie多達(dá)4096個(gè)字節(jié)，包括：名（name）
、值（value）和等號(hào)
。
Internet Explorer允許cookie多達(dá)4095個(gè)字節(jié)，包括：名（name）
、值（value）和等號(hào)
。

在所有瀏覽器中，任何cookie大小超過(guò)限制都被忽略

，且永遠(yuǎn)不會(huì)被設(shè)置

。

html5提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來(lái)存儲(chǔ)數(shù)據(jù)，前者是永久存儲(chǔ)

，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(session),即當(dāng)瀏覽器窗口關(guān)閉后

，sessionStorage中的數(shù)據(jù)被清除。

localStorage的存儲(chǔ)空間大約5M左右(不同瀏覽器可能不同

，分 HOST)

，這個(gè)相當(dāng)于一個(gè)5M大小的前端頁(yè)面的數(shù)據(jù)庫(kù)，相比于cookie可以節(jié)約帶寬

，但localStorage在瀏覽器隱私模式下是不可讀取的

，當(dāng)存儲(chǔ)數(shù)據(jù)超過(guò)了localStorage的存儲(chǔ)空間后會(huì)拋出異常。

此外

，H5還提供了逆天的websql和indexedDB,允許前端以關(guān)系型數(shù)據(jù)庫(kù)的方式來(lái)存儲(chǔ)本地?cái)?shù)據(jù)

，相對(duì)來(lái)說(shuō)，這個(gè)功能目前應(yīng)用的場(chǎng)景比較少，此處不作介紹

。

、瀏覽器緩存機(jī)制

瀏覽器緩存機(jī)制是指通過(guò) HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來(lái)控制文件緩存的機(jī)制。

Cache-Control 用于控制文件在本地緩存有效時(shí)長(zhǎng)

。最常見(jiàn)的

，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時(shí)長(zhǎng)是600秒（從發(fā)出請(qǐng)求算起）

。在接下來(lái)600秒內(nèi)

，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 HTTP 請(qǐng)求

，而是直接使用本地緩存的文件

。

Last-Modified 是標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間。下次請(qǐng)求時(shí)

，如果文件緩存過(guò)期

，瀏覽器通過(guò) If-Modified-Since 字段帶上這個(gè)時(shí)間，發(fā)送給服務(wù)器

，由服務(wù)器比較時(shí)間戳來(lái)判斷文件是否有修改

。如果沒(méi)有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存

；如果有修改

，則返回200，同時(shí)返回最新的文件

。

Cache-Control 通常與 Last-Modified 一起使用

。一個(gè)用于控制緩存有效時(shí)間，一個(gè)在緩存失效后

，向服務(wù)查詢是否有更新

。

Cache-Control 還有一個(gè)同功能的字段：Expires。Expires 的值一個(gè)絕對(duì)的時(shí)間點(diǎn)

，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT

，表示在這個(gè)時(shí)間點(diǎn)之前，緩存都是有效的

。

Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段

，Cache-Control 是 HTTP1.1 標(biāo)準(zhǔn)中新加的字段，功能一樣

，都是控制緩存的有效時(shí)間

。當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)，Cache-Control 是高優(yōu)化級(jí)的

。

Etag 也是和 Last-Modified 一樣，對(duì)文件進(jìn)行標(biāo)識(shí)的字段。不同的是

，Etag 的取值是一個(gè)對(duì)文件進(jìn)行標(biāo)識(shí)的特征字串

。在向服務(wù)器查詢文件是否有更新時(shí)，瀏覽器通過(guò) If-None-Match 字段把特征字串發(fā)送給服務(wù)器

，由服務(wù)器和文件最新特征字串進(jìn)行匹配

，來(lái)判斷文件是否有更新。沒(méi)有更新回包304

，有更新回包200

。Etag 和 Last-Modified 可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用。兩個(gè)同時(shí)使用時(shí)

，只要滿足基中一個(gè)條件

，就認(rèn)為文件沒(méi)有更新。

另外有兩種特殊的情況：

手動(dòng)刷新頁(yè)面（F5)
，瀏覽器會(huì)直接認(rèn)為緩存已經(jīng)過(guò)期（可能緩存還沒(méi)有過(guò)期）
，在請(qǐng)求中加上字段：Cache-Control:max-age=0，發(fā)包向服務(wù)器查詢是否有文件是否有更新
。
強(qiáng)制刷新頁(yè)面（Ctrl+F5)
，瀏覽器會(huì)直接忽略本地的緩存（有緩存也會(huì)認(rèn)為本地沒(méi)有緩存），在請(qǐng)求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache）
，發(fā)包向服務(wù)重新拉取文件
。

6、History路由機(jī)制

用戶訪問(wèn)網(wǎng)頁(yè)的歷史記錄通常會(huì)被保存在一個(gè)類(lèi)似于棧對(duì)象中

，即history對(duì)象

，點(diǎn)擊返回就出棧，跳下一頁(yè)就入棧

。它提供了一些方法來(lái)操作頁(yè)面的前進(jìn)和后退：

window.history.back() 返回到上一個(gè)頁(yè)面
window.history.forward() 進(jìn)入到下一個(gè)頁(yè)面
window.history.go([delta]) 跳轉(zhuǎn)到指定頁(yè)面

HTML5 對(duì)History Api 進(jìn)行了增強(qiáng)

，新增了兩個(gè)Api和一個(gè)事件，分別是pushState

、replaceState 和 onpopstate

pushState是往history對(duì)象里添加一個(gè)新的歷史記錄

，即壓棧。

replaceState 是替換history對(duì)象中的當(dāng)前歷史

。

當(dāng)點(diǎn)擊瀏覽器后退按鈕或js調(diào)用history.back都會(huì)觸發(fā)onpopstate事件, 與其類(lèi)似的還有一個(gè)事件: onhashchange

。

onhashchange是老API, 瀏覽器支持度高, 本來(lái)是用來(lái)監(jiān)聽(tīng)hash變化的, 但可以被利用來(lái)做客戶端前進(jìn)和后退事件的監(jiān)聽(tīng)，onpopstate是專(zhuān)門(mén)用來(lái)監(jiān)聽(tīng)瀏覽器前進(jìn)后退的, 不僅可以支持hash, 非hash的同源url也支持

。

、HTML5離線緩存

HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)

，如果要在這個(gè)緩存中保存數(shù)據(jù)

，可以使用一個(gè)描述文件（manifest file）

，列出要下載和緩存的資源。

manifest 文件是簡(jiǎn)單的文本文件

，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）

。manifest 文件可分為三個(gè)部分：

– CACHE MANIFEST – 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

– NETWORK – 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

– FALLBACK – 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）

離線緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：

離線瀏覽 – 用戶可在應(yīng)用離線時(shí)使用它們
速度 – 已緩存資源加載得更快
減少服務(wù)器負(fù)載 – 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源
。

、Canvas和SVG

Canvas 通過(guò)Javascript 來(lái)繪制 2D 圖形。Canvas 是逐像素進(jìn)行渲染的

。在 Canvas 中

，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注

。如果其位置發(fā)生變化

，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象

。

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言

。SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的

。你可以為某個(gè)元素附加 JavaScript 事件處理器

。在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象

。如果 SVG 對(duì)象的屬性發(fā)生變化

，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas和SVG相比

，canvas更依賴于分辨率

，不支持事件處理器，文本渲染能力弱

，比較適合密集型游戲

，其中的許多對(duì)象會(huì)被頻繁繪制，而svg則比較適用于類(lèi)似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序

。

上一篇：網(wǎng)站建設(shè)好了以后怎么宣傳以及推廣

下一篇：網(wǎng)站建設(shè)怎么做到和用戶體驗(yàn)度匹配最高

返回列表頁(yè)>

【邁創(chuàng)與眾不同】憑借對(duì)設(shè)計(jì)的熱愛(ài)和執(zhí)著

，互聯(lián)網(wǎng)營(yíng)銷(xiāo)趨勢(shì)的敏銳洞察和深刻理解，與眾多同行不同的是

，邁創(chuàng)更注重與客戶互促共生

，價(jià)值同在。

本圈子所有內(nèi)容若需轉(zhuǎn)載請(qǐng)聯(lián)系我們

。

文章分類(lèi)

別錯(cuò)過(guò)

！200+上市公司選擇的策劃方案

《2025年行業(yè)最新設(shè)計(jì)趨勢(shì)》《網(wǎng)站痛點(diǎn)分析與優(yōu)化策略》《競(jìng)品洞察與成功案例》

立即領(lǐng)取資料立即領(lǐng)取資料

僅剩5份

* 200+上市公司都在用的工具書(shū)

微信掃碼領(lǐng)取

Web 前端知識(shí)體系精簡(jiǎn)

文章分類(lèi)

熱門(mén)文章

熱門(mén)標(biāo)簽