JS基本语法

2016-08-12 本文已影响0人老虎爱吃母鸡

CSS和JS在网页中的放置顺序是怎样的？
主要取决于哪个文件需要先被浏览器渲染，一般情况下css需要先被浏览器渲染，否则网页可能会出现先加载html而没有css样式的情况，然后如果把js也放在前面，会导致下载的时间太长，页面一直没有内容，出现白屏的情况，所以
- css放在<head>标签中先加载
- js放在</body>之前加载

2016-08-11_221605.png

解释白屏和FOUC
- 白屏的主要原因是浏览器阻塞，每当在<head>标签有script的外部文件的时候，浏览器就需要产生一个网络请求，而如果这个外部文件不下载执行完成是不会执行接下来的htm文件的，所以如果在<head>标签中有较大的script外部文件或者较多的script文件，就有可能因为浏览器阻塞而产生白屏
- FOUC（Flash Of Unstyled Content），就是无样式内容闪动，当CSS文件放在页面尾部，html会先被加载和渲染出来，直到遇到一个CSS文件，才会把CSS的规则渲染在html文件上，所以如果把css放在页面尾部，就可能出现这样短暂的闪动
async和defer的作用是什么？有什么区别
我们先来看当浏览器加载页面发生了什么，浏览器搜先获取一个html文件，然后开始解析这个html文件，直到解析器遇到一个引用外部文件的<script>标签，然后浏览器会下载并执行这个外部的js文件，与此同时，浏览器会停止继续解析剩下的html文件直到外部的js文件执行完毕，之所以解析器遇到外部的script浏览器会发生阻塞是因为外部的js文件中可能有document.write()或者对DOM的操作，也些比较老的建议是把外部的script文件放在</body>之前，但是对于大型网站来说，能够尽快下载并执行js文件是很重要的，script标签中的async和defer属性相当于告诉浏览器可以放心的先执行接下来的代码，所以不会照成浏览器阻塞
- async，表示的是异步下载js文件，但是有async属性的js文件是谁先下载好谁先执行，下图中的script2.js就有可能比script1.js先执行，所以如果对js的执行顺序有要求的话，就不能使用async属性
  
  2016-08-12_123439.png
  
  这是在caniuse查询的兼容性，在IE<10的版本不支持这个属性
  
  2016-08-12_130030.png
- defer，表示的是当整个html文件加载完成后再执行js文件，注意，会立即加载但不会马上执行。但是js文件的执行是有顺序的，下图中的script1.js会比script2.js先执行
  
  2016-08-12_123505.png
  
  这是在caniuse查询的兼容性，在IE<10只有部分支持，可能会交错的执行脚本
  
  2016-08-12_125415.png
简述网页的渲染机制
这主要是渲染引擎的工作，不包括js引擎
- 解析html构建dom tree，解析css构建cssom tree
- 把dom tree和cssom tree结合成render tree
- 布局render tree
- 绘制render tree

2016-07-30.gif

2016-08-12_144122.png
参考：
浏览器渲染机制
高性能WEB开发系列

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- Number
- String
- Boolean
- Undefined
- Null
- Object

JS定义了6种数据类型，一个数据的类型必定是上面的一种，其中Number、String、Boolean、Undefined、Null是简单的数据类型，Object是复杂类型

NaN、undefined、null分别代表什么?
- NaN，是number类型中一个特殊的值，即Not A Number，表示本来要返回数值却没有返回数值的情况，主要出现在字符串解析成数字出错的场合
  
  2016-08-12_145525.png
  2016-08-12_150328.png
  
  NaN有两个特点，第一，任何与NaN有关的操作返回的都是NaN，第二，NaN不与任何数相等，包括他的本身
  
  2016-08-12_150716.png
  ECMAscript定义了一个isNaN()的函数，在该函数接受一个参数，可以判断参数是否是非数值，isNaN()接收到一个值之后，会尝试把这个值转换为数值
  2016-08-12_151220.png
- undefined，如果一个变量声明了但是未赋值，那么这个变量的值就是undefined，注意，如果变量未声明就直接调用会抛出错误
  
  2016-08-12_151614.png
- null，如果一个变量将用来保存对象，最好将该对象初始化为null，这样，直接判断一个变量是否为null就可以知道该变量是否保存了对一个对象的引用
typeof和instanceof的作用和区别?
- typpeof，是一个操作符，所返回的值有'number'，'string'，'boolean'，'undefined'，'obejct'，'function'，因为js的变量类型是松散的，所以就需要一种手段来检测给定变量的数据类型，常用来判断简单的数据类型
  
  2016-08-12_153426.png
- instanceof，typeof只能判断一个变量是对象，但是往往我们想知道是哪种引用类型的对象，所以就需要instanceof，判断一个变量是否是一个引用类型的实例，instanceof也是一个操作符
  
  2016-08-12_154909.png

JS基本语法

猜你喜欢

热点阅读