美文网首页
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简单认知

    1.CSS和JS在网页中的放置顺序是怎样的? css link引入放置在头部 标签里 js放置在网页底部 2.解释...

  • es6- Proxy 结合原生js/或jQuery实现vue的数

    点击查看基础Proxy认知 这篇我们集中如何使用js实现类似vue的简单数据双向绑定; 拿input和textar...

  • js认知-函数

    1.函数声明和函数表达式有什么区别 (*) 写法上的区别。 函数声明,是关键字function加函数名 函数表达式...

  • 简单的node模块

    简单school模块 student.js teacher.js class.js index.js (用clas...

  • 简单js

    使用 连续 三元 ? 来代替 if else-if 2.使用 ? 三元 来代替 if else 3.|| 或运算的...

  • 浅谈JS原型和原型链

    学习使用过js的人一开始都会觉得js简单,这是因为js语法简单,学习过编程语言的人,很容易掌握js的基本语法并按要...

  • 简单的node.js

    一:简单的Node.js介绍简单的说Node.js是运行在服务端的javascriptNode.js 是基于Chr...

  • nodejs安装

    Node.js安装 目录 Node.js简单介绍 windows安装Node.js Linux安装Node.js ...

  • 2018-08-22

    今天简单了解了一下关于js对象的知识点。包括JS 数字 JS 字符串 JS 日期 JS 数组 JS 逻辑 JS 算...

  • 原生JS添加一个JS文件

    原生JS添加一个JS文件其实比较简单:

网友评论

      本文标题:js简单认知

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