前端面试问题总结（偏向vue）

1.浏览器输入地址到显示的过程

TCP/IP协议是Internet最基本的协议,其中应用层的主要协议有Telnet、FTP、SMTP等，是用来接收来自传输层的数据或者按不同应用要求与方式将数据传输至传输层；传输层的主要协议有UDP、TCP，是使用者使用平台和计算机信息网内部数据结合的通道，可以实现数据传输与数据共享；网络层的主要协议有ICMP、IP、IGMP，主要负责网络中数据包的传送等；而网络访问层，也叫网路接口层或数据链路层，主要协议有ARP、RARP，主要功能是提供链路管理错误检测、对不同通信媒介有关信息细节问题进行有效处理等。

2.Vue数据双向绑定原理
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

3.Vue相较于jquery的优点有哪些
Vue的核心优势就是减少DOM操作、双向数据绑定和组件化3个方面。
1、减少DOM操作

2、双向数据绑定

3、组件化

组件化优点：1.提高开发效率 2.方便重复使用 3.简化调试步骤 4.提升整个项目的可维护性 5.便于协同开发

4、js如何延迟加载
1.defer属性
2.async属性
3.动态创建DOM方式 (使用的最多)
4.使用Jquery的getScript()方法
5.使用setTimeout延迟方法的加载时间
6.让js最后加载

5、.如何理解v-model实质是一个语法糖
基本：
1:主要用于 input，select，textarea，component
2:修饰符：
.lazy- 取代input监听change事件
.number- 输入字符串转为数字
    .trim- 输入首尾空格过滤
语法糖：
此时mes值就与input的值进行双向绑定
实际上上面的代码是下面代码的语法糖。

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 mes。从而实现了v-model

6、Vue.nextTick()有什么用
为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

7、怎么防止请求到缓存，如加载jquery文件之类的
1、防止jQuery的ajax请求缓存里的数据

2、解决浏览器加载js文件有缓存的方法
浏览器加载js文件是根据路径加载，首先根据路径在缓存里查找。比如

那最常用的一种解决方案就是在路径后面加一个随机数，比如

这样子，浏览器在下次加载的时候发现路径变了，等于在缓存里找不到，就会重新加载rank.js文件的内容了，从而实现效果更新。
浏览器缓存机制：
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

8、怎么实现图片异步加载
其实实现图片异步加载的核心思路十分简单，就是通过判断当图片元素是否出现在视窗范围内后，则去加载图片资源，否则不加载