我的前端学习笔记14——js基础

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

  • css放在 <head> 标签里,js放在 <body> 标签最后面。
  • 原因:
  1. css放在前面是因为浏览器在加载过程中,会现根据html生成DOM树,然后再加上css形成渲染树,如果css过大还被 放在了后面,会导致出现闪屏、白屏的现象。
  2. js本身的特性是加载时会阻塞后面文件的加载,因此不放在后面会导致后面文件加载速度慢,而且js重复加载的现象,页面整体加载慢,用户体验差。

2,解释白屏和FOUC。

  • 白屏和fouc并不是bug,而是不同浏览器加载和显示机制不同造成的。
  • 白屏: 即网页空白, 不显示任何内容
    当CSS放置在代码的最后面, 如果浏览器是等待CSS加载完成之后对HTML元素进行渲染和展示, 在新窗口打开或刷新页面时, 可能因为未加载完成而出现白屏, 使用@import导入CSS和把JS放在顶部也可能导致白屏。
  • FOUC: (Flash of Unstyled Content) 无样式内容闪烁
    当CSS放置在代码的最后面, 如果浏览器是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改, 在新窗口打开或刷新页面时, 可能会逐步加载无样式内容, 然后再CSS加载完成后突然展现样式。

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

  • 当浏览器碰到 script 脚本的时候:
  1. <script src="script.js"></script>
    没有 deferasync,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  2. <script async src="script.js"></script>
    async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

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

  • 从实用角度来说呢,首先把所有脚本都丢到 </body>之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析

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

  • deferasync 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  • 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  • 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  • async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  • 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

4,简述网页的渲染机制。

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上

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

  • 简单数据类型:
  1. number数据类型 —— var num=123;
  2. string(字符串)数据类型 —— var str=“abcd”;
  3. boolean数据类型 —— var bool=ture;
  4. 浮点数数据类型——var float=.89;
  • 特殊数据类型:
  1. 未定义undefined —— var a;
  2. 空 null —— var a=null
  • 复杂数据类型:
  1. object —— var obj={“name”:“小明”,“age”:“14”};

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

  • NaN是一个特殊数字,表示非数(not alike Number)例如Number (“123a”) 得到的即为NaN;NaN 不等于自己。这里注意,他是数字。
  • undefined表示"缺少值"——表明此处应该有一个值,但是没有定义。例如 var a;
  • null表示"没有对象"——即该处不应该有值。

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

  • instanceof 和typeof都能用来判断一个变量是否为空或是什么类型的变量。

  • typeof 用以获取一个变量的类型,typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined。
    我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!=“undefined”){},而不要去使用 if(a)。因为如果 a 不存在(未声明)则会出错,对于 Array,Null 等特殊对象使用 typeof 一律返回 object。
    这正是 typeof 的局限性。如果我们希望获取一个对象是否是数组,或判断某个变量是否是某个对象的实例则要选择使用instanceof。

  • instanceof 用于判断一个变量是否某个对象的实例,如 var a=new Array();alert(a instanceof Array);会返回 true,
    同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如:

    function test(){};
    var a=new test();
    alert(a instanceof test) 
    
    会返回 true。
    

谈到instanceof 我们要多插入一个问题,就是 function 的 arguments,我们大家也许都认为 arguments 是一个 Array,但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象,尽管看起来很像。


  • typeof 返回一个值的数据类型:
  • 数值、字符串、布尔值分别返回number、string、boolean
  • 函数返回function
  • undefined返回undefined
  • 除此以外,其他情况都返回object
  • instanceof 测试它左边的对象是否是它右边的类的实例,返回布尔型数据, a.instanceof(b);就是判断a是否是b的一个实例
  • typeof对数组(array)和对象(object)的显示结果都是object, 无法进行区分, instanceof可以帮助区分


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

推荐阅读更多精彩内容

  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,638评论 0 6
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,496评论 0 106
  • 概念 1、CSS和JS在网页上的放置顺序是怎样的? 将CSS放在head标签中:CSS放在后面会造成白屏或者FOU...
    周花花啊阅读 431评论 1 1
  • 目录 1、谈谈你对Ajax的理解?(概念、特点、作用) 2、说说你对延迟对象deferred的理解? 3、什么是跨...
    w_zhuan阅读 985评论 1 28
  • 重构已经完成并发布,在原项目地址,有空之后再写新版本的说明 之前曾经写过一个爬取人人贷交易数据的爬虫,主要用到了u...
    科斯莫耗子阅读 1,614评论 0 2