html question.

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>,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?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容