标识符
所谓标识符是指变量、函数、属性的名字，或者函数的参数。标识符的书写有几个特征
1.区分大小写: var a=1;
2.第一个字符必须是字母、下划线（_）、或者是$ :var _aa =3; var$$cd=100
3.后面的可以是字母、数字、下划线、$
命名规约
1.使用是实际意义的单词
2.变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写
3.变量使用名词，方法函数使用动词开头，常量全部用大写字母，函数创建对象首字母大写
var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}
变量
在JavaScript中变量是用来保存值的占位符，定义变量的时候要使用var运算符，
后面跟一个作为名称的标识符即可
var message;
弱类型
在一些编译语言（C、Java、C#）等变量的类型是固定的，在声明变量的时候就要标识其类型，
在程序执行前编译阶段变量的类型就确定了，而且不能改变，我们称之为强类型
int a = 2;
string b = "hello";
一些常见的解释型语言（PHP、JavaScript）等变量的类型是松散的，一个变量可以用来保存任何类型的数据，
变量的类型不是由声明时决定（声明的时候只是用了var运算符），而是在程序执行阶段由其值的类型决定，
随着程序运行其值类型改变，变量类型也会发生改变
var message = 1; //message 类型就是数字
message = "hello world!"; //message 类型变为字符串
语句
语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句
var a = 1 + 2;
这条语句先用var运算符，声明了变量a，然后将 1+2 的运算结果赋值给变量a。
JavaScript中语句以;结束，一行可以包含多条语句，如果省略分号不会产生语法错误，
解释器会自动判断语句结束
var sum = 1 + 2
var diff = 3 - 4;
变量提升
JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升
我们写了一个赋值语句
var a = 2;
实际上执行过程是解释器在未执行的时候先解析出变量声明，然后给他初始值undefined，
然后才逐句执行程序
var a;
a = 2;
：：：：全局变量
申明前置：
var a=100;
b=10;
console.log(a)
console.log(c)
var c =4
var d =200
注释
并不是所有的语句都会执行，我们可以通过注释功能让js引擎忽略部分语句，
这个功能经常用来解释我们的部分语句，和读书做标注一样
Javascript提供两种注释：一种是单行注释，用//起头；另一种是多行注释，放在/* 和 */之间。
//为变量赋值
var a = 1; //赋值成功
/*
下面定义个函数
至于什么是函数
且听下回分解
*/
function getName(id){
return 'Byron';
}
（HTML的注释 <!-- --> CSS的注释：/* */）
关键字和保留字
关键字是JavaScript引擎会用到的一些字，我们标识符不能再使用，比如定义变量的关键字var，关键字有
break else new var
case finally return void
catch for switch while
continue function this with
default if throw
delete in try
do instanceof typeof
保留字
除了这些不能用作标识符的关键字，js还规定了一些不能用作标识符的保留字，
这些字符没有什么意义，但是未来会用到
abstract enum int short
boolean export interface static
bye extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
doubler import public
实际上一些保留字在新的ECMAscript已经得到使用
认识 JavaScript
网页?
网页 = Html+CSS+JavaScript
Html: 网页元素内容
CSS: 控制网页样式
JavaScript：操作网页内容，实现功能或者效果
javascript
javascript !== java
是客户端脚本语言（指浏览器）
ECMAScript, DOM, BOM, NodeJS（变量，函数，语句，操作浏览器页面上的内容，交互）
引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link href="index.css" rel="stylesheet">
<style>
body{
background: red;
}
</style>
</head>
<body>
<p>
</p>
<script src="index.js"></script>
<script>
alert(1);
</script>
</body>
</html>
浏览器渲染机制
解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成 渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)
render-tree-construction
白屏问题
如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏（一般情况下不用@import）
chrome是等html，css都出现后的渲染的一个结果
css一般放在body的前面，放到head里面
FOUC (Flash of Unstyled Content) 无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),
会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox
会一直表现出 FOUC .
将JS放在底部
脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,
会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
加载异步
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script
标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），
但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
defer:脚本延迟到文档解析和显示后执行，有顺序
async:不保证顺序
基本调试
alert
console.log
打断点
二分法（分成两份，注释点一份，再查找）
（报错是什么，报错的点在哪里，分析问题，解决问题的能力）
参考
高性能网站建设指南, Steve Sounders
Render-tree construction, layout, and paint
How browsers work（http://taligarsiel.com/Projects/howbrowserswork1.htm）
网友评论