html question.

2016-06-24 本文已影响52人 IAmWhoAmI

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之前执行。 . 浏览器差别只有相应的浏览器才会支持

相同点

区别

· 加载文件时不阻塞页面渲染
· 对于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>,sessionStorage and localStorage

先说结论，后面是我的实验部分。
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?

html question.

猜你喜欢

热点阅读