分享8個(gè)經(jīng)典的HTML5 3D動(dòng)畫賞析特效源碼

TML5技術(shù)已經(jīng)越來(lái)越被我們所接受，特別是一些3D的動(dòng)畫特效。本文介紹的8個(gè)HTML5 3D動(dòng)畫并沒有特別華麗的界面，但是比較實(shí)用，涉及到3D圖片、3D圖表、3D按鈕等方面，一起來(lái)看看。

1、HTML5 3D動(dòng)畫柱形圖表

這次我們要來(lái)分享一款效果非常酷的HTML5 3D柱形圖表，這款HTML5圖表和之前分享的都不一樣，主要是外觀上比較吸引人，首先圖表是3D立體的，有一種非常棒的視覺效果；其次，當(dāng)鼠標(biāo)劃過(guò)柱形圖表時(shí)，會(huì)有很不錯(cuò)的HTML5動(dòng)畫效果。

2、HTML5 3D 粒子波浪動(dòng)畫特效

今天我們分享一款升級(jí)版HTML5 3D粒子波浪動(dòng)畫特效，我們可以旋轉(zhuǎn)不同的視角來(lái)欣賞粒子波浪的滾動(dòng)特效。HTML5在動(dòng)畫制作方面的確讓人眼前一亮。

3、HTML5自定義文字背景生成QQ簽名檔

這是一款利用HTML5實(shí)現(xiàn)的自定義文字背景應(yīng)用，首先我們可以輸入需要顯示的文字，并且為該文字選擇一張背景圖片，背景圖片就像蒙版一樣覆蓋在文字上。點(diǎn)擊生成QQ簽名檔即可將文字背景融為一體生成另外一張圖片，你也可以下載這張擁有你QQ簽名檔的圖片。

4、HTML5坦克大戰(zhàn)游戲簡(jiǎn)化版

今天分享的是一款簡(jiǎn)化版的HTML5坦克大戰(zhàn)游戲，方向鍵控制坦克的行進(jìn)方向，空格鍵發(fā)射子彈，命中敵方坦克后也會(huì)發(fā)出聲音，效果還算可以。

5、HTML5 3D陰影文字特效

今天我們要來(lái)分享一款非常簡(jiǎn)單大氣的HTML5 3D文字特效，這個(gè)3D文字特效是通過(guò)文字加粗以及文字陰影來(lái)實(shí)現(xiàn)的，效果非常不錯(cuò)。同時(shí)我們?cè)趆tml5tricks網(wǎng)站上也分享過(guò)很多炫酷的文字特效，比如CSS3文字陰影效果陰影角度可隨鼠標(biāo)變化、動(dòng)感的CSS3 Loading文字特效。

6、HTML5 3D衣服擺動(dòng)特效超酷HTML5 3D動(dòng)畫

今天向大家分享一款HTML5 3D衣服擺動(dòng)動(dòng)畫特效，動(dòng)畫也是在HTML5 Canvas上完成，它模擬衣服晾在繩子上，點(diǎn)擊鼠標(biāo)可以讓衣服擺動(dòng)起來(lái)，就行風(fēng)吹動(dòng)它一樣，非常逼真炫酷。

7、HTML5/CSS3一組可愛的3D按鈕

這是一款利用HTML5和CSS3制作而成的按鈕組合，這款CSS按鈕非常具有個(gè)性化。該CSS3按鈕不僅具有3D的外觀，點(diǎn)擊按鈕也具有非常立體的效果，更具有特點(diǎn)的是這款CSS3按鈕的形狀是不規(guī)則的，而且按鈕中都有一個(gè)可愛的小圖標(biāo)。

8、HTML5 Canvas 3D折線圖表應(yīng)用

今天我們?cè)賮?lái)討論一下關(guān)于HTML5圖表應(yīng)用的問題，這款HTML5圖表是基于canvas的3D折線圖表，圖表在初始化的時(shí)候會(huì)根據(jù)數(shù)據(jù)點(diǎn)把折線分割成多條線段，然后線段將逐漸懸浮到數(shù)據(jù)點(diǎn)對(duì)應(yīng)數(shù)值的位置。由于是3D的效果，所以圖表的折線也和其他折線圖表的不同。

以上就是8個(gè)經(jīng)典的HTML5 3D動(dòng)畫賞析，希望大家喜歡。

016年只剩最后一個(gè)月了!!!

2016年只剩最后一個(gè)月了!!!

重要的事情說(shuō)三遍!哈哈各位看官今年給自己立的小目標(biāo)不知完成了沒?還有多少未完成的事呢?反正小編這一年渾渾噩噩的就過(guò)去了，鬼知道我經(jīng)歷了什么…

不過(guò)!!!小編這一年最大的收獲就是收集了滿滿的干貨給你們!!!(讓我靜靜的裝下b (ˉ﹃ˉ))，嘿嘿~停止碎碎念!上貨!

●源碼

基于android的網(wǎng)上商城#Android(上傳作者：LongCJ)

LongCJ：該項(xiàng)目采用MVP架構(gòu)實(shí)現(xiàn)了用戶登錄、注冊(cè)，把用戶信息存放在服務(wù)器上，便于實(shí)現(xiàn)數(shù)據(jù)的同步;商品的推薦、瀏覽，改寫上拉刷新下拉加載加載商品信息，商品信息是通過(guò)Jsoup從網(wǎng)頁(yè)上抓取，獲得XML解析并封裝成實(shí)體類，然后適配到adapter;當(dāng)然用戶也可以搜索感興趣的商品和店鋪，Jsoup發(fā)送post請(qǐng)求后得到用戶搜索的商品，用戶還可以把感興趣的商品放入購(gòu)物車,用戶可以改變商品的數(shù)量或刪除商品。當(dāng)然還對(duì)商品進(jìn)行了分類處理，用戶可以瀏覽到每一類商品進(jìn)行選購(gòu)，減少了用戶選購(gòu)商品的時(shí)間。為了提高用戶體驗(yàn)，對(duì)商品圖片采用LruCache進(jìn)行緩存處理，提高了ListView的加載速度。

仿淘寶UI安卓模版#Android(上傳作者：蒙多)

蒙多：一款較好的商城類模版源碼，幫助你學(xué)習(xí)，工作。

自動(dòng)搶紅包#Android(上傳作者：DEV鯤)

DEV鯤：不用點(diǎn)擊，自動(dòng)搶紅包，僅限于普通紅包“恭喜發(fā)財(cái)”字樣。

FlycoPageIndicator廣告輪播#Android(上傳作者：Dancing )

Dancing ：第三方FlycoPageIndicator廣告輪播。

日常記賬#Android(上傳作者：說(shuō)不出的諾言)

說(shuō)不出的諾言：記錄日常生活中的各類日常花費(fèi)信息; 能夠?qū)⑹罩畔丛陆y(tǒng)計(jì)，按年統(tǒng)計(jì)，按賬戶統(tǒng)計(jì)，按分類統(tǒng)計(jì); 能夠添加，修改，刪除虛擬的賬戶，根據(jù)收入與支出自動(dòng)變動(dòng)賬戶余額; 能夠查看賬戶的詳細(xì)收支情況! 支持導(dǎo)出數(shù)據(jù)成Excel表格。

wemall微信商城系統(tǒng) v3.5.4#Android(上傳作者：wemallshop )

wemallshop ：wemall微信商城適用于小企業(yè)電子商務(wù)，例如微信水果，微信蔬菜，微信外賣，微信超市等等功能。

繪制餅狀圖#Android(上傳作者：dq2232711090)

dq2232711090：實(shí)現(xiàn)了用餅狀圖分析數(shù)據(jù)，并顯示。

Android 柱狀圖源碼#Android(上傳作者：kabinqiang )

kabinqiang ：簡(jiǎn)單的柱狀圖實(shí)現(xiàn)。

彈動(dòng)加載中效果#Android(上傳作者：Dancing )

Dancing ：運(yùn)用了封裝好的自定義view 。

Html5 canvas簽名畫板 #其他(上傳作者：xushuoshuo )

xushuoshuo：支持網(wǎng)頁(yè)直接手寫簽名，支持移動(dòng)端手寫。

●資料

HTML5移動(dòng)Web開發(fā)實(shí)戰(zhàn) (上傳作者：ziyun ) 查看

簡(jiǎn)介：全書從移動(dòng)Web、設(shè)備端配置和優(yōu)化，交互、響應(yīng)式設(shè)計(jì)、調(diào)試、性能測(cè)試等角度出發(fā)，包含60多個(gè)實(shí)用的實(shí)例，詳細(xì)闡述如何構(gòu)建快速、響應(yīng)式的HTML5移動(dòng)網(wǎng)站。

Java從入門到精通(第3版) (上傳作者：doubleK) 查看

簡(jiǎn)介：本書從初學(xué)者角度出發(fā)，通過(guò)通俗易懂的語(yǔ)言、豐富多彩的實(shí)例，詳細(xì)介紹了使用Java語(yǔ)言進(jìn)行程序開發(fā)需要掌握的知識(shí)。

HTML 5+CSS3從入門到精通 (上傳作者：booold) 查看

簡(jiǎn)介：本書全面系統(tǒng)地講解了基礎(chǔ)理論和實(shí)際運(yùn)用技術(shù)，通過(guò)大量實(shí)例對(duì)HTML5+CSS3應(yīng)用進(jìn)行深入淺出的分析。

HTML5程序設(shè)計(jì)(中文第2版) (上傳作者：redcar) 查看

簡(jiǎn)介：網(wǎng)頁(yè)設(shè)計(jì)入門經(jīng)典教程，html、css、javascript技術(shù)應(yīng)用詳解，網(wǎng)站建設(shè)必備寶典!

HTML5移動(dòng)Web開發(fā)指南 (上傳作者：fathersong) 查看

簡(jiǎn)介：主要圍繞html5技術(shù)，講述如何利用html5相關(guān)技術(shù)開發(fā)移動(dòng)web網(wǎng)站和web app應(yīng)用程序。

圖解HTTP (上傳作者：fanqie) 查看

簡(jiǎn)介：作者由HTTP協(xié)議的發(fā)展歷史娓娓道來(lái)，嚴(yán)謹(jǐn)細(xì)致地剖析了HTTP協(xié)議的結(jié)構(gòu)，列舉諸多常見通信場(chǎng)景及實(shí)戰(zhàn)案例，最后延伸到Web安全、最新技術(shù)動(dòng)向等方面。

JavaScript.DOM高級(jí)程序設(shè)計(jì) (上傳作者：RexTao) 查看

簡(jiǎn)介：JavaScript.DOM高級(jí)程序設(shè)計(jì)。

編寫可維護(hù)的Javascript (上傳作者：kide) 查看

簡(jiǎn)介：《編寫可維護(hù)的JavaScript》向開發(fā)人員闡述了如何在團(tuán)隊(duì)開發(fā)中編寫具備高可維護(hù)性的JavaScript代碼，書中詳細(xì)說(shuō)明了作為團(tuán)隊(duì)一分子，應(yīng)該怎么寫JavaScript。

●文章推薦

開源第二彈：來(lái)自百度的71款開源項(xiàng)目 (上傳作者：snoone) 閱讀
56個(gè) PHP 開發(fā)常用代碼片段 (上傳作者：kide) 閱讀
50個(gè)安卓開發(fā)者應(yīng)該熟悉的Android Studio技巧和資源 (上傳作者：糖果果) 閱讀
推薦幾本好書：學(xué)習(xí)前端我推薦這5本書 (上傳作者：hunter) 閱讀
那些適合日常使用的開源工具和應(yīng)用(辦公篇) (上傳作者：mengmeng231) 閱讀
強(qiáng)烈推薦：39個(gè)優(yōu)秀的Swift UI開源庫(kù) (上傳作者：snoone) 閱讀
關(guān)于HTML5，這里有不得不讀的10本書 (上傳作者：honglei) 閱讀
python機(jī)器學(xué)習(xí)入門資料梳理 (上傳作者：doubleK) 閱讀
HTTP 協(xié)議圖解 (上傳作者：okcity) 閱讀
超全面+最流行的「前端速查表」高清版大全 (上傳作者：extpo) 閱讀

【2016年學(xué)無(wú)止境下半年系列】

學(xué)無(wú)止境：10月DEV最熱免費(fèi)優(yōu)秀資源推薦

學(xué)無(wú)止境：9月DEV最熱免費(fèi)優(yōu)秀資源推薦

學(xué)無(wú)止境：8月DEV最熱免費(fèi)優(yōu)秀資源推薦

注：文中資源請(qǐng)移步原文 http://www.devstore.cn/new/newInfo/28076.html 獲取哈~

習(xí)目標(biāo)：了解JavaScript是如何與HTML結(jié)合來(lái)創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)，網(wǎng)頁(yè)中嵌入JavaScript的不同方式，JavaScript的內(nèi)容類型及其與<script>的關(guān)系

<script>元素

1、async:表示立即開始下載腳本，但不能阻止其他頁(yè)面動(dòng)作，比如下載資源或者等待其他腳本加載。只對(duì)外部腳本文件有效。

2、charset：使用src屬性指定代碼字符集。這個(gè)屬性很少用，因?yàn)榇蠖鄶?shù)瀏覽器不在乎它的值。

3、crossorigin；配置資源請(qǐng)求的CORS（跨源資源共享）設(shè)置。默認(rèn)情況下不使用CORS。crossorigin = “anonymous”配置文件請(qǐng)求不用設(shè)置憑據(jù)標(biāo)志。crossorigin = ”use-credentials“設(shè)置憑據(jù)標(biāo)志，意味著出站請(qǐng)求會(huì)包含憑據(jù)。

4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執(zhí)行。新版本中只能用于外部腳本。

5、integrity:允許比對(duì)接收到的資源和指定的加密簽名以驗(yàn)證子資源完整性（SRI，Subresource integrity），如果驗(yàn)證簽名不匹配則腳本不會(huì)執(zhí)行。這個(gè)屬性可以用于確保內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN，Content Delivery Network）不會(huì)提供惡意內(nèi)容。

6、language：此屬性已被廢止。

7、src:表示包含外部要執(zhí)行的代碼的外部文件。

8、type:代替language，表示代碼塊中腳本語(yǔ)言的內(nèi)容類型（也稱為MIME類型），按照慣例這個(gè)值始終都是”text/JavaScript“，盡管”text/JavaScript“和”text/ecmascript“都已經(jīng)廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過(guò)給type屬性這個(gè)值的話可能會(huì)導(dǎo)致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個(gè)值是module，則代碼會(huì)被當(dāng)成是ES6模塊，而且只有這時(shí)候代碼中才能出現(xiàn)import和export關(guān)鍵字。

使用<script>的方式有內(nèi)聯(lián)和外嵌兩種，只要把code寫入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上轉(zhuǎn)義字符“\”即可。

如果要外嵌JavaScript代碼只要使用src屬性來(lái)鏈接外部文件即可如：

XHTML 文檔中，可以忽略結(jié)束標(biāo)簽寫成<script src=“example.js”/>即可，但是這在HTML中不能使用。

標(biāo)簽位置

過(guò)去把JavaScript和CSS一起寫在head中，但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁(yè)面，對(duì)于JavaScript很多的頁(yè)面會(huì)導(dǎo)致頁(yè)面渲染速度過(guò)慢，為解決這個(gè)問題，JavaScript一般寫在body元素的頁(yè)面內(nèi)容的最后邊，如下

<html>

<body>

message

<\body>

</html>

推遲使用腳本

在外聯(lián)JavaScript時(shí)可以使用defer屬性來(lái)推遲腳本的運(yùn)行。可以寫成：

<html>

<head>

</head>

<body>

message

<\body>

</html>

異步執(zhí)行腳本

async屬性從腳本處理方式上與defer類似，但是不同的是標(biāo)記async的腳本并不能保證腳本按照他們的出現(xiàn)順序執(zhí)行，比如：

<html>

<head>

</head>

<body>

message

<\body>

</html>

不能保證example1比example2先執(zhí)行。

動(dòng)態(tài)加載腳本

除了<script>以外還可以用其他方式加載腳本。因?yàn)镴avaScript可以使用DOM API，所以通過(guò)向DOM中動(dòng)態(tài)地加入script元素同樣可以加載指定腳本。只要?jiǎng)?chuàng)建一個(gè)script元素并將其添加到DOM即可。

let script = document.createElement('script');

script.src = 'gibberish.js';

document.head.appendChild(script);

當(dāng)然，在把 HTMLElement 元素添加到 DOM 且執(zhí)行到這段代碼之前不會(huì)發(fā)送請(qǐng)求。默認(rèn)情況下，以這種方式創(chuàng)建的<script>元素是以異步方式加載的，相當(dāng)于添加了 async 屬性。不過(guò)這樣做可能會(huì)有問題，因?yàn)樗袨g覽器都支持 createElement()方法，但不是所有瀏覽器都支持 async 屬性。因此，如果要統(tǒng)一動(dòng)態(tài)腳本的加載行為，可以明確將其設(shè)置為同步加載：

let script = document.createElement('script');

script.src = 'gibberish.js';

script.async = false;

document.head.appendChild(script);

以這種方式獲取的資源對(duì)瀏覽器預(yù)加載器是不可見的。這會(huì)嚴(yán)重影響它們?cè)谫Y源獲取隊(duì)列中的優(yōu)先級(jí)。根據(jù)應(yīng)用程序的工作方式以及怎么使用，這種方式可能會(huì)嚴(yán)重影響性能。要想讓預(yù)加載器知道這些動(dòng)態(tài)請(qǐng)求文件的存在，可以在文檔頭部顯式聲明它們：

XHTML中的變化

可擴(kuò)展超文本標(biāo)記語(yǔ)言（XHTML，Extensible HyperText Markup Language）是將 HTML 作為 XML的應(yīng)用重新包裝的結(jié)果。與 HTML 不同，在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript，HTML 中則可以沒有這個(gè)屬性。XHTML 雖然已經(jīng)退出歷史舞臺(tái)，但實(shí)踐中偶爾可能也會(huì)遇到遺留代碼，為此本節(jié)稍作介紹。在 XHTML 中編寫代碼的規(guī)則比 HTML 中嚴(yán)格，這會(huì)影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效，但在 XHML 中是無(wú)效的。

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

在 HTML 中，解析<script>元素會(huì)應(yīng)用特殊規(guī)則。XHTML 中則沒有這些規(guī)則。這意味著 a < b語(yǔ)句中的小于號(hào)（<）會(huì)被解釋成一個(gè)標(biāo)簽的開始，并且由于作為標(biāo)簽開始的小于號(hào)后面不能有空格，這會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤。避免 XHTML 中這種語(yǔ)法錯(cuò)誤的方法有兩種。第一種是把所有小于號(hào)（<）都替換成對(duì)應(yīng)的 HTML實(shí)體形式（<）。結(jié)果代碼就是這樣的：

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

這樣代碼就可以在 XHTML 頁(yè)面中運(yùn)行了。不過(guò)，缺點(diǎn)是會(huì)影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個(gè) CDATA 塊中。在 XHTML（及 XML）中，CDATA 塊表示文檔中可以包含任意文本的區(qū)塊，其內(nèi)容不作為標(biāo)簽來(lái)解析，因此可以在其中包含任意字符，包括小于號(hào)，并且不會(huì)引發(fā)語(yǔ)法錯(cuò)誤。使用 CDATA 的格式如下：

<script type="text/javascript"><![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

]]></script>

在兼容 XHTML 的瀏覽器中，這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此，CDATA 標(biāo)記必須使用 JavaScript 注釋來(lái)抵消：

//<![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

//]]>

</script>

這種格式適用于所有現(xiàn)代瀏覽器。雖然有點(diǎn)黑科技的味道，但它可以通過(guò) XHTML 驗(yàn)證，而且對(duì)XHTML 之前的瀏覽器也能優(yōu)雅地降級(jí)。

廢棄的語(yǔ)法

自 1995 年 Netscape 2 發(fā)布以來(lái)，所有瀏覽器都將 JavaScript 作為默認(rèn)的編程語(yǔ)言。type 屬性使用一個(gè) MIME 類型字符串來(lái)標(biāo)識(shí)<script>的內(nèi)容，但 MIME 類型并沒有跨瀏覽器標(biāo)準(zhǔn)化。即使瀏覽器默認(rèn)使用 JavaScript，在某些情況下某個(gè)無(wú)效或無(wú)法識(shí)別的 MIME 類型也可能導(dǎo)致瀏覽器跳過(guò)（不執(zhí)行）相關(guān)代碼。因此，除非你使用 XHTML 或<script>標(biāo)簽要求或包含非 JavaScript 代碼，最佳做法是不指定 type 屬性。在最初采用 script 元素時(shí)，它標(biāo)志著開始走向與傳統(tǒng) HTML 解析不同的流程。對(duì)這個(gè)元素需要應(yīng)用特殊的解析規(guī)則，而這在不支持 JavaScript 的瀏覽器（特別是 Mosaic）中會(huì)導(dǎo)致問題。不支持的瀏覽器會(huì)把<script>元素的內(nèi)容輸出到頁(yè)面上，從而破壞頁(yè)面的外觀。Netscape 聯(lián)合 Mosaic 拿出了一個(gè)解決方案，對(duì)不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個(gè) HTML 注釋中，像這樣：

<script><!--

function sayHi(){

console.log("Hi!");

}

//--></script>

使用這種格式，Mosaic 等瀏覽器就可以忽略<script>標(biāo)簽中的內(nèi)容，而支持 JavaScript 的瀏覽器則必須識(shí)別這種模式，將其中的內(nèi)容作為 JavaScript 來(lái)解析。雖然這種格式仍然可以被所有瀏覽器識(shí)別和解析，但已經(jīng)不再必要，而且不應(yīng)該再使用了。在XHTML 模式下，這種格式也會(huì)導(dǎo)致腳本被忽略，因?yàn)榇a處于有效的 XML 注釋當(dāng)中。

行內(nèi)代碼與外部文件

雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼，但通常認(rèn)為最佳實(shí)踐是盡可能將 JavaScript 代碼放在外部文件中。不過(guò)這個(gè)最佳實(shí)踐并不是明確的強(qiáng)制性規(guī)則。推薦使用外部文件的理由如下。

? 可維護(hù)性。JavaScript 代碼如果分散到很多 HTML 頁(yè)面，會(huì)導(dǎo)致維護(hù)困難。而用一個(gè)目錄保存所有 JavaScript 文件，則更容易維護(hù)，這樣開發(fā)者就可以獨(dú)立于使用它們的 HTML 頁(yè)面來(lái)編輯代碼。

? 緩存。瀏覽器會(huì)根據(jù)特定的設(shè)置緩存所有外部鏈接的 JavaScript 文件，這意味著如果兩個(gè)頁(yè)面都用到同一個(gè)文件，則該文件只需下載一次。這最終意味著頁(yè)面加載更快。

? 適應(yīng)未來(lái)。通過(guò)把 JavaScript 放到外部文件中，就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語(yǔ)法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請(qǐng)求外部文件時(shí)，要重點(diǎn)考慮的一點(diǎn)是它們會(huì)占用多少帶寬。在 SPDY/HTTP2 中，預(yù)請(qǐng)求的消耗已顯著降低，以輕量、獨(dú)立 JavaScript 組件形式向客戶端送達(dá)腳本更具優(yōu)勢(shì)。比如，第一個(gè)頁(yè)面包含如下腳本：

<script src="mainA.js"></script>

<script src="component1.js"></script>

<script src="component2.js"></script>

<script src="component3.js"></script>

...

后續(xù)頁(yè)面可能包含如下腳本：

<script src="mainB.js"></script>

<script src="component3.js"></script>

<script src="component4.js"></script>

<script src="component5.js"></script>

...

在初次請(qǐng)求時(shí)，如果瀏覽器支持 SPDY/HTTP2，就可以從同一個(gè)地方取得一批文件，并將它們逐個(gè)放到瀏覽器緩存中。從瀏覽器角度看，通過(guò) SPDY/HTTP2 獲取所有這些獨(dú)立的資源與獲取一個(gè)大JavaScript 文件的延遲差不多。在第二個(gè)頁(yè)面請(qǐng)求時(shí)，由于你已經(jīng)把應(yīng)用程序切割成了輕量可緩存的文件，第二個(gè)頁(yè)面也依賴的某些組件此時(shí)已經(jīng)存在于瀏覽器緩存中了。當(dāng)然，這里假設(shè)瀏覽器支持 SPDY/HTTP2，只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器，可能還是用一個(gè)大文件更合適。

文檔模式

IE5.5 發(fā)明了文檔模式的概念，即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種：混雜模式（quirks mode）和標(biāo)準(zhǔn)模式（standards mode）。前者讓 IE 像 IE5 一樣（支持一些非標(biāo)準(zhǔn)的特性），后者讓 IE 具有兼容標(biāo)準(zhǔn)的行為。雖然這兩種模式的主要區(qū)別只體現(xiàn)在通過(guò) CSS 渲染的內(nèi)容方面，但對(duì)JavaScript 也有一些關(guān)聯(lián)影響，或稱為副作用。本書會(huì)經(jīng)常提到這些副作用。

IE 初次支持文檔模式切換以后，其他瀏覽器也跟著實(shí)現(xiàn)了。隨著瀏覽器的普遍實(shí)現(xiàn)，又出現(xiàn)了第三種文檔模式：準(zhǔn)標(biāo)準(zhǔn)模式（almost standards mode）。這種模式下的瀏覽器支持很多標(biāo)準(zhǔn)的特性，但是沒有標(biāo)準(zhǔn)規(guī)定得那么嚴(yán)格。主要區(qū)別在于如何對(duì)待圖片元素周圍的空白（在表格中使用圖片時(shí)最明顯）。

混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關(guān)。這種約定并不合理，因?yàn)榛祀s模式在不同瀏覽器中的差異非常大，不使用黑科技基本上就沒有瀏覽器一致性可言。標(biāo)準(zhǔn)模式通過(guò)下列幾種文檔類型聲明開啟：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

準(zhǔn)標(biāo)準(zhǔn)模式通過(guò)過(guò)渡性文檔類型（Transitional）和框架集文檔類型（Frameset）來(lái)觸發(fā)：

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

準(zhǔn)標(biāo)準(zhǔn)模式與標(biāo)準(zhǔn)模式非常接近，很少需要區(qū)分。人們?cè)谡f(shuō)到“標(biāo)準(zhǔn)模式”時(shí)，可能指其中任何一個(gè)。而對(duì)文檔模式的檢測(cè)（本書后面會(huì)討論）也不會(huì)區(qū)分它們。本書后面所說(shuō)的標(biāo)準(zhǔn)模式，指的就是除混雜模式以外的模式。

<noscript>元素

針對(duì)早期瀏覽器不支持 JavaScript 的問題，需要一個(gè)頁(yè)面優(yōu)雅降級(jí)的處理方案。最終，<noscript>元素出現(xiàn)，被用于給不支持 JavaScript 的瀏覽器提供替代內(nèi)容。雖然如今的瀏覽器已經(jīng) 100%支持JavaScript，但對(duì)于禁用 JavaScript 的瀏覽器來(lái)說(shuō)，這個(gè)元素仍然有它的用處。<noscript>元素可以包含任何可以出現(xiàn)在<body>中的 HTML 元素，<script>除外。在下列兩種情況下，瀏覽器將顯示包含在<noscript>中的內(nèi)容：

? 瀏覽器不支持腳本；

? 瀏覽器對(duì)腳本的支持被關(guān)閉。任何一個(gè)條件被滿足，包含在<noscript>中的內(nèi)容就會(huì)被渲染。否則，瀏覽器不會(huì)渲染<noscript>中的內(nèi)容。

下面是一個(gè)例子：

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

這個(gè)例子是在腳本不可用時(shí)讓瀏覽器顯示一段話。如果瀏覽器支持腳本，則用戶永遠(yuǎn)不會(huì)看到它。

小結(jié)

JavaScript 是通過(guò)<script>元素插入到 HTML 頁(yè)面中的。這個(gè)元素可用于把 JavaScript 代碼嵌入到HTML 頁(yè)面中，跟其他標(biāo)記混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重點(diǎn)可以總結(jié)如下。

? 要包含外部 JavaScript 文件，必須將 src 屬性設(shè)置為要包含文件的 URL。文件可以跟網(wǎng)頁(yè)在同一臺(tái)服務(wù)器上，也可以位于完全不同的域。

? 所有<script>元素會(huì)依照它們?cè)诰W(wǎng)頁(yè)中出現(xiàn)的次序被解釋。在不使用 defer 和 async 屬性的情況下，包含在<script>元素中的代碼必須嚴(yán)格按次序解釋。

? 對(duì)不推遲執(zhí)行的腳本，瀏覽器必須解釋完位于<script>元素中的代碼，然后才能繼續(xù)渲染頁(yè)面的剩余部分。為此，通常應(yīng)該把<script>元素放到頁(yè)面末尾，介于主內(nèi)容之后及</body>標(biāo)簽之前。

? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執(zhí)行。推遲的腳本原則上按照它們被列出的次序執(zhí)行。

? 可以使用 async 屬性表示腳本不需要等待其他腳本，同時(shí)也不阻塞文檔渲染，即異步加載。異步腳本不能保證按照它們?cè)陧?yè)面中出現(xiàn)的次序執(zhí)行。

? 通過(guò)使用<noscript>元素，可以指定在瀏覽器不支持腳本時(shí)顯示的內(nèi)容。如果瀏覽器支持并啟用腳本，則<noscript>元素中的任何內(nèi)容都不會(huì)被渲染。

在線咨詢

上一篇：網(wǎng)頁(yè)顯示不全的的方法教程
下一篇：如何在瀏覽器賬中查看網(wǎng)頁(yè)的HTML源代碼？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

分享8個(gè)經(jīng)典的HTML5 3D動(dòng)畫賞析特效源碼

<script>元素

標(biāo)簽位置

推遲使用腳本

異步執(zhí)行腳本

動(dòng)態(tài)加載腳本

XHTML中的變化

廢棄的語(yǔ)法

行內(nèi)代碼與外部文件

文檔模式

<noscript>元素

小結(jié)

您的項(xiàng)目需求