美文网首页
JS入门知识

JS入门知识

作者: 谢环志 | 来源:发表于2016-08-13 11:43 被阅读0次

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

  • css一般放在html中的head标签之中,一般在meta和title标签之后
    页面渲染首先是根据DOM结构生成一个DOM树,然后加上css样式生成一个渲染树,如果将css放在最后,页面可能会出现闪跳、白屏或样式混乱等。

  • js一般放在body标签的最后,也就是</body>之前
    js是阻塞加载的,若是放在前面,会影响页面的加载速度,若是js文件过大,这种影响就会更大,可以使用异步加载的方法来解决阻塞加载的问题。

  • 简单而言,以这种方式来放置css和js,可以让页面的内容更早,更快的被加载出来。

二、解释白屏和FOUC

在不同浏览器对css和html的处理方式不同,一种是等待css加载完成后,对html
进行渲染并显示,有的是先对html元素进行展示,等css加载完成之后,再对html进行样式的设置;前者会造成白屏,后者则会造成FOUC。

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

  • async---异步脚本,作用是:告诉浏览器立刻下载其指定的js,与此同时会同步加载页面的内容部分,不会因为js的存在而导致浏览器必须先下载并执行js后再加载后面的内容;(因此建议异步脚本不要在加载期间修改DOM)

  • defer--延迟脚本,作用是遇到js时立即下载,但延迟到</html>之前的内容全部加载完后再执行;这样不会因此js的存在导致阻塞了后面的页面内容的呈现

区别:
1、执行时间不一样:async的js在下载完后会立即执行(因此脚本在代码中的顺序并不是脚本所执行的先后顺序,有可能后面出现的脚本先执行),但defer则要等待整个页面内容及样式全部加载完后再执行;(HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行,但实际情况下,延迟脚本不一定按照先后顺序执行。
2、HTML版本不一样:html的版本html4.0中定义了defer;html5.0中定义async;
3、浏览器支持情况不一样

四、简述网页的渲染机制

(1).根据URL向服务器请求数
(2).根据来自服务器端的HTML形成文档对象模型,即DOM
(3).加载并解析css样式代码,形成css对象模型。
(4).在DOM和css对象模型上,创建一棵由一组待生成渲染的渲染树,,渲染树反应了文档对象模型的结构,其中的每一段文本字符串都表现为一个独立的渲染器,每一个渲染器都包含与之对应的DOM对象,文本块和之前所计算出来的样式。
(5).对渲染树上的每一个元素,计算它的坐标,称为布局。
(6).最后,渲染书中所包含的内容显示在浏览器上。
(7).当用户与网页交互,或者脚本程序操作DOM内容等,上述过程就会重新再来一次。

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

ECMAScript中规定了7种数据类型,包括6中原始数据类型和object。
1.Boolean 布尔类型;其中有两个值:true false
2.Null 空值(null or an empty value);只有一个值 null
3.undefined 一个已经被声明,但没有被赋值的变量拥有一个默认值,就是undefined undefined(首字母小写)是它唯一的值
4.String 字符串类型,用于表示文本数据,它的索引值从0开始。
5.Number 在ECMAScript标准中,只有一种数字类型,即Number,它包括了整数
、浮点数、正负Infinity和NaN
6.Symbol 符号类型,是在ECMAScript中新增的一个类型,它是唯一的,也是不
可修改的。
7.object 对象类型,它是内存中可以被标识符引用的一个区域

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

  • NaN not a number,它是一个Number类型的值,但是不能被表示出来,另外需要注意的一点是,它和自己本身并不相等。
  • undefined 一个已经被声明,但没有被赋值的元素有一个默认值,就是undefined,一个没有传入实参的形参的值也是undefined,如果一个被定义的函数没有返回值,那么它的返回值也是undefined。
  • null 空值,是JavaScript中的一个字面量,也是JavaScript的原始值之一

七、typeof和instanceof的作用和区别?

两者均能判断一个变量是否为空或者是什么类型的变量。

  • typeof:用于获取一个数据的类型,它所返回的结果一般有:boolean,number、string、function、object和undefined,它对于Array、null和其他对
    象的返回值均为object,这也是它的局限性

  • instanceof:如果希望知道一个对象是数组还是空值或者是其他的对象,就用
    到了这个函数,instanceof用于判断某个变量是否是某个对象的实例,它要求明
    确确定对象为某个特定类型,而不是笼统的object

  • 此外,typeof是一个一元运算符,放在运算数的前面,以判断类型,而
    instanceof则是一个二元运算符,它的返回值是一个布尔值。

代码任务一

代码任务二:
console.log(1+1); //数字2
console.log("2"+"4"); //字符串24
console.log(2+"4"); //字符串24
console.log(+new Date());//转成毫秒
console.log(+"4");//数字4

代码任务三:
var a = 1;
a+++a; // 3 首先a++运算后,a++依然是1,但a已经变成2,即1+2=3
typeof a+2; //number2 typeof的优先级高,所以首先判断typeof a 结果是number,再+2,完成一个字符串的拼接.

代码任务四:
arr = [3,4,5];
for(i in arr){console.log(arr[i]*arr[i]);

代码任务五:
var obj = {
name : 'hunger',
sex : 'male',
age : 28
}
for(i in obj){
console.log(obj[i]);
}

代码任务六:
console.log(a); // undefined 由于变量提升,所以a已经被声明
var a = 1;
console.log(a); // 1
console.log(b); // 报错 b is not define

相关文章

  • Vue.js开发常见问题解析

    此前的Vue.js系列文章: Vue.js常用开发知识简要入门(一) Vue.js常用开发知识简要入门(二) Vu...

  • JS入门知识

    一、CSS和JS在网页中的放置顺序是怎样的? css一般放在html中的head标签之中,一般在meta和titl...

  • 前端学习

    初级阶段(静态网页制作、JS编程入门) 1.Photoshop入门 图像处理基础知识、图像处理基础知识、分辨率、图...

  • Vue.js动态组件解析

    此前的Vue.js系列文章: Vue.js开发常见问题解析 Vue.js常用开发知识简要入门(一) Vue.js常...

  • Vue.js基础入门

    今天,给大家分享下Vue.js基础入门,我主要由了解Vue.js、开始起步、语法三个部分简单的写了基础入门知识,希...

  • Vue.js基础入门

    今天,给大家分享下Vue.js基础入门,我主要由了解Vue.js、开始起步、语法三个部分简单的写了基础入门知识,希...

  • VUE基础知识入门

    VUE基础知识入门 VUE官方文档教程链接:VUE 1.什么是Vue.js Vue.js(读音 /vjuː/, 类...

  • 0基础自学linux运维-5.1-java推荐书籍

    0、没入门之前 没入门之前得学一点简单的前端知识: HMTL、js/juqery、用jquery实现ajax、cs...

  • 入门级知识

    入门知识_1 入门知识_2 入门知识_3 入门知识4

  • Node.js 笔记二:入门及GeoNode.js GIS相关库

    Node.js 笔记二:入门及GeoNode.js GIS相关库 入门 node.js之fs模块 Node.js模...

网友评论

      本文标题:JS入门知识

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