美文网首页
js简单认知

js简单认知

作者: 没梦想的咸鱼丶 | 来源:发表于2016-10-16 22:43 被阅读0次

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

    • css link引入放置在头部<head>标签里
    • js放置在网页底部

    2.解释白屏和FOUC

    • 当把css样式放在页面底部或者使用@import引入,还有js放头部加载造成阻塞时,就会出现这两种情况

      • 白屏:一些浏览器例如chrome,会等css全部加载完成之后再进行渲染展示页面,这个等待的时间就会出白屏。

      • FOUC(flash of unstyled content):而例如ie浏览器某些场景下(打开新窗口,刷新)会在未加载css的时候会根据元素默认样式就绘制页面,而当css加载完成之后,又会重新绘制一遍。

    • 而这两种情况的出现是因为浏览器渲染机制不同造成的,像FF会一直表现出FOUC,最好的解决方法就是使用用link引入放置在<head>标签内,js放页面底部。

    3.asyncdefer的作用是什么?有什么区别

    • asyncdefer作用是可以异步加载外部js,可以在文档元素加载的同时也同步加载js,如果没加其中一个属性,浏览器会加载到js就会立即执行,不会等待后续文档元素的加载。

    • 两者相同之处就是在下载的时候都是异步,而区别在于,async是只要加载完成之后就执行 不按照顺序。defer是会等到文档元素全部加载完成之后在执行,而且按放置顺序(貌似实际中也是不按顺序)。

      参考:defer和async的区别

    4.简述网页的渲染机制

    • 首先解析标签和css样式
    • 构建DOM树和CSSOM树
    • 然后两者合并构建渲染树
    • 再则根据渲染树进行布局 计算每个节点的几何结构
    • 最后浏览器再根据计算的几何结构绘制出来
    render-tree-construction.png

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

    • JavaScript定义了六种数据类型
    • Null 空对象指针,表示此处应有值,但现在是空的
    • Undefind 表示未定义或不存在,只有undefind这一个值
    • Number 数字,整数或者小数
    • Boolean 布尔值,truefalse
    • String 字符串
    • Object 对象,各种值的组成的集合

    前面五种都是简单类型。object属于复杂类型

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

    • NaN(not a number)表示非数字类型
    • undefined表示未赋值,已经声明但缺少值
    • null表示空值,此处应该有值,但现在是空的

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

    • typeof:判断数据的类型。
    • instanceof:判断某个对象是不是另外一个对象的实例。

    8.代码

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

        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 ==="function"
        }
    
        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());//1476608890023 数字
            console.log(+"4");//4 数字
    

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

        var a = 1;
            a+++a; //a++ 先运算再+a  结果:3
            typeof a+2; //typeofa 先运算 结果:"number2"
    

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

    var arr = [3,4,5] // todo..// 输出 9, 16, 25 
    
    var arr = [3,4,5]
            for (var i = 0; i < arr.length; i++){
                console.log(arr[i]*arr[i])
            }
    

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

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

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

    console.log(a);//undefined //变量提升了,var a实际位置已经到了前面,但由于值还在后面,所以返回undefined
            var a = 1;
            console.log(a); // 1  //前面a变量已经被赋值1,所以返回1
            console.log(b); //b is not defined(…)  //变量b 未被声明所以报错
    

    本篇文章版权归咸鱼和饥人谷所有,转载须说明来源

    相关文章

      网友评论

          本文标题:js简单认知

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