任务16 js语法-简答题

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

  • 一般而言,CSS放置在网页文档的头部,JS放置在网页文档的后面,CSS放在文档的头部,能够确保用户更早的看到页面,提高用户体验,但缺陷是若放置的CSS文件过多,过大,会延长屏幕的白屏时间,同时也有时引入插件,也需要把JS放在头部,如Jquery的引入,一般放在头部,因为后面的JS代码依赖于jquery.
  • 原因是由于浏览器的解析方式是自上而下的加载html文档,CSS是并行加载,而JS是阻塞加载,会影响页面的加载速度,如果JS的文件较大,很容易出现FOCU的现象,并且JS还有可能修改DOM,JS的执行可能依赖于最新的样式,这样需要保证在JS代码执行前必须所有的CSS样式加载和解析完毕。
  • 综上,CSS和JS的放置顺寻根本目的是为了提高页面的加载速度,所以必要的CSS和JS放置在头部,把不重要的CSS和js放在底部。
  • 一般放置方式,如图:
    ![1%B(5Q5]F1W42EZV(IS4H{O.png](http://upload-images.jianshu.io/upload_images/3361706-29f43a7a55b85de3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  • 引用jQuery等库时:


    KX~OD87Z)TTQT_7)FP`HN%T.png

2.解释白屏和FOUC

  • 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的
  • 白屏:如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。这是由于优先解析@import标签的文件,若文件过大,过大,就会导致加载时间过长,产生白屏。
  • FOUC:全称无样式闪烁,把样式放在页面底部,IE浏览器下点击点击链接会出现FOUC现象,Firfox会一直白屏。一种情况是由于将JS放在底部,会阻塞后面内容的呈现和其后组件的下载,产生FOUC现象;

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

  • 一般情况下JS文件没有async和defer,会立即加载文件并解析,不扥带后面的文件的加载,即读到就执行,有了async和defer可以实现异步加载, async加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步), defer加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成,最终目的提高页面的加载速度和流畅性。使用方式如下:<script async src="app.js></script>,<script defer src="app.js></script>
  • 二者的区别是,defer的JS文件延迟到文档解析和显示有先后顺序,async不保证顺序。

4.网页的渲染机制

  1. 解析 HTML 标签, 构建 DOM 树
  2. 解析 CSS 标签, 构建 CSSOM 树
  3. 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  4. 在渲染树的基础上进行布局, 计算每个节点的几何结构
  5. 把每个节点绘制到屏幕上 (painting)
  6. 渲染机制图:
    ![VA4BMG]D4O]@GLMI`K0W5.png](http://upload-images.jianshu.io/upload_images/3361706-f118a4320e6d5c10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

  • 数据类型有6种
  • 简单类型5种,null, undefined,boolean,string,number
  • 复杂类型1种,object
  • 简单类型中,undefined指的是变量未被赋值时,表示“未定义”或不存在,即此处目前没有任何值,会出现undefined,null是空值,不等同于undefined,空值表示空缺,即此处应该有一个值,但目前为空,而undefined只是没有赋值,不存在,所以二者不同
  • boolean,即布尔逻辑值,就是经常可见的false和true
  • number ,即数字,如1,2,3
  • string,字符串,如“hello world”
  • object,对象,如“ var obj={name:"小明",age:10}”

6.NaN、undefined、null分别代表什么?

  • NaN含义是Not a Number,表示非数字,NaN和任何值都不相等,包括自己,undefined:表示“未定义”或不存在,即此处目前没有任何值,null:表示空缺,即此处应该有一个值,但目前为空,
  • 类型不同,NaN是一中number类型,null属于特殊的object,undefinded属于undefined类型
  • 进行比较运算时,非严格相等情况下:undefined==null,NaN与任何值都不相等,与自己也不相等。

7.typeof和instanceof的作用和区别?

  • typeof 运算符可以返回一个值的数据类型,,可以是任意类型,如type 100 //"number"
  • instanceof运算符:此运算符可以判断一个变量是否是某个对象(类)的实例,返回值是布尔类型的,如var str=new String("hello");console.log(str instanceof String)代码输出的结果为true,因为str是对象String的对象实例。一般说来只有使用构造函数创建的对象才会返回true,否则返回false,不过数组是一个例外,都会返回true.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • 学习内容:JavaScript基本概念,基础数据类型,运算符,流程控制语句 一、CSS和JS在网页中的放置顺序是怎...
    鸿鹄飞天阅读 502评论 0 0
  • 问答: 1. CSS和JS在网页中的放置顺序是怎样的? CSS一般放置在的 标签中。网页渲染时,先解析HTML标签...
    小木子2016阅读 437评论 0 0
  • JavaScript基本概念、基础数据类型、运算符、流程控制语句。 一、CSS和JS在网页中的放置顺序是怎样的? ...
    婷楼沐熙阅读 439评论 0 2
  • 1. CSS和JS在网页中的放置顺序是怎样的? css放在head标签里 js放在body标签的最后主要是为了避免...
    mint9602阅读 350评论 0 0
  • 概念 1、CSS和JS在网页上的放置顺序是怎样的? 将CSS放在head标签中:CSS放在后面会造成白屏或者FOU...
    周花花啊阅读 441评论 1 1