#hello榛瓮，JS：11JS腳本異步加載

前言：

在梳理知識點(diǎn)的時(shí)候铺董，發(fā)現(xiàn)作為瀏覽器渲染中的機(jī)制之一——異步加載機(jī)制，當(dāng)用戶訪問站點(diǎn)，需要下載各種資源精续，例如JS腳本坝锰，CSS，圖片重付，iframe等顷级，它是實(shí)現(xiàn)現(xiàn)代網(wǎng)站進(jìn)行加載頁面時(shí)一種必不可少的手段。查資料加上老師拓展課程均對于異步加載機(jī)制還有很多方法可以說确垫，故抽出來單獨(dú)進(jìn)行一個(gè)知識點(diǎn)的梳理弓颈。

了解js腳本異步加載前，我們有必要先了解一下瀏覽器在頁面樣式和js的作用下出現(xiàn)的兩種頁面常見場景：白屏和fouc（無樣式內(nèi)容閃爍）删掀。

一翔冀、白屏和FOUC

1、即指影響瀏覽器頁面加載順序的兩種場景

-白屏：特指一種場景披泪，打開頁面是一片白色纤子，突然頁面出現(xiàn)，樣式正確款票。那么一片白色的時(shí)間控硼，則稱之為白屏。
-FOUC (Flash of UnstyledContent)：無樣式內(nèi)容閃爍艾少，網(wǎng)速情況差卡乾，打開頁面時(shí)仍有樣式，之后樣式時(shí)有時(shí)無缚够，甚至一開始并無出現(xiàn)樣式幔妨，突然樣式恢復(fù)。（常出現(xiàn)在firefox瀏覽器）

此類現(xiàn)象潮瓶，在不同瀏覽器進(jìn)行的資源加載和頁面渲染時(shí)陶冷，所采用的不同的處理方式，并不是bug毯辅。

2埂伦、寫一個(gè)server，驗(yàn)證白屏和fouc效果

在樣式文件index.html中

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fouc & 白屏</title>

 <!--在下面模擬一個(gè)延時(shí)裝置-->  
     <link rel="stylesheet" href="b.css?t=10"> //設(shè)置這個(gè)工具思恐，當(dāng)請求該文件時(shí)沾谜，服務(wù)器會延遲請求10s再去加載這個(gè)資源，以此可以模擬一個(gè)網(wǎng)速特別慢的情況
     <link rel="stylesheet" href="a.css?t=3"> 
  
</head>
<body>

  <p>hello</p>
  
  <p>饑人谷</p>
<!--   <script src="A.js?t=5"></script> 
  -->
  <img src="https://user-gold-cdn.xitu.io/2018/8/15/1653c442f35af77c?w=211&h=200&f=png&s=8004" alt="">

<!--   <link rel="stylesheet" href="c.css?t=6">  -->
 
<!--   <script src="http://a.jrg.com:8080/B.js?t=4" ></script>  
  <script src="http://b.jrg.com:8080/A.js?t=8" ></script>   -->
  
</body>
</html>

（1）關(guān)于白屏胀莹，需要注意的是基跑，瀏覽器對于樣式和js的處理，即CSS 和 JS 放置順序描焰。推薦：將樣式放在<head>里面,將JS放在<body>內(nèi)部下方媳否。

如上面代碼所示栅螟，html頁面里引入了兩個(gè)css：a.css和b.css。b.css引用了c.ss（@import"./c.css?t=5";）b.css中加入了一個(gè)10s的延時(shí)文件（<link rel="stylesheet"href="b.css?t=10">）篱竭，加載這個(gè)10s的css樣式文件力图，瀏覽器是如何完成加載工作，有兩種方式：

第1種： html解析完成掺逼，此時(shí)10s延時(shí)的css文件先不管吃媒，先展示<body>里所展示的內(nèi)容，等css文件全加載后再去計(jì)算樣式吕喘，再去重新渲染一次

第2種： 即使html的dom樹已經(jīng)解析赘那、渲染都完成，對未加載完成的樣式都必須等待氯质，即css樣式要全部加載募舟、獲取，img資源加載完成病梢，此時(shí)底部JS立刻執(zhí)行胃珍，才一次性展示出頁面梁肿。例子中展示這種方法蜓陌，即為白屏很久的原因。

（2）不同瀏覽器的不同處理機(jī)制所出現(xiàn)的場景不同

A吩蔑、白屏場景（常出現(xiàn)在chrome）： 打開一個(gè)國外網(wǎng)站钮热，使用國外服務(wù)器，嵌在css的字體使用的是谷歌字體烛芬，運(yùn)行特別慢隧期，等了好久突然出現(xiàn)頁面樣式效果。這是因?yàn)轫撁嫘枰却齝ss樣式加載所有完成赘娄，甚至出現(xiàn)404加載失敗仆潮，最后才展示出頁面。那么那段加載時(shí)間遣臼，等待了幾秒左右的白色一片的頁面性置，就是白屏

B、Fouc場景（常出現(xiàn)在Firefox）： 一開始的時(shí)候揍堰，先讓你看見樣式鹏浅，如字的小號樣式，樣式加載完后看到所規(guī)定字號的大字屏歹。對用戶來說隐砸，同樣的樣式，突然從小變大蝙眶，則這個(gè)場景就是Fouc（無樣式內(nèi)容閃爍）季希。

總結(jié)： 不管是css樣式，還是js文件，只要加長延時(shí)式塌，都會造成白屏

（3）CSS 和 JS 最佳放置順序

使用 link 標(biāo)簽將樣式表放在頂部
將JS放在底部

（3.1）場景：假設(shè)JS文件頁面頂部：

JS腳本會阻塞后面內(nèi)容的呈現(xiàn)
JS腳本會阻塞其后組件（如圖片）的下載
JS加載時(shí)間過長武通，css需等待，則會出現(xiàn)一段時(shí)間白屏

場景說明： 引入一個(gè)JS文件在頂部珊搀，設(shè)置一個(gè)延時(shí)時(shí)間冶忱。

加載順序： css—js—img—全部獲取到展現(xiàn)頁面效果

此時(shí)，img和css加載時(shí)會并發(fā)加載境析，即如一個(gè)域名下同時(shí)加載兩個(gè)文件（并發(fā)是有限度的）囚枪，加載在頂部的js時(shí)，會禁用并發(fā)img和css劳淆，并阻止其他內(nèi)容下載和渲染链沼。

js并不影響css加載，但是會影響css樣式的一個(gè)計(jì)算沛鸵。當(dāng)js加載時(shí)括勺，css已經(jīng)獲取到（不過此時(shí)頁面還是一片空白），直到j(luò)s獲取立即執(zhí)行后曲掰，圖片立刻出現(xiàn)疾捍，頁面才展示效果。所以js文件放入頁面頂部<head>里栏妖，也會導(dǎo)致白屏現(xiàn)象出現(xiàn)

（3.2）JS加載特點(diǎn)總結(jié)

A乱豆、優(yōu)先加載js文件，加載后js立刻去執(zhí)行吊趾，展示頁面（CSS樣式則是全部加載完宛裕，然后一次性展示出頁面）

注： css放前面，優(yōu)先加載论泛；若放后面揩尸，其他資源則會阻礙css加載，那么時(shí)機(jī)就太晚屁奏。

B岩榆、由于渲染線程和js腳本線程是互斥的，白屏是渲染進(jìn)程被阻塞的原因了袁，當(dāng)碰到script標(biāo)簽的時(shí)候掏缎，會先執(zhí)行js腳本惫东，然后再渲染。

（放頂部時(shí)）JS加載時(shí)機(jī)過晚導(dǎo)致一系列問題，腳本會阻塞后面內(nèi)容的呈現(xiàn)十绑、腳本會阻塞其后組件的下載（主要指img資源下載）野建、白屏等梳玫。
（放底部）則可以先讓其他先加載完成，JS立刻執(zhí)行的特點(diǎn)可以“掃尾”最后的頁面效果

C谊囚、JS腳本操作頁面上的html+css元素，（放頂部時(shí)）JS先執(zhí)行执赡，元素都未加載到（即不存在）镰踏，未出現(xiàn)在文檔流中【加載，這里指資源加載和資源是否出現(xiàn)在文檔流中】沙合，所以也不能操作相應(yīng)JS功能奠伪，此時(shí)后臺將會報(bào)錯(cuò)。

D首懈、（放頂部時(shí)）其他JS若作為一種框架語言绊率，則能提前形成一個(gè)初步的框架有效構(gòu)成頁面結(jié)構(gòu)。

二究履、JS腳本的異步加載

1滤否、一個(gè)問題？

即一個(gè)放在<head>的js文件最仑，如下：
<script src="script.js"></script>

原本放在頂部的這個(gè)js文件藐俺，會提前加載，如何使它在頂部仍然稍后加載呢泥彤？

2欲芹、解決方法： `async`和`defer`

（1）作用：
沒有 defer 或async，瀏覽器會立即加載并執(zhí)行指定的腳本全景，“立即”指的是在渲染該<script>標(biāo)簽之下的文檔元素之前耀石，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行爸黄。也就是說，使用defer或async后能夠改變這種加載揭鳞、執(zhí)行的時(shí)機(jī)炕贵。

常應(yīng)用在引用了廣告和統(tǒng)計(jì)的頁面中，不會影響野崇、堵塞称开，更不會影響到到頁面其他元素

（2）async
HTML5里為script標(biāo)簽里新增了async屬性，用于異步加載腳本：
不保證順序（獨(dú)立的個(gè)體）

<script async src="script.js"></script>
/*或*/
<script type="text/javascript" src="alert.js" async="async"></script>

瀏覽器解析到HTML里的該行script標(biāo)簽乓梨，發(fā)現(xiàn)指定為async鳖轰，會異步下載解析執(zhí)行腳本（即加載后續(xù)文檔元素的過程將和script.js的加載并行進(jìn)行）。

頁面的DOM結(jié)構(gòu)里假設(shè)<script>在img之前扶镀，如果你的瀏覽器支持async的話蕴侣，就會異步加載腳本。此時(shí)DOM里已經(jīng)有img了臭觉，所以腳本里能順利取到img的src并彈框昆雀。

（3）defer
<script>標(biāo)簽里可以設(shè)置defer辱志，表示延遲加載腳本：腳本先不執(zhí)行，延遲到文檔解析和顯示后執(zhí)行狞膘，有順序

<script defer src="script.js"></script>
/*或*/
<script type="text/javascript" src="alert.js" defer="defer"></script>

瀏覽器解析到HTML里該行<script>標(biāo)簽揩懒，發(fā)現(xiàn)指定為defer，會暫緩下載解析執(zhí)行腳本挽封，等到頁面文檔解析并加載執(zhí)行完畢后已球，才會加載該腳本（更精確地說，是在DOM樹構(gòu)建完成后辅愿，在DOMContentLoaded事件觸發(fā)前和悦，加載defer的腳本）。

頁面的DOM結(jié)構(gòu)里假設(shè)script在img圖片之前渠缕，如果你的瀏覽器支持defer的話鸽素，就會延遲到頁面加載完后才下載腳本。此時(shí)DOM里已經(jīng)有img元素了亦鳞，所以腳本里能順利取到img的src并彈框馍忽。

總結(jié)： JS實(shí)質(zhì)采用一種可以更自由地選擇加載時(shí)機(jī)和任何位置，讓處于頂部的js文件能夠像在底部時(shí)燕差，在頁面必要元素加載完成時(shí)進(jìn)行“異步”加載遭笋。

三、同步與異步

同步：等待結(jié)果
異步：不等待結(jié)果

注意徒探，異步常常伴隨回調(diào)一起出現(xiàn)瓦呼，但是異步不是回調(diào)，回調(diào)也不一定是異步测暗。

// 同步的 sleep
function sleep(seconds){
    var start = new Date()
    while(new Date() - start < seconds * 1000){
    }
    return
}
console.log(1)   
sleep(3)        //3秒內(nèi)要不斷重復(fù)做一些無意義的工作才能保證js運(yùn)行按順序
console.log('wake up')
console.log(2)

//執(zhí)行結(jié)果的順序是：打印1——停3s——醒來——打印2央串，但事實(shí)上js環(huán)境內(nèi)，停3s不可能不做事情

image

同步的 sleep
//異步的 sleep
function sleep(seconds, fn){
    setTimeout(fn, seconds * 1000)
}
console.log(1)
sleep(3, ()=> console.log('wake up'))
console.log(2)

異步的 sleep

畫一張同步&異步工作的示意圖：

image

可以看出碗啄，用了異步之后质和，JS 的空閑時(shí)間多了許多。

但是注意稚字，在 JS 空閑的這段時(shí)間饲宿，實(shí)際上是瀏覽器中的計(jì)時(shí)器在工作（很有可能是每過一段時(shí)間檢查是否時(shí)間到了，具體要看 Chrome 代碼）

四胆描、遇到異步實(shí)例

1瘫想、前端經(jīng)常遇到的異步：圖片加載是需要時(shí)間的

document.getElementsByTagNames('img')[0].width // 寬度為 0
console.log('done')

剛開始是直接獲取寬度

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <img src="https://user-gold-cdn.xitu.io/2018/8/17/16546d713fd568f0?w=1200&h=799&f=jpeg&s=121670" alt="">
</body>
</html>

var w = document.getElementsByTagNames('img')[0].width
console.log(w)

先畫一個(gè)示意圖：

image

由此可知，js在img網(wǎng)絡(luò)請求還沒執(zhí)行完的時(shí)候緊隨執(zhí)行昌讲，可知為異步

//先獲取網(wǎng)絡(luò)請求前img信息国夜，為空對象
var img = document.getElementsByTagName('img')[0]

img等待網(wǎng)絡(luò)請求完成后，獲取完整圖片信息后剧蚣，便會觸發(fā)一個(gè)onload事件：

//等待完成之后執(zhí)行的內(nèi)容：img如果加載成功支竹，就會觸發(fā)一個(gè)onload的事件旋廷，獲取它的寬度并打印出寬度
img.onload = function(){
     var w =img.width
     console.log(w)
}

?完整代碼：

var img = document.getElementsByTagName('img')[0]

//異步不等繼續(xù)執(zhí)行，異步回調(diào)函數(shù)：等待到網(wǎng)絡(luò)請求完成后觸發(fā)onload事件
img.onload = function(){
      var w =img.width
      console.log(w)
}
console.log(img.width)
/*或*/
document.getElementsByTagNames('img')[0].onload = function(){
    console.log(this.width) // 寬度不為 0
    console.log('real done')
}
console.log('done')

總結(jié)： 異步想拿到一個(gè)結(jié)果礼搁，常采用監(jiān)聽一個(gè)事件饶碘，然后告知（這個(gè)事件的完成時(shí)間不確定，不可預(yù)測）馒吴，那就可以掛一個(gè)函數(shù)在onload上扎运，等你請求完成，調(diào)用一下onload事件饮戳，此為回調(diào)函數(shù)豪治。

2、面試題中的異步

let liList = document.querySelectorAll('li')
for(var i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}
//獲取dom結(jié)構(gòu)的所有l(wèi)i元素扯罐，獲取li的長度去遍歷负拟，每一個(gè)點(diǎn)擊后都能打印出東西

把 var i 改成 let 就可以破解：https://zhuanlan.zhihu.com/p/28140450

先讓我運(yùn)行上面的js代碼：

image

這里，js代碼運(yùn)行歹河，還要注意一個(gè)技巧：變量提升掩浙，即

var i = 0

【關(guān)鍵點(diǎn)】變量提升為：

var i
i =0

那么，代碼如下：

let liList = document.querySelectorAll('li')
var i   //i是貫穿6次循環(huán)的一個(gè)變量（沒有多個(gè)）
for(i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

畫一個(gè)時(shí)序圖：

image

可以看出秸歧，js執(zhí)行代碼時(shí)厨姚，當(dāng)i=5，i++結(jié)果為6的時(shí)候键菱，并不小于liList.length谬墙，那么就跳出該循環(huán)，最后輸出結(jié)果：i=6经备。js代碼執(zhí)行完拭抬，用戶開始操作他的鼠標(biāo)，假設(shè)等待3ms后弄喘，執(zhí)行click li玖喘，當(dāng)你最先click的時(shí)候（i=0，liList[0]蘑志，此時(shí)js已經(jīng)執(zhí)行完代碼，輸出i = 6 ）贬派，而不是在綁定事件的時(shí)候打印出幾急但，就是幾。

在這里搞乏，我們有必要知道波桩，異步函數(shù)以下綁定事件為：

XXXX.onclick function(){
        console.log(i)
    }

瀏覽器并未等該異步執(zhí)行，直接進(jìn)入for循環(huán)请敦，直接將i=6輸出镐躲，然后第一個(gè)click才出現(xiàn)储玫，瀏覽器不會等click出現(xiàn)才去打印i 值
如何解決？——使用let

假設(shè)你已經(jīng)知道let（不懂看這篇文章）：
方應(yīng)杭：我用了兩個(gè)月的時(shí)間才理解let

將代碼var i改為let：

let liList = document.querySelectorAll('li')
for(let i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

運(yùn)行如下：

image

為何let能一一打印出結(jié)果呢萤皂？即let不會被提升到外面撒穷，let作用域即處于for循環(huán)函數(shù)里，即每一次循環(huán)裆熙，liList[i]都有一個(gè)新的 i 值端礼。let會在每一次進(jìn)入循環(huán)時(shí)，產(chǎn)生一個(gè)分身i1-i6.

畫一個(gè)運(yùn)行圖：【缺】

3入录、AJAX 中的異步（必須）

//同步的Ajax
let request = $.ajax({
  url: '.',   //1蛤奥、獲取當(dāng)前 url
  async: false
})//2、此時(shí)僚稿，該函數(shù)會等待請求完成才執(zhí)行下一步
console.log(request.responseText)//打印出這個(gè)請求的響應(yīng)文本凡桥，即當(dāng)前html頁面

//responseText:響應(yīng)文本

相當(dāng)于同步，js在該函數(shù)中什么都沒做蚀同，但就是停了幾十ms缅刽，如同一個(gè)呆滯的人白白浪費(fèi)了一段空閑時(shí)間。

而Ajax的異步如何做唤崭？——async:true

$.ajax({
    url: '.',
    async: true,
    success: function(responseText){
        console.log(responseText)
    }//表示：如果請求返回回來拷恨，麻煩調(diào)用以下success這個(gè)函數(shù)，然后把得出的結(jié)果打印出來
})
console.log('請求發(fā)送完畢')

在控制臺上谢肾，模擬一個(gè)網(wǎng)速很慢的操作：Network——slow 3G腕侄，如圖：

image

首先ajax函數(shù)會發(fā)一個(gè)請求，繼續(xù)執(zhí)行第二句console.log芦疏，這就是ajax中的異步冕杠。在這里，先不管ajax里的請求成功或失敗酸茴，直接執(zhí)行第二句代碼分预。不等，即為異步薪捍；而等則是一定要拿到結(jié)果才進(jìn)行下一步笼痹。時(shí)間不到，異步絕對拿不到結(jié)果酪穿。

畫一下圖：

image

如果我們把它改為同步：async:false凳干，并模擬一個(gè)很慢的網(wǎng)速：Network——add，參數(shù)設(shè)置如下：

image

同步之后被济，代碼運(yùn)行演示如下：

image

五救赐、異步的形式

從上面的例子中：可以通過綁定onload事件獲取寬度大小，或者ajax中的success函數(shù)只磷。一般经磅，有兩種方式拿到異步結(jié)果

1泌绣、傻逼方法：輪詢

2、正規(guī)方法：回調(diào)

回調(diào)的形式

Node.js 的 error-first 形式

fs.readFile('./1.txt', (error, content)=>{
    if(error){
         // 失敗
     }else{
         // 成功
     }
 })

-jQuery 的 success / error 形式

$.ajax({
     url:'/xxx',
     success:()=>{},
     error: ()=>{}
 })

-jQuery 的 done / fail / always 形式

$.ajax({
     url:'/xxx',
 }).done( ()=>{} ).fail( ()=>{} ).always( ()=> {})

Prosmise 的 then 形式

$.ajax({
     url:'/xxx',
 }).then( ()=>{}, ()=>{} ).then( ()=>{})

六预厌、如何處理異常阿迈？

如何使用多個(gè) success 函數(shù)？
在有多個(gè)成功回調(diào)的情況下配乓，如何處理異常仿滔？

自己返回 Promise

function ajax(){
    return new Promise((resolve, reject)=>{
        做事
        如果成功就調(diào)用 resolve
        如果失敗就調(diào)用 reject
    })
}

var promise = ajax()
promise.then(successFn, errorFn)

Promise 深入閱讀：
Promise/A+ 規(guī)范：

async / await

function buyFruit(){
    return new Promise((resolve, reject)=>{
        做事
        如果成功就調(diào)用 resolve
        如果失敗就調(diào)用 reject
    })
}
var promise = await ajax()

async functon fn(){
    var result = await buyFruit()
    return result
}
var r = await fn()
console.log(r)

最后編輯于：2018.08.21 09:31:51

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市犹芹，隨后出現(xiàn)的幾起案子崎页，更是在濱河造成了極大的恐慌，老刑警劉巖腰埂，帶你破解...
沈念sama閱讀 218,755評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件飒焦，死亡現(xiàn)場離奇詭異，居然都是意外死亡屿笼，警方通過查閱死者的電腦和手機(jī)牺荠，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,305評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來驴一，“玉大人休雌，你說我怎么就攤上這事「味希” “怎么了杈曲？”我有些...
開封第一講書人閱讀 165,138評論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長胸懈。經(jīng)常有香客問我担扑，道長，這世上最難降的妖魔是什么趣钱？我笑而不...
開封第一講書人閱讀 58,791評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任涌献，我火速辦了婚禮，結(jié)果婚禮上首有，老公的妹妹穿的比我還像新娘燕垃。我一直安慰自己，他們只是感情好井联，可當(dāng)我...
茶點(diǎn)故事閱讀 67,794評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布利术。她就那樣靜靜地躺著，像睡著了一般低矮。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上被冒，一...
開封第一講書人閱讀 51,631評論 1贊 305
城市分裂傳說
那天军掂，我揣著相機(jī)與錄音轮蜕，去河邊找鬼。笑死蝗锥，一個(gè)胖子當(dāng)著我的面吹牛跃洛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播终议，決...
沈念sama閱讀 40,362評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼汇竭，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了穴张？” 一聲冷哼從身側(cè)響起细燎，我...
開封第一講書人閱讀 39,264評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎皂甘，沒想到半個(gè)月后玻驻，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,724評論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡偿枕，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,900評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年璧瞬，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渐夸。...
茶點(diǎn)故事閱讀 40,040評論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡嗤锉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出墓塌，到底是詐尸還是另有隱情瘟忱，我是刑警寧澤，帶...
沈念sama閱讀 35,742評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布桃纯，位于F島的核電站酷誓，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏态坦。R本人自食惡果不足惜盐数，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,364評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望伞梯。院中可真熱鬧玫氢，春花似錦、人聲如沸谜诫。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,944評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽喻旷。三九已至生逸，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背槽袄。一陣腳步聲響...
開封第一講書人閱讀 33,060評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工烙无，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人遍尺。一個(gè)月前我還...
沈念sama閱讀 48,247評論 3贊 371
代替公主和親
正文我出身青樓截酷，卻偏偏與公主長得像，于是被迫代替她去往敵國和親乾戏。傳聞我的和親對象是個(gè)殘疾皇子迂苛，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,979評論 2贊 355

#hello，JS：11JS腳本異步加載

#hello榛瓮，JS：11JS腳本異步加載

前言：

一翔冀、白屏和FOUC

1、即指影響瀏覽器頁面加載順序的兩種場景

2埂伦、寫一個(gè)server，驗(yàn)證白屏和fouc效果

二究履、JS腳本的異步加載

1滤否、一個(gè)問題？

2欲芹、解決方法： `async`和`defer`

三、同步與異步

四胆描、遇到異步實(shí)例

1瘫想、前端經(jīng)常遇到的異步：圖片加載是需要時(shí)間的

2、面試題中的異步

3入录、AJAX 中的異步（必須）

五救赐、異步的形式

1泌绣、傻逼方法：輪詢

2、正規(guī)方法：回調(diào)

六预厌、如何處理異常阿迈？

推薦閱讀更多精彩內(nèi)容

#hello榛瓮，JS：11JS腳本異步加載

前言：

一翔冀、白屏和FOUC

1、即指影響瀏覽器頁面加載順序的兩種場景

2埂伦、寫一個(gè)server，驗(yàn)證白屏和fouc效果

二究履、JS腳本的異步加載

1滤否、一個(gè)問題？

2欲芹、解決方法： async和defer

三、同步與異步

四胆描、遇到異步實(shí)例

1瘫想、前端經(jīng)常遇到的異步：圖片加載是需要時(shí)間的

2、面試題中的異步

3入录、AJAX 中的異步（必須）

五救赐、異步的形式

1泌绣、傻逼方法：輪詢

2、正規(guī)方法：回調(diào)

六预厌、如何處理異常阿迈？

推薦閱讀更多精彩內(nèi)容

2欲芹、解決方法： `async`和`defer`