js简单认知

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 未被声明所以报错

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript基本概念、基础数据类型、运算符、流程控制语句。 一、CSS和JS在网页中的放置顺序是怎样的? ...
    婷楼沐熙阅读 448评论 0 2
  • 1.CSS和JS在网页中的放置顺序是怎样的? css一般放在头部head标签中,网页渲染时,先解析html标签,生...
    _Josh阅读 361评论 0 1
  • 问答: 1. CSS和JS在网页中的放置顺序是怎样的? CSS一般放置在的 标签中。网页渲染时,先解析HTML标签...
    小木子2016阅读 443评论 0 0
  • 学习内容:JavaScript基本概念,基础数据类型,运算符,流程控制语句 一、CSS和JS在网页中的放置顺序是怎...
    鸿鹄飞天阅读 519评论 0 0
  • 随机生成验证码 1、验证码1、纯数字2、纯字母3、数字字母混合4、计算公式 3 + 5 =打乱字符串:str_s...
    博行天下阅读 377评论 0 0