欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JS语法

程序员文章站 2022-06-04 14:41:06
...

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

  1. 对于CSS，应该使用<link>标签放在<head>标签内，当直接写在html文档中时应该在<head>标签内写一个<style>标签然后放在<style>标签内。 
       /*CSS外部引用*/
  <head>
      <link rel="stylesheet" type="text/css" href="styles/index.css">
  </head>

       /*内部样式表*/
  <head>
      <style>
        body{
          margin:0;
      }
      </style>
  </head>
  2. 对于JS通常放在<body>的内容的最后面，但是个别特殊JS内容应该尽量放在最前面。
  /*外部引用*/
<body>
  <script type="text/javascript" src="index.js"></script>
</body>

    /*内部引用*/
<body>
    <script>
        alert(1);
    </script>
</body>

解释白屏和FOUC

  1. 白屏问题：如果把样式放在底部，对于IE浏览器，在某些场景下页面会出现白屏，而不是内容逐步展现，如果使用@import标签，即使CSS放入<link>并且放在头部也可能出现白屏。
    在加载JS文件时，会警用并发，并阻止其他内容的下载，所以把JS放入页面顶部也会导致白屏现象。
  2. FOUC无样式内容闪烁
    如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

将JS放在底部

  • 脚本会阻塞后面内容的呈现
  • 脚本会阻塞其后组建的下载

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

async和defer都时异步加载。
没有defer或async，浏览器会立即加载并执行指定的脚本，立即指的是在渲染该<script>之下的文档元素之前，也就时说不等待后续载入的元素，读到就加载并执行。

  1. 有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
<script async type="text/javascript" src="index.js"></script>
  1. 有defer，加载后续文档元素的过程将和script.js的加载并行进行，但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

defer和async的区别：

  1. defer：脚本延迟到文档解析和显示后执行，有顺序
  2. async：不保证顺序

简述网页的渲染机制

  1. 浏览器打开页面时，先加载HTML的内容，然后解析HTML文件解析成DOM树。
  2. 解析CSS构建CSSOM树
  3. 把DOM和CSSOM组合成渲染树
  4. 在渲染树的基础上进行布局，计算每个节点的几何结构
  5. 把每个节点绘制到屏幕上

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

  • 简单类型
    1. Number类型：整数和小数
    2. String类型：字符组成的文本
    3. Boolean类型：true和false的两个特定值
    4. Null：表示已经定义了一个变量，但是目前没有赋值，即为空
    5. Undefined类型：表示未定义或不存在
  • 复杂类型
    Object类型

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

  1. NaN表示非数字，但是属于Number类型。NaN和任何数值都不相等，包括它自己
  2. undefined表示不存在值，就是此处目前不存在任何值。典型用法：
  • 变量被声明了，但没有赋值时，就等于undefined
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined
  • 对象没有复制的属性，该属性的值为undefined
  • 函数没有返回值时，默认返回undefined
  1. null表示空值，即该处现在为空，用法：
  • 作为函数的参数，表示该函数的参数是一个没有任何内容的对象
  • 作为对象原型链的终点

typeof和instanceof的作用和区别?

typeof和instanceof都能用来判断变量的类型或者是否为空。

  • typeof用以获取一个变量的类型，一半只能返回number,boolean,string,function,object,undefined类型。
  • 而instaceof用来判断一个变量是否是某个对象的实例，返回值是布尔类型，已确定该变量是否为指定类型。

代码

  1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){
}
function isString(el){
}
function isBoolean(el){
}
function isFunction(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

代码预览

  1. 以下代码的输出结果是?
console.log(1+1);         //2
console.log("2"+"4");     //24
console.log(2+"4");       //24
console.log(+new Date());  //1470814913028
console.log(+"4");            //4
  1. 以下代码的输出结果是?
var a = 1;
a+++a;    //3
typeof a+2;    //number2
  1. 遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25

代码预览

  1. 遍历 JSON, 打印里面的值
var obj = {
  name: 'hunger',
  sex: 'male',
  age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28

代码预览

  1. 下面代码的输出是? 为什么
console.log(a);//undefined 变量提升 a未赋值
var a = 1;
console.log(a); //1
console.log(b); //b is undefined,未声明b

本文版权归本人和饥人谷所有，转载请注明来源。

上一篇： 关于 Framework 的一切

下一篇： CSS特性之层叠性

推荐阅读