几个面试题

一、如何优化网站性能

• 1、减少 HTTP 请求数量
  在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
• 2、控制资源文件加载优先级
  浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。一般情况下都是CSS在头部，JS在底部。
• 3、利用浏览器缓存
  浏览器缓存是将网络资源存储在本地，等待下次该资源，直请求该资源时，如果资源已经存在就不需要到服务器重新请求接在本地读取该资源。
• 4、减少重排（Reflow）
  基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
• 5、减少 DOM 操作

二、简述vue重要周期具体适合哪些场景

• 1. created 相当于是页面刚开始加载的状态，此时不能操作实例的属性和方法，适合 初始化、异步请求接口
• 2. mounted 相当于是页面加载完毕，此时可以处理已挂载的数据，不适合处理异步请求的接口数据
• 3. updated 相当于是数据更新完毕，此时可以处理异步请求的接口数据，适合处理统一变化的数据，也可以用 $nextTick（），它表示DOM完全更新完毕

三、vue路由传值的方式有哪几种

• 1、动态路由传值。例如：path:"/home/:id/name"; 接受的时候通过 this.$route.params
• 2、query 传值。因为在 url 中？后面的参数不会被解析，因此我们可以通过 query 进行传值。接受的时候通过 this.$route.query
• 3、路由解耦。在配置路由的时候添加 props 属性为 true,在需要接受参数的组件页面通过 props 进行接受
• 4、编程式导航 this.$router.push({path:"/home",query:{}});

四、在JavaScript中，常用的绑定事件的方法有哪些？

1、行内绑定
<标签 属性列表 事件=”事件的处理程序” />，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。

<input type=’button’ onclick=’display()’ />

2、动态绑定
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）

<button id="btn2">js事件绑定</button>

 document.getElementById("btn2").onclick = show;
 document.getElementById("btn2").onclick = print;

//只能触发print方法，如果需要同时触发两个方法，只能使用事件监听

3、使用事件监听绑定事件

window.onload =function(){
console.log('onload执行...');
var oBtn = document.getElementById('btn1');
oBtn.addEventListener('click',function(){
console.log('btn1的点击监听事件被触发');
})
}

五、Bom对象有哪些，列举window对象

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；

六、src和href的区别

它们之间的主要区别可以用这样一句话来概括：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

href (Hypertext Reference) 超文本引用href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系。
例如当我们写：

<link href="style.css" rel="stylesheet" />

浏览器知道这是个样式表文件，html的解析和渲染不会暂停，css文件的加载是同时进行的，这不同于在style标签里面的内置样式，用@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。所以我们建议使用link而不是@import。

src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置。例如当我们写：

<script src="script.js"></script>

当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件。这就像是把js文件里的内容全部注入到这个script标签中，类似于img，img标签是一个空标签，它的内容就是由src这个属性定义，浏览器会暂停加载直到这个图片加载完成。这也是为什么要将js文件的加载放在body最后的原因（在前面）。