css和js在网页中的放置顺序
- css:应该放在网页的head部分，在body之前进行解析。可以多个加载样式，并行加载
- js:应该放在body里面的后面，代码样式的后面。按照js顺序进行加载。
白屏和FOUC
我们把css样式放在后面可能回造成白屏和FOUC
- 白屏:当我们把css样式放在后面的时候，当浏览器按照先解析样式，再加载内容的机制，会出现由于样式的渲染，屏幕在这个时间内是没有内容的，这就是白屏。当我们把js样式放在前面，浏览器先加载样式，也会造成白屏。
- FOUC(无样式闪烁):当我们把css样式放在后面的时候,浏览器按照先加载代码，再加载样式的解析机制，就会出现当网页显示出页面的时候由于加载样式，会改变页面，出现闪烁。
async和defer
正常浏览器解析HTML源文件的时候，当遇到script标签的时候，会停止向下解析并加载Js代码，当js代码被加载完全后，才会继续向下解析。而async和defer都是实现异步加载js样式的新属性。就是再加载样式的时候，同时记载js文件，减少了加载页面的时间。
async
async:异步加载js样式，但是不同于defer。它会在页面下载完脚本后立刻的执行文件，并且其执行时间一定在 window的load事件触发之前。这就意味着，它可能不会按照脚本的放置位子执行脚本。加载快的会先被执行。
defer
defer:异步加载js样式，但是不同于async。它在加载页面脚本完后，不会像async那样理解执行脚本，会在页面DOM加载完全后才会执行。会按照脚本放置位置执行脚本。
网页的渲染机制
渲染图
渲染图
浏览器会解析
- HTML 浏览器解析HTML文件后会产生一个DOM树
- css样式 解析css会产生一个css规则树
- javascript脚本 浏览器在解析主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
注意点
解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。但是需要注意一下几点
- Rendering Tree并不等于DOM Tree。因为一些像display:none的东西就没必要放在渲染树中了。
- CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。
JavaScript的数据类型
javascript从大方面分6中数据类型。其中object(对象类型)是复杂类型。null(空)，undefined(未定义)这2个通常和其他三个基本类型分开。
- number(数字类型)
- Boolean(布尔类型)
- string(字符串类型)
- null(空)
- undefined(未定义)
- object(对象类型)。可以分对象，数组，函数三大类。
NaN、undefined、null
NaN(Not a number)
NaN表示非数字，但是记住一点，它在任何情况下和自己都不相等，也没有大小之分。当我们把一个非数字的字符串转换成数字的时候，会爆出NaN。
typeof NaN //'number'
undefined(未定义)
表示一个变量在定义了，未赋值的默认值，已经分配了空间。
通常出现在:
- 定义了变量没有赋值。
- 函数没有给return时的值
- 当传递实参的没有给全形参，对应的形参就会是undefined
- 调用对象没有的属性
undefined对应案例
undefined
null
null: 表示空，通常表示先占有一个内存，便于分配给后面元素。
通常运用于：
- 函数的参数为空，没有实际意义，占用一个内存，便于后面。
- proto原型链的终点。
typeof和instanceof的比较
typeof和instanceof的用法
- typeof: 用来判定一个值的类型，返回的是一个字符串。但是有时候会分辨不出来具体的类型。特别的是typeof null 会得到一个object,是一个历史遗留问题，但是null不是对象。没有相应的属性。
- instanceof: 对于复杂类型有时候typeof不能够判定，通过根据其构造函数来判定值的类型，更加的精确。通过使用较多。只有在比较自定义的对象时才有意义。
typeof常用值
typeof常用值
注意到： 这样不能区分数组和对象。
instanceof常用值
0_1483341405410_4.png
注意点： 当一个函数被重写的时候，对应的constructor也会改变。
拓展
对象的默认属性
对象.png
函数的默认属性
函数.png
网友评论