前端面试题（整理）

1.什么时候需要清除浮动，清除浮动的方法有哪些？
样式与当前div冲突时需要清除浮动。
方法：
(1)末尾额外增加一个空标签：

(2)通过设置父元素overflow值设置为overflow:hidden;再IE6中需要出发hasLayout,例如zoom:1;

(3)为父元素设置宽高 (4)使用 br标签和其自身的 html属性：br 有 clear=“all | left | right | none” 属性

<h2>2）使用 br标签和其自身的 html属性</h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

<br clear="all" />

</div>

(4)父元素设置 overflow：auto 属性
(5)父元素也设置浮动
(6)父元素设置display:table
2.postion和display的取值和各自的用法
postion常见的属性relative(相对定位)、absoulte（绝对定位）、fixed（固定定位）
display常见的属性：none、inline、inlin-block、block、flex
display：none和visiability：hidden都可以隐藏div，区别有点像absolute和relative，前者不占据文档的空间，后者还是占据文档的位置。
可以把行内元素转化成块元素或行内块元素
display: flex 意为"弹性盒布局模型"，用来为盒状模型提供最大的灵活性
3.理解闭包吗？闭包在实际开发中的作用。闭包建议频繁使用吗？
闭包：能够读取其他函数内部变量的函数
不建议频繁使用，闭包会使函数中的变量全部存在内存中，内存消耗很大，滥用会造成网页性能问题，在IE中可能导致内存泄露。解决方法:在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变函数内部变量的值。
4.（a1&&a2&&a==3）可能为true吗?说明原因
不能，因为变量名不能相同。
5.CookieV.S. 、LocalStrongV.S、SessionStorageV.S.、Seccsion的区别？
CookieV.S.： 常用于客户端与服务端之间的通信，但是他有本地存储功能，存储量小4Kb.生命周期随浏览器的关闭而结束;一般存储用户名密码相关信息，或者过期日期。
Seccsion：服务器存储
LocalStrongV.S:H5问世后，专为浏览器存储而设计，最大容量为5mb,如果浏览器关闭，localstorage存储的东西不会消失。
sessionStorage:会在浏览器关闭时，所存储的东西会被销毁。
6.从敲入url到渲染完成的整个过程，包括Dom构建的过程，详细简述
用户输入url地址，浏览器查询DNS查找对应的请求IP地址
建立tcp连接
浏览器向服务端发送http请求
服务端接收请求，处理请求生成html代码，返回给浏览器
浏览器接收服务器相应的结果，如果有压缩则先进行解压处理，紧接着就页面解析
解析html构建dom树
解析css生成css规则树
布局render树（layout/reflow）,负责各元素尺寸，位置的计算
绘制render树，绘制页面像素信息
浏览器将各层的信息发送给GPU，GPU将各层合成显示在屏幕上
浏览器首先会解析 HTML 文件构建 DOM 树，然后解析 CSS 文件构建 Render树，等到 Render 树构建完成后，浏览器开始布局 Render 树并将其绘制到屏幕上。
7.vue中的catch与computed的区别？
watch是监听数据的变化，
computed式计算属性，只有在相应市以来发生改变时他们才会重新求值
watch（）：

 new Vue({
  el: '#myDiv',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

computed（）:

  new Vue({
       el:"#myDiv",
            data:{
                firstName:"Den",
                lastName:"wang",
            },
            computed:{
                fullName:function(){
                    return  this.firstName  + " " +this.lastName;
                }
            }
   })

8.v-if 与 v-show的区别？
v-if：判断是否加载固定的内容，如果为真，则加载；为假时，则不加载。
用处：用在权限管理，页面条件加载。
语法：v-if=“判断表达式”
特点：控制元素插进来或者删除，而不是隐藏。
v-show:元素是一直存在的，当v-show为false时，元素display:none只是隐藏了而已。
9.vue自定义指令有哪些？他有哪些钩子函数？
v-mode v-show v-for v-if v-text v-html v-bind
钩子函数：
beforeCreadted
Created
beforeMount
mounted
beforeUpdate
Update
beforeDestroy
destroy
10前端优化网站性能的方法？
1）减少http请求次数
2）用innerHtml代替Dom次数，减少dom操作次数
3）本地缓存
4）少用全局变量，减少io读取操作
5）优化代码，把css放在body上，把js放在body下面，让其先加载css。