前端面试问题

1、网页显示到浏览器的原理：

从输入 URL 到页面加载完成的过程中都发生了什么？

简单路径线：

键盘或触屏输入URL并回车确认
URL解析/DNS解析查找域名IP地址
网络连接发起HTTP请求
HTTP报文传输过程
服务器接收数据
服务器响应请求/MVC
服务器返回数据
客户端接收数据
浏览器加载/渲染页面
打印绘制输出

2、ES6、ES7、ES8新特性：

ES6常用新特性
let && const
iterable类型
解构赋值
=>函数
…操作符
类
ES7新特性
Array.prototype.includes
Exponentiation Operator(求幂运算)
ES8新特性
Object.values/Object.entries
String padding(字符串填充)
Object.getOwnPropertyDescriptors
函数参数列表和调用中的尾逗号（Trailing commas）
异步函数（Async Functions）

3、标准盒模型和IE盒模型的区别？

标准盒子模型
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE盒子模型
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

4、行内元素和块即元素有哪些？

行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。
块级元素写完后会自动换行，有宽高可以修改。
还有一种特殊的元素叫做行内块元素。
大致分内是：
行内元素有：heda meat title lable span br a style em b i strong
块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div
行内块元素常见的有： img input td

5、事件冒泡和事件捕获的区别？

事件冒泡原理是从下至上。
假设我要点击的是div，点击后会一层一层的往上。
案例：

我是祖宗

我是老爸

我是孩子

</div>
<script type="text/javascript">
    var a = document.querySelector('.classv').addEventListener('click', function() {
        console.log('我是祖宗')
    }, false)
    var b = document.querySelector('.actva').addEventListener('click', function() {
        console.log('我是老爸')
    }, false)
    var c = document.querySelector('.foo').addEventListener('click', function() {
        console.log('我是孩子')
    }, false)
</script>

注意： addEventListener中有三个属性，第三个属性是布尔值。
默认属性为false为事件冒泡；为true为事件捕获；
事件捕获与事件冒泡完全相反。是从上至下到指定元素。

我是祖宗

我是老大

我是老幺

</div>
<script type="text/javascript">
    var a = document.querySelector('.classv').addEventListener('click', function() {
        console.log('我是祖宗')
    }, true)
    var b = document.querySelector('.actva').addEventListener('click', function() {
        console.log('我是老大')
    }, true)
    var c = document.querySelector('.foo').addEventListener('click', function() {
        console.log('我是老幺')
    }, true)
</script>

这个案例与前面的是相同，只是把addEventListener的第三属性改成true。
注意：addEventListener()必须用removeEventListener()解除

6、BFC是什么？

7、js中的prototype

8、cookie、localstorge和

9、script标签放在body里面最后面的原因是什么？

浏览器在解析到标签之前，不会渲染页面的任何部分。把脚本放到页面顶部会导致明显的延迟，通常表现为显示空白页面，用户无法浏览内容，也无法和页面进行交互。

尽管IE8，FX3.5，Safari4和Chrome2+都允许并行下载JavaScript文件。这样

由于脚本会阻塞其他资源的下载，因此推荐将所有