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 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

一个快速方便的图形化 Python 调试器 —— birdseye | Github 项目推荐

Birdseye 是一个简单快速的 Python 调试器,它可以在函数的调用中记录表达式的值,并且在退出函数后轻松查看。例如: ? 它不是通过逐行浏览来查看表达...

3306
来自专栏Python自动化测试

自动化测试中对Alert, 多窗口,下拉框的处理

selenium的API提供了对alert弹出框的处理方式,可以对alert弹出框来进行处理的,如弹出框,我们获取弹出框的Text,或者接受弹出框,或者...

894
来自专栏Python

python flask里 post请求,JSON数据获取方式总结

#!flask/bin/python #encodig=utf-8 # _*_ coding:utf-8 _*_ # Writer : byz # dateTi...

4395
来自专栏贾老师の博客

一些实用技巧与备忘

1013
来自专栏知晓程序

开发 | 如何在微信小程序的页面间传递数据?

我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法。

832
来自专栏技术博客

ExtJs二(实现登录)

  在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次...

861
来自专栏程序员八阿哥

Python从入门到摔门(4):Python中 sys.argv[]的用法简明解释

sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键,所以那些试图从代码来说明它作用的解释一直没看明白。因为我们从外部取得的参数可以是...

622
来自专栏云端漫步

vim 使用教程

定义映射模式时,我们可以使用nmap、imap、vmap来定义映射仅在normal、insert、visual模式有效

1934
来自专栏IMWeb前端团队

让fetch也可以timeout

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原生的HTML5 API fetch并不支持timeout属性...

2035
来自专栏ascii0x03的安全笔记

【C++】小心使用文件读写模式:回车('\r') 换行('\n')问题的一次纠结经历

原来没有仔细注意C++读写文件的二进制模式和文本模式,这次吃了大亏。(平台:windows  VS2012) BUG出现: 写了一个程序A,生成一个文本文件F保...

2957

扫码关注云+社区