美文网首页
JavaScript初次见面

JavaScript初次见面

作者: 不是鱿鱼 | 来源:发表于2016-07-06 10:08 被阅读52次

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

    CSS在网页中应当靠前放置,一般放置在head标签内,使用link标签引入。在加载body内容之前就加载完成css,可以有效避免浏览器的白屏问题和无样式闪烁(FOUC)问题。
    JS脚本一般放置在body标签的最后面。这样设置的原因一方面是在加载执行JS的时候,一般情况下会阻塞页面的渲染;另一方面是防止需要操作DOM的JS不会因为DOM还没加载完成而出现错误。

    解释白屏和FOUC

    白屏和无样式内容闪烁(FOUC)问题,本质上是浏览器对于无样式内容进行渲染上存在的问题。
    在浏览器还没有得到样式css的时候,在某些情况下,即使已经收到内容,但对于无样式内容不进行渲染,就出现了所谓的白屏问题。
    无样式内容闪烁的存在是因为,浏览器已经渲染了收到的无样式内容,这时候突然收到了样式,然后对页面进行一个重新渲染的过程,之前的页面突然呈现出样式,给人的感觉像是突然闪了一下。

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

    async和defer都作用于JavaScript脚本的加载,同时使得JS的加载异步,不阻塞页面的的渲染。区别是async使得JS下载完成后立刻执行,而defer是在JS下载完成后,在页面渲染完成之后进行执行。使用async下载的JS,先下载完成的先执行,而defer是在渲染完成后依照先后顺序进行执行。
    使用时写在script标签内:

     <script async src="script.js"></script>
     <script defer src="script.js"></script>
    

    简述网页的渲染机制

    渲染引擎处理网页,通常分成四个阶段。

    • 解析代码:HTML代码解析为DOM,CSS代码解析为CSSOM(CSS Object Model)
    • 对象合成:将DOM和CSSOM合成一棵渲染树(render tree)
    • 布局:计算出渲染树的布局(layout)
    • 绘制:将渲染树绘制到屏幕

    这四部并不是严格的顺序执行的,页面会希望用户尽早看到内容,所以会出现什么都没加载完毕,浏览器将已经下载的内容先呈现在了页面上。

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

    在ES6之前,JavaScript定义了六种数据类型。

    数值(number):整数和小数(比如1和3.14)
    字符串(string):字符组成的文本(比如”Hello World”)
    布尔值(boolean):true(真)和false(假)两个特定值
    undefined:表示“未定义”或不存在,即此处目前没有任何值
    null:表示空缺,即此处应该有一个值,但目前为空
    对象(object):各种值组成的集合

    数值、字符串、布尔值成为简单类型(primitive type),是基本的数据类型、将对象称作复杂类型(complex type),因为对象大多是多个原始类型的组合。undefined和null是JS中比较特殊的值,都代表了“没有”。

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

    NaN的意思是 Not a Number,表示这不是一个数字。可能是除了数字以外的任何东西,所以它也不和自己相等。
    Undefined与null意义非常接近,在if语句中都代表false,undefined == null 结果也为true。区别在于,null是属于对象的,typeof null的结果是 “object”,在理解上,null表示空值,而undefined表示未定义。

    typeof和instanceof的作用和区别?

    typeof 一元运算符,它用来判断一个值的数据类型是什么;而instanceof用来判断一个实例是否属于一个对象。

    代码


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

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

    以下代码的输出结果是?(难度**)

    console.log(1+1); //2,数字相加返回数学结果
    console.log("2"+"4"); //"24", 字符串相加返回字符串拼接结果
    console.log(2+"4");// "24", 有一方是字符串的时候, 另一方会转化为字符串进行拼接
    console.log(+new Date());//  在参数有对象的情况下会调用其valueOf或toString
    console.log(+"4"); // 4, 只有右侧有数字或字符串, 且在字符串为十进制数时,返回 (+/-)+数字 结果
    
    

    以下代码的输出结果是? (难度***)

    var a = 1;
    a+++a; // 3 
    //相当于 (a++)+a, 左侧的a先作为1 参与加法运算
    //之后执行自加, 加法后面的a 作为自加之后的结果2 参与加法运算,所以结果为3 
    
    typeof a+2; //"number2" ,typeof的优先级相对加法要高, 此时会先执行(typeof a), 再执行+2 运算
    
    

    遍历数组,把数组里的打印数组每一项的平方 (难度**)

    var arr = [3,4,5];
    
    for(var x in arr){
      console.log(arr[x]*arr[x]);
    }
    // 输出 9, 16, 25 
    

    遍历 JSON, 打印里面的值 (难度**)

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

    下面代码的输出是? 为什么 (难度***)

    console.log(a);//不会报错,提示undefined
    var a = 1;
    console.log(a);// 1
    console.log(b);// 报错
    //实际运行过程中, 会有变量提升的问题
    //var a; 语句将会在程序运行一开始就执行, 但不会进行赋值, 所以会提示 undefined. 
    

    部分引用自 阮一峰JS教程
    本教程版权归 张宇 和 饥人谷 所有,转载须说明来源

    相关文章

      网友评论

          本文标题:JavaScript初次见面

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