JS相关概念

1、CSS和JS在网页中的放置顺序是怎样的?

(1)CSS

对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面,将内容呈现在页面上。

对于Firefox,head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致,这些link标签全部加载完成之前,页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示,会出现FOUC无样式内容闪烁。

对于IE/Edge。未加载完成的<link rel="stylesheet">标签只阻塞其后面的HTML内容显示,而对其前面的HTML内容则不阻塞,所以如果将CSS放在前面head里则和Chrome一样,如果放body里则会出现FOUC无样式内容闪烁。

综上:如果你想让页面不闪烁放在head里,如果你想让页面不白屏放在body里。

(2)JS

如果JS文件很小放在前面head里或后边body闭合标签之前都可以。如果JS文件很大则应该放在后面body的闭合标签之前。

因为在加载 JavaScript时会阻止其他内容的下载,要等到JS文件下载解析完之后才会显示网页内容。若JS文件很大放在前面就会导致加载时间较长,网页会一直白屏。还有一个原因是因为JS一般会涉及到一些DOM操作,所以要等全部的dom元素都加载完再加载JS。

2.为何出现白屏问题与FOUC无样式内容闪烁?

不同的浏览器对于CSS和HTML的处理方式不同,有的是等待CSS加载完成之后,对HTML元素进行渲染和展示(白屏问题)。有的是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改(FOUC无样式内容闪烁)

Firefox、Opere在加载样式表的时候是边加载边渲染。这样既有利也有弊:利在使得页面可以尽快的开始渲染,而无须等待全部的样式表都加载下来之后再开始渲染;而弊端在于之前加载并渲染的样式在后面又重新定义或者修改了布局样式,那么将会造成一定程度上的闪烁(FOUC, 即, Flash of Unstyled Content,无样式内容闪烁),闪烁的程度主要看所 影响的元素的范围和数目。

而IE、Chrome、Safari则是在全部的样式表完全加载下来之后才开始渲染页面样式将内容呈现在页面上,没下载完之前页面是空白的。这样做也同样是有利有弊:利在于可以避免 Firefox、Opera中出现的闪烁的问题(虽然在IE下闪烁是经常的事情),可以确保样式会统一解析并渲染页面;而弊端在于页面全部样式表的加载延迟了页面渲染的时间,如果样式表加载的时间较长,或者加载错误,将会导致页面一直处于空白状态或者无样式状态。

导致白屏的原因:

  1. 样式文件放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏
  2. 使用 @import 标签, 即使 CSS 放入 link, 并且放在头部,也可能出现白屏
  3. 把 JavaScript 放入页面顶部也会导致白屏现象,在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载
导致FOUC的原因 :
  • 把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC 。

总结:白屏问题与FOUC无样式内容闪烁只能二选一,不可避免。

3、async和defer的作用是什么?有什么区别

1.<script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是会打断后面HTML的解析,只有等该脚本执行完成后,浏览器才继续解析后面的HTML文档元素。

2.<script defer src="myscript.js"></script>

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

3.<script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

然后从实用角度来说呢,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

下图可以非常好的表示这个过程的差别,其中:蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

Paste_Image.png

上图告诉我们以下几个要点:

  1. defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的。defer表示脚本可以延迟到文档完全被解析和显示之后在执行。defer和async都是只对外部js脚本有效,对嵌入脚本无效。
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。async表示应该立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics.

4.简述网页的渲染机制

(1) 解析 HTML 标签, 构建 DOM 树

(2) 解析 CSS 标签, 构建 CSSOM 树

(3) 把 DOM 和 CSSOM 组合成 渲染树 (render tree)

(4) 在渲染树的基础上进行布局, 计算每个节点的几何结构

(5)把每个节点绘制到屏幕上 (painting)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • XSS漏洞

    小胖
  • AMD、CMD、RequireJS

    小胖
  • jQuery动画与ajax

    小胖
  • Javascript文件加载 ——LABjs和RequireJS

    <script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。

    javascript.shop
  • 重学数据结构(三、队列)

    和上一篇的栈相反,队列(queue)是一种先进先出(First In First Out, FIFO)的线性表。

    三分恶
  • Javascript文件加载:LABjs和RequireJS

    传统上,加载Javascript文件都是使用<script>标签。 就像下面这样:   <script type="text/javascript" src=...

    ruanyf
  • 织梦广告管理功能增加图片上传

    华创信息技术
  • WebView性能、体验分析与优化

    在App开发中,内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便...

    美团技术团队
  • np.random.normal()正态分布

    numpy.random.normal(loc=0.0, scale=1.0, size=None)

    于小勇
  • VueJS + Webpack 代码分割的三种方式

    对单页应用实行代码分割,是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码,能够更快的看到页面并进行交互,这将会提升用户体验(特别是在...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券