参考
1.高性能网站建设指南
2.https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en
3.http://taligarsiel.com/Projects/howbrowserswork1.htm
变量
在JavaScript中变量是用来保存值的占位符，定义变量的时候要使用 var 运算符，后面跟一个作为名称的标识符即可
var message;
变量提升
JS 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisting)
console.log(a)
var a = 1
//因为存在变量提升，真正运行的是下面的代码
var a;
console.log(a);
a = 1;
//最后的结果是显示undefined 表示变量a已经声明，但还未复制
请注意 变量提升只对var声明的变量有效，如果一个变量不是var
命令声明的，就不会发生变量提升
console.log(b);
b = 1;
//上面的语句会报错 提示'ReferenceError: b is not defined'
标识符
命名规则：
1.第一个字符，可以是任意Unicode字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
2.第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。
命名规约：
1.使用有实际意义的单词
2.变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写
3.变量使用名词，方法函数使用动词开头，常量全部用大写字母，
函数创建对象首字母大写
注释
//这是单行注释
/*
这是
多行
注释
*/
题目1：CSS和JS在网页中的放置顺序是怎样的？
css样式放在页面的head中
js文件防置在body的结尾处
js所依赖的库（比如jquery）放置在js的前面
题目2：解释白屏和FOUC
白屏和FOUC是由于浏览器加载与显示方式不同造成的：
IE会出现白屏现象，这是因为其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏。——样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现。 IE 为什么会这样做？因为样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解释完毕之前无需要绘制任何东西，否则，在其准备好之前显示的内容会遇到FOUC问题。
这样IE 就避免了FOUC问题，也就自然的会出现白屏现象。在IE中，将样式表放在文档底部公导致白屏问题的情形有以下几种：
一、在新窗口中打开时
二、重新加载时
三、作为主页打开时
FireFox 当把样式表放在页面底部时，会遇到FOUC问题，因为FF为了用户体验，对所有都是对页面中的组件逐步呈现。
此外，引入样式表时，有两种方式：link和@import
1.png
一个style块可以包含多个@import规则，但@import规则必须放在所有其他规则之前。使用@import规则需要注意的是：即便把@import规则放在文档的HEAD标签中，可能导致页面组件下载时的无序性，进而导致白屏（对于IE）和FOUC(对于FF)问题的产生。
为了很好的避免白屏和FOUC问题，请遵循以下规则：使用LINK标签将样式表放在文档的HEAD中
题目3：async和defer的作用是什么？有什么区别
都是用来异步加载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 事件触发之前完成。
详细可以参考MDN https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
题目4：简述网页的渲染机制
1.解析HTML标签，构建DOM树
2.解析CSS标签，构建CSSOM树
3.把DOM 和 CSSOM组合成 渲染树（render tree）
4.在渲染树的基础上进行布局，计算每个节点的几何结构
5.把每个节点绘制到屏幕上（painting）
网友评论