JS基础问题

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

一般我们把CSS放在head头部标签中,把JS代码放在body代码的尾部。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS基础</title>
  <style>
    
    /* 这里放css代码 */      
    
  </style>
</head>
<body>

  <!-- 这里放HTML代码 -->
    
  <script>
    
   <!--  这里放JS代码 -->
       
  </script>
</body>
</html>

解释白屏和FOUC

  • 白屏 :如果把CSS样式放在底部,在某些场景下(新窗口打开、刷新等)页面会出现白屏,而不是内容逐步展现,如果使用@import标签,即时CSS放入link,并且放在头部,也可能出现白屏现象。

  • 脚步会阻塞后面内容的展现

  • 脚本会阻塞其后组建的下载
    对于图片和CSS,在加载时会并发加载(如一个域名下同时加载两个文件),但在加载JS时,会禁用并发,并且阻止其它内容的下载,所以把JS放到页面的顶部也会出现白屏的现象。

  • FOUC(Flash of Unstyled Content)无样式内容闪烁 :如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),就会出现FOUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式),对于Firefox会一直出现FOUC现象。


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

没有async和defer,在浏览器加载中会立即加载执行当前的脚本,并阻塞浏览器渲染script标签之下的文档元素,而有了async和defer可以使浏览器加载渲染后续文档的过程和JS脚本的加载与执行并行进行,也就是加载异步。

两者的区别:主要是脚本下载完成之后何时执行,defer会按照加载顺序脚本延迟到文档解析显示后执行,而async不管你声明的顺序如何,只要他加载完了就会立刻执行,并不会按照顺序。
一般来说defer更符合我们的使用场景。


网页的渲染机制

  1. 解析 HTML 标签, 构建 DOM 树
  2. 解析 CSS 标签, 构建 CSSOM 树
  3. 根据 DOM 和 CSSOM 组合成 渲染树 (render tree)进行基础布局
  4. 计算每个节点的几何结构
  5. 把每个节点绘制到屏幕上 呈现给用户

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

  1. Null :是空指针
  2. Underfined :有指针但未指向任何空间
  3. Boolean :布尔值,真假(true,false)
  4. Number :数字类型。
  5. String :字符串类型,单引号或双引号表示。
  6. Object :对象,JS核心概念,最重要的数据类型。(一切皆为对象)

前5种为简单类型,Object为复杂类型。


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

  • NaN:含义是Not a number,表示非数字,与任何值都不相等,包括他自己,(一种不等于任何值的数字类型)

  • underfined:是Underfined唯一的值,表示变量只是被声明,但是没有初始化,代表有这个指针,但是此指针没有指向任何空间

  • null:Null唯一的值,表示空指针,也就是不存在的东西

typeof和instanceof的作用和区别?

  • typeof的作用,可以判断返回一个值的数据类型,放在运算数的前面,运算数可以是任何类型。
function a(){}
a(){}
typeof a
"function"      //运算数为函数返回function
typeof 123421
"number"
typeof "32423423423"
"string"
typeof true
"boolean" 
typeof undefined
"undefined"  //利用这一点检查未定义变量
typeof window
"object"         //其他全部返回object
  • instanceof 用于判断一个变量是否某个对象的实例,因为typeof遇到null,数组,对象时都会返回object类型,所以当我们要判断一个对象是否是数组时,或者判断某个变量是否是某个对象的实例则要选择使用instanceof

代码问题

1.如下代码判断一个变量是否是数字、字符串、布尔、函数

function isNumber(el){ 
 if ((typeof el)==="Number"){
   return true;
   }  else { 
return false
  };
}

function isString(el){ 
  if ((typeof el)==="String"){
   return true;
   }  else { 
return false
  };
}

function isBoolean(el){
 if ((typeof el)==="Boolean"){
   return true;
   }  else { 
return false
  };
}

function isFunction(el){
  if ((typeof el)==="Function"){
   return true;
   }  else { 
return false
  };
}

var a = 2, 
b = "jirengu", 
c = false;alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true

2.以下代码的输出结果是?


我是图

3.以下代码的输出结果是?

var a = 1;
a+++a;
typeof a+2;

结果为number2,(typeof优先级相当高,所以优先计算typeof a结果为number,带上2所以为number2)


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

var arr = [3,4,5]
// todo..
// 输出 9, 16, 25 

代码如下:


我是图

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

var obj = { name: 'hunger', sex: 'male', age: 28}
//todo ...
// 输出 name: hunger, sex: male, age:28

代码如图:(此处有参考)


我是图

6.下面代码的输出是? 为什么

console.log(a);
var a = 1;
console.log(a);
console.log(b);

第一个console.log(a);输出为underfined,因为JS会全局变量提升,a只有声明没有赋值。
第二个console.log(a);输出为1,因为它在var a =1;之后,1赋值到a身上。
第三个console.log(b);输出会报错,因为b未声明未赋值。


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

推荐阅读更多精彩内容

  • 概念 1、CSS和JS在网页上的放置顺序是怎样的? 将CSS放在head标签中:CSS放在后面会造成白屏或者FOU...
    周花花啊阅读 436评论 1 1
  • JavaScript基本概念、基础数据类型、运算符、流程控制语句。 一、CSS和JS在网页中的放置顺序是怎样的? ...
    婷楼沐熙阅读 434评论 0 2
  • 1.CSS和JS在网页中的放置顺序是怎样的?为什么会出现白屏和FOUC? 在写HTML代码时,我们都是将CSS文件...
    26d608950683阅读 632评论 0 0
  • 虽然已经和你说过你好了,可是还是很想对你说你好,我已经很久没有认识过陌生人了。昨天就看到了任务,可也没想好写什么,...
    皮安公子阅读 151评论 0 0
  • title: Android 软件打包date: 2016-04-09 12:18:12tags: 软件打包cat...
    Passon_Fang阅读 1,227评论 0 4