10.the difference between
<script><script async><script defer>
我們常用的script標簽，有兩個和性能、js文件下載執行相關的屬性：defer和async
- defer的含義 摘自此處
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
翻譯：一個boolean類型的屬性，可用于標識該script代碼在網頁解析完成后被執行
一個情況舉例,<strong>案例1：</strong>
<pre>
一個頁面如果有N個外鏈的腳本，放在head中
=>當加載腳本時會阻塞頁面的渲染，也就是常說的空白。
=>在簡單的開發環境中，我們可能只要將源代碼中的外鏈腳本位置換一下就ok了。
</pre>
那么可以讓這個成本降到最低嗎？
<pre>
使用defer這個屬性。
如果一個script加了defer屬性，即使放在head里面，它也會在html頁面解析完畢之后再去執行，也就是類似于把這個script放在了頁面底部。
</pre>
- async的含義 摘自此處
Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.
翻譯：一個boolean類型的屬性，可用于標識該script代碼盡可能異步地運行。
在<strong>案例1</strong>情況下
<pre>
有async屬性的情況，和defer一樣，會等待的資源不會阻塞其余資源的加載，也不會影響頁面的加載。
但是有一點需要注意下，在有async的情況下，js一旦下載好了就會執行，
所以很有可能不是按照原本的順序來執行的。如果js前后有依賴性，用async，就很有可能出錯。
</pre>
這篇文章(還沒看，英文的)中總結了defer和async的相同點和區別。
| 相同點 | 區別 |
|---|---|
| · 加載文件時不阻塞頁面渲染 · 對于inline的script無效 · 使用這兩個屬性的腳本中不能調用document.write方法 · 有腳本的onload的事件回調 |
. html的版本:html4.0中定義了defer；html5.0中定義了async . 每一個async屬性的腳本都在它下載結束之后立刻執行，同時會在window的load事件之前執行。所以就有可能出現腳本執行順序被打亂的情況； 每一個defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執行，同時會在document的DOMContentLoaded之前執行。 . 瀏覽器差別 只有相應的瀏覽器才會支持 |
簡單的來說，使用這兩個屬性會有三種可能的情況
· 如果async為true，那么腳本在下載完成后異步執行。
· 如果async為false，defer為true，那么腳本會在頁面解析完畢之后執行。
· 如果async和defer都為false，那么腳本會在頁面解析中，停止頁面解析，立刻下載并且執行，
無論使用defer還是async屬性，都需要首先將頁面中的js文件進行整理，哪些文件之間有依賴性，哪些文件可以延遲加載等等，做好js代碼的合并和拆分，然后再根據頁面需要使用這兩個屬性。
參考來自:此處
9.Describe the difference between a <code>cookie</code>,
sessionStorageandlocalStorage
先說結論，后面是我的實驗部分。
localStorage 存活時間就算瀏覽器關了，都會存活。
cookie瀏覽器沒關，保持存活，但是有過期時間。在想服務器發送請求時，會被附帶。
sessionStorage頁面關了，就不存活了。
更具體的內容->該網頁上面的討論（更理論一點）。
感謝該網頁的指導（實踐性質的實驗）。
新建一個網頁
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
sessionStorage.setItem("sessionData", "I am set in session storage.");
localStorage.setItem("localData", "I am set in local storage.");
</script>
</head>
<body>
</body>
</html>
F12打開console
localStorage.localData
"I am set in local storage."
sessionStorage.sessionData
"I am set in session storage."
新打開了百度頁面以后,可以發現百度是沒有這個內容的：
于是新建了一個test-副本.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
</script>
</head>
<body>
</body>
</html>
查看console,說明sessionStorage只能存活在一個會話：
于是又把test-副本.html復制到c盤下面，結果相同。又打開了知乎，知乎的結果和百度的相同。所以推斷，localStorage是對二級域名而言的。
換個瀏覽器直接打開test-副本.html,可以看到沒有localData，所以localStorage是對瀏覽器而言的(額，這個應該不用試也知道，畢竟是存于本地的)
先使用瀏覽器打開test.html，然后把瀏覽器都關了，再打開test-副本.html,說明localStorage不隨瀏覽器的關閉而清楚:
how about Cookie?
添加了cookie進去
<script>
sessionStorage.setItem("sessionData", "I am set in session storage.");
localStorage.setItem("localData", "I am set in local storage.");
document.cookie = "Available on both client and server side";
</script>
但是頁面上并沒有顯示（我重復輸入多次，因為我不信啊！！過了好一會，想到，是不是因為我沒有服務器？）？
那么嘗試搭建一個有服務器的（cookie.html的代碼就是加了前面的script代碼的空網頁），果然有：
<!DOCTYPE html>
<html>
<head>
<script>
sessionStorage.setItem("sessionData", "I am set in session storage.");
localStorage.setItem("localData", "I am set in local storage.");
document.cookie = "Available on both client and server side";
</script>
</head>
<body></body>
</html>
先打開cookie.html,再打開cookie1.html,還是有：
我把所有的都關了，再打開cookie1.html還是有.
把瀏覽器關閉了，再打開另一個網頁cookie1.html(純空的網頁)，可以發現cookie沒了：
最后cookie在你發送請求的時候會被附帶上。
Consider the HTML5 a open web platform.What are the building blocks of HTML5?
