JavaScript初识

一、JavaScript初识
网页是=html+css+javascript
是一种编程语言，脚本语言，在浏览器端的，是在浏览器端运行，可以操作dom，可以和用户进行交互。
JavaScript操作页面内容，实现功能或者效果。包括三部分ecmascript,dom,bom.
其中ecmascript是JavaScript的核心，定义一个变量，做一个简单的加法，或者一个函数的循环（没有操作浏览器，与浏览器无关系，可以在服务器等运行，不知仅限于浏览器），剔除任何与浏览器页面相关的特性，只是一个语言，不会操作页面。
dom是通过js可以操作页面内容。
bom是脱离页面，与浏览器交互的。
nodejs是运行在服务器端的JavaScript。
链接内容
./表示当前文件夹下的文件夹
../回到上级目录
JavaScript的引入方式
1、内部样式
<script src="index.js"></script>
<script>
alert(1);
</script>
2、放在头部样式
JavaScript的渲染机制
1、解析html标签，构建dom树（dom包括文档、）
2、解析css标签，构建cssdom树（）
3、把dom和cssdom合成渲染树
4、再渲染树的基础上进行布局，对？html和css，计算每个节点的几何结构。
5、把每个节点绘制到屏幕上。
一般都是css放前面，js放后面
二、白屏问题
当给一个页面时，首先加载html,第一种等到所以的样式（外置样式），解析过后，与内置样式进行合并，之后再渲染。
第二种，按照先后顺序，先出现的先渲染，遇到新的样式再渲染一遍遇到外链的css，再解析，遇到js再解析。（但是此种样式的渲染方式会出现无样式内容闪烁现象。）
第一种css放在最后时，过程比较漫长时，浏览器页面是不显示内容的，需要等到所有内容合并后，才进行渲染，就是白屏。这个解析方式是浏览器决定的。
js放在顶部时，加载时间较长时，也可能出现白屏
@import标签时，即使css是放在link下的，也可能出现白屏。
@import的使用方法
<style> @import url(index.css) </style>
如果把样式放在前面，不管浏览器以那种方式进行解析，都可以以最快的样式展现，
FOUC无样式内容闪烁
逐步加载无样式的内容，等css完全解析后页面样式突然展现，会出现页面闪烁。
js一般放在底部，只能一个一个加载，而css可以同时加载2个，4个等。
对于图片和css加载时，会并发加载，（js放在顶部时，加载时间较长时，也可能出现白屏）js不可以并发加载。
三、异步加载（延迟加载）
没有defer或async时，浏览器会立即加载病执行指定的脚本。立即是指在渲染script标签下的内容渲染之前，不等后续载入的文档元素，就加载执行。
有async，读到后，会加载script标签下的内容，再往后加载完成后再执行。与defer的区别是async不保证顺序。
异步加载的作用：
1、一键分享
2、网站数据统计
任何时候都可以加载，并不一定要等整个页面出来再加载。如果js代码放在前面，加上defer async不会阻塞整个页面