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."
新打开了百度页面以后,可以发现百度是没有这个内容的：
在百度的页面console下
于是新建了一个test-副本.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
</script>
</head>
<body>
</body>
</html>
查看console,说明sessionStorage只能存活在一个会话：
Paste_Image.png
于是又把test-副本.html复制到c盘下面，结果相同。又打开了知乎，知乎的结果和百度的相同。所以推断，localStorage是对二级域名而言的。
换个浏览器直接打开test-副本.html,可以看到没有localData，所以localStorage是对浏览器而言的(额，这个应该不用试也知道，毕竟是存于本地的)
Paste_Image.png
先使用浏览器打开test.html，然后把浏览器都关了，再打开test-副本.html,说明localStorage不随浏览器的关闭而清楚:
Paste_Image.png
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>
但是页面上并没有显示（我重复输入多次，因为我不信啊！！过了好一会，想到，是不是因为我没有服务器？）？
Paste_Image.png
那么尝试搭建一个有服务器的（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>
Paste_Image.png
先打开cookie.html,再打开cookie1.html,还是有：
Paste_Image.png
我把所有的都关了，再打开cookie1.html还是有.
把浏览器关闭了，再打开另一个网页cookie1.html(纯空的网页)，可以发现cookie没了：
Paste_Image.png
最后cookie在你发送请求的时候会被附带上。
Consider the HTML5 a open web platform.What are the building blocks of HTML5?
网友评论