第十六弹-JavaScript基本概念、基础数据类型、运算符、流

作者: 我是小韩 | 来源:发表于2016-06-14 14:24 被阅读0次

问答：

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

CSS一般放在 <head>标签内，为了避免白屏和FOUC
JS一般放在<body>标签的底部原因如下：
在网页渲染时如果遇到<javascript>标签时，网页会暂停渲染，等待脚本加载并执行完全后，再继续渲染。这就是阻塞效应，如果脚本过大就会影响到网页的渲染。
将脚本放在<body>标签的底部，这时网页的效果已经出来了，可以获得更好的用户体验。

//<javascript>标签放在<body>标签中部时，网页先会弹出alert，再出来<h2>标签
  <body>
    <h1>我是头标题</h1>
    <script type="text/javascript">
      alert(1);
    </script>
    <h2>我是副标题</h2>
  </body>

Paste_Image.png

  <body>
///而将<javascript>标签放在<body>标签底部时，网页效果已经出来了，不影响用户体验
    <h1>我是头标题</h1>
    <h2>我是副标题</h2>
    <script type="text/javascript">
      alert(1);
    </script>
  </body>

Paste_Image.png

2.async和defer的作用是什么？有什么区别

async和defer 都是为了解决javascript代码阻塞效应的
1.defer属性

写法

<script src="1.js" defer></script>
<script src="2.js" defer></script>

当遇到defer属性的<script>标签时，浏览器会继续向下解析Html,同时并行下载脚本。
等到页面加载完成在DOMContentLoaded事件触发前执行（即刚刚读取完</html>标签），而且可以保证执行顺序就是它们在页面上出现的顺序。
也就是说defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本（推迟执行）。
2.async属性

写法

<script src="1.js" async></script>
<script src="2.js" async></script>

async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。
但是需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。
defer和 async的区别：
async不能保证脚本的执行顺序，而defer可以保证。如果脚本之间的不存在依赖关系就使用 async属性，如果脚本间存在先后顺序的关系就使用defer。

3.简述网页的渲染机制

渲染引擎处理网页，通常分成四个阶段
1.解析代码：HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model）
2.对象合成：将DOM和CSSOM合成一棵渲染树（render tree）
3.布局：计算出渲染树的布局（layout）
4.绘制：将渲染树绘制到屏幕

4.解释白屏和FOUC

白屏
打开页面的时候会出现白屏，而不是显示内容，当CSS放在页面底部时，一些浏览器（比如IE的某些版本）会等待html和css加载完毕后才进行页面渲染，这样就造成页面内容不会逐步出现，而是白屏。
@import加载样式时即使放在link里也会造成白屏。
js是阻塞加载，放在头部时会阻塞加载，等js加载完成后再继续加载后续内容，这也会造成白屏。
FOUC
flash of unstyled content（无样式内容闪烁）
指的是加载网页时会出现短暂的CSS样式失效。
下面几种原因可能导致白屏或者FOUC
使用import方法导入样式表。
将样式表放在页面底部
多个样式表，放在了html结构的不同位置。
有些浏览器是解析一个标签就渲染一步，
如果把CSS放在底部,逐步加载无样式的内容, CSS在页面内容加载完后突然展现出现. 就会发生闪烁;
Firefox 是 FOUC的典型

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

.JavaScript定义了6中数据类型，
其中5中是简单类型
Null
Undefined
Boolean
Number
String()
还有一个是复杂类型
object（一组无序的键值对集合）

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

NaN (Not a Number) :代表非数字与任何数都不相等包括本身，我们可以利用这个特性来判断是不是NaN

NaN==NaN //false

undefined:表示变量只被声明，没有被初始化，也就是有这个指针，但是这个指针没有指向任何空间

var a  ;
console.log(a);  //undefined

null:表示空指针，也就是不存在的东西我们可以通过它来取消引用

    <script type="text/javascript">
      var obj={name:"小韩"};
      var a=obj;
      console.log("a",a)   //a Object {name: "小韩"}
      a=null;
      console.log("a",a)  //a null
      console.log("obj",obj)//obj Object {name: "小韩"}
    </script>

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

1.typeof运算符可以返回一个值的数据类型

    <script type="text/javascript">
      //原始类型
     console.log(typeof 123);          //number
     console.log(typeof NaN);      //number
     console.log( typeof "xiaohan"); //string
     console.log(typeof true);          //boolean
     console.log(typeof null);          //object    这里null返回的是object！
     console.log(typeof undefined);  //undefined
     //函数
     console.log(typeof fn) ;            //function
     function fn(){};
    //其他都返回object
     console.log(typeof {name:"小韩"});  //object
     console.log(typeof {});              //object
     console.log(typeof [1,2]);           //object
     console.log(typeof[]);               //object
    </script>

2.instanceof 是用来判断对象是否是某个类型的实例，返回值为Boolean值

       var a = new Number(1);
      console.log(a instanceof Number);   //true   a是Number对象
      function Person(name,age){
        this.name=name;
        this.age=age;
      }
      var b = new Person("小花",18);
      console.log(b instanceof Person);   //true
      var c =1;
      console.log(c instanceof Number)  //false  c不是对象

参考文档：
阮一峰的Blog
饥人股课件

代码

1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数（难度*）

    function isNumber(el){
        return "number"=== typeof el;
    }
    function isString(el){
        return "string" ===typeof el;
    }
    function isBoolean(el){
        return "boolean" ===typeof el;
    }
    function isFunction(el){
        return "function" ===typeof el;
    }

    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.以下代码的输出结果是?（难度**）

    console.log(1+1);    //2
    console.log("2"+"4");  //24
    console.log(2+"4");    //24
    console.log(+new Date());   //输出1970 年 1 月 1 日至今的毫秒数
    console.log(+"4");        //4

3.以下代码的输出结果是? （难度***）

    var a = 1;
    a+++a;      //a变为2 表达式值为3  相当于(a++)+a
    typeof a+2;   //munber2   相当于(typeof a) +2

4.遍历数组，把数组里的打印数组每一项的平方（难度**）

    var arr = [3,4,5]
    for(var i=0;i<arr.length;i++){
      console.log(i*i);
    }

5.遍历 JSON, 打印里面的值（难度**）

    var obj = {
      name: 'hunger',
      sex: 'male',
      age: 28
    }
    for(var k in obj){
      console.log(k+":",obj[k]);
    }

6.下面代码的输出是? 为什么（难度***）

    console.log(a);     //undefined
    var a = 1;
    console.log(a);    //1
    console.log(b);  //b is not defined

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

网友评论

本文标题：第十六弹-JavaScript基本概念、基础数据类型、运算符、流

本文链接：https://www.haomeiwen.com/subject/nvkudttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！