task16-JS语法

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

CSS以link方式放在头部,否则有可能出现白屏或者FOUC(无样式内容闪烁)。
JS放在底部,否则有可能会出现脚本阻塞后面内容的呈现或者阻塞其后组件的下载。

解释白屏和FOUC。

为何出现白屏和FOUC(无样式内容闪烁)
** 白屏 **
1、如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会等到html和css加载完成后再进行渲染,造成页面内容不会逐步展现;如果使用@import标签,即使CSS放入link,并且放在头部,也可能出现白屏;
2、如果把JS放在网页头部或者html中,在加载JavaScript时,会禁用并发,并且阻止其他内容的下载,出现白屏;


解析JS时出现白屏

** FOUC (Flash of Unstyled Content) 无样式内容闪烁 **
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
参考文章
浏览器渲染过程
浏览器是怎样工作的:渲染引擎,HTML解析(连载二)

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

在浏览器中如果没有特别声明,js文件会和html同步加载解析,在文件头部或者中间时运行JS有可能会出现白屏。
<script async src="script.js"></script>有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
<script defer src="myscript.js"></script>有 defer,加载后续文档元素的过程将和 script.js的加载并行进行(异步),但是 script.js的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。
** 区别 ** async虽然加载异步,但是执行没有顺序。defer 加载异步,但是执行在所有元素解析完成之后。所以一旦页面渲染依赖该script脚本,则不可用async,只能用defer。

简述网页的渲染机制

浏览器的通常渲染过程:

  1. 浏览器解析html源码,然后创建一个 DOM树。
  2. 浏览器解析CSS代码,计算出最终的样式数据,创建一个CSSOM树。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外链样式,内联样式,html中的style。
  3. 构建出DOM树,并且计算出样式数据后,下一步就是构建一个渲染树(rendering tree)。
  4. 一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上。

** DOM树和渲染树的区别 **

  • 每一个html标签对应一个DOM节点,每一个文本也会有一个文本节点,DOM树的根节点就是 documentElement,对应节点是html标签。
  • 渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

参考文章:浏览器渲染页面的过程,以及重绘和重排

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

JS定义了两大类数据类型
简单类型

  • Number (数字类型)
  • String(字符串类型)
  • Boolean(布尔类型)
  • Null
  • Undefined
    复杂类型
  • Object
    • Array(数组)
    • Function(函数)
    • object (狭义对象)

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

  • NaN not a number 非数字类型


    NaN
  • undefined 只声明未赋值,没有初始化


    undefined
  • null 空类型,指不存在的东西;空指针,未指向任何内容,可用于取消对象的引用。


    undefined和null

typeof和instanceof的作用和区别?

** typeof 运算符返回一个用来表示表达式的数据类型的 字符串 **。判断一个变量的类型常常会用 typeof 运算符,但无论引用的是什么类型的对象,它都返回 “object”。

typeof

关于typeof字符串

** instanceof **它是用来判断对象是否是某个类型的实例,它返回的是一个布尔值;是 JavaScript 语言中原生的用来判断实例继承关系的操作符。


instanceof常规用法

参考文章JavaScript instanceof 运算符深入剖析

代码题

1.代码一题

判断一个变量是否是数字、字符串、布尔、函数

2.代码二题

console.log(1+1); //2
console.log("2"+"4"); //"24"(字符串join)
console.log(2+"4"); //"24"(2转换成字符串然后join)
console.log(+new Date());//1467943817909(用new Date() 会转换为从1970.1.1开始的毫秒数)
console.log(+"4");//4

3.代码三题

var a = 1;//赋值
a+++a;//(a++)+a=1+2=3;a=2
typeof a+2;//number2(其中typeof 比+优先级高,+是连接符号,如果变成-等运算符号,就会输出NaN)
typeof 示例

4.遍历数组,把数组里的打印数组每一项的平方


遍历var arr = [3,4,5]输出每一项平方

5.遍历 JSON, 打印里面的值


遍历JSON并输出

6.下面代码的输出是? 为什么?
console.log(a);//undefined,变量声明提前,未赋值
var a = 1;
console.log(a);//1
console.log(b);//报错,不存在

** 本教程版权归博主和饥人谷所有,转载须说明来源。**

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,200评论 24 450
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,322评论 0 25
  • 17 星期六 2017年6月 我当然知道没有必要。毕竟我们有多久都没联系了,但是,还是很没有出息。 你不会理解一个...
    简安在这里阅读 584评论 0 0
  • 对于80后来说,很多人青春期接触的第一部日剧,就是《东京爱情故事》。美好的赤名莉香,爱得纯粹,爱得痴狂,属于她的爱...
    小绫阅读 859评论 0 1