初识JavaScript

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

浏览器对于HTML的解析是自上而下逐行解析的,JS下载时会阻塞下面内容的下载,所以我们一般使用 link 标签将css文件链接放在head内,并将JS文件链接放在body底部,需要注意到的是,由于ji的执行机制,js的依赖要放在js文件的前面,比如如果页面内要用到jquery,那么jQuery.js这个依赖文件就要放在js文件的前面。

2、解释白屏和FOUC

白屏现象:浏览器在解析HTML时遇到JS就会立即下载,会停止下面的html以及css的下载,所以当我们把JS文件放在HTML的head里面时,浏览器在下载JS文件间的间隙时,会阻止其他内容的下载,此时浏览器出现白屏现象。
FOUC现象:首屏闪烁现象,主要是因为浏览器的渲染方式的不同,打个比方男孩子开车接女孩子去参加舞会,当男孩子到达女孩家门口后,女孩还没化好妆,此时女孩有两中选择,一是等化好妆再走,二是先上车边走边化妆,这就对应着chrome 以及火狐浏览器的渲染方式,chrome是等CSS下载完成之后在渲染,火狐则是边下载边渲染,下载完成之后可能会对页面整体进行重绘,这就是首屏闪烁,FOUC。

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

作用:加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
区别:defer:脚本延迟到文档解析和显示后执行,有顺序;async:不保证顺序

4、简述网页的渲染机制

简单页面渲染分几个步骤(chrome);
a)解析 HTML 标签, 构建 DOM 树
b)解析 CSS 标签, 构建 CSSOM 树
c)把 DOM 和 CSSOM 组合成 渲染树 (render tree)
d)在渲染树的基础上进行布局, 计算每个节点的几何结构
e)把每个节点绘制到屏幕上 (painting)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 网页一般由三个部分构成,HTML ,CSS,JAVASCRIPT。其中HTML负责网页的整体结构,CSS负责网页的...
    尾巴尾巴尾巴阅读 1,235评论 0 0
  • 浏览器是如何渲染网页的? 这个时候我们就涉及到了CSS的放置方式的问题,因为CSS的放置前后顺序会引起白屏和FOU...
    petertou阅读 1,722评论 0 0
  • JavaScript的发展历史 JavaScript因为互联网而生,紧随着浏览器的出现而问世。1994年12月,N...
    饥人谷_深色晨雾阅读 2,656评论 0 0
  • 简单介绍 JavaScript的发展历史 1990年底,欧洲核能研究组织(CERN)科学家Tim Berners-...
    飘飘流浪者阅读 1,670评论 0 0
  • 亲子日记第18天,共计168天。今晚给大宝检查数学作业,发现上一次检查的作业有两处错误,大宝已经改正了。仔细一看第...
    馨宝贝之快乐每一天阅读 1,085评论 0 0