前端高频的面试题（1）

一：项目用vue 跨域是怎么解决的

vue脚手架 用config的index.js
通过ProxyTable来设置的。

二： 图片懒加载如何封装？

原理：懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延 迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可 视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了
可视区域在加载。

为什么要实现懒加载？
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说
图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很
经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载
出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视
区域的图片资源。

总结出来就两个点： 1.全部加载的话会影响用户体验 2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量

.懒加载的实现原理？
由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图

片资源而言的，所以这里的实现原理主要是针对图片。 大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏 览器是否发

起亲求就是根据是否有src属性决定的。 既然这样，那么我们就要对标签的src属性下手了，在没进入可视区域 的时候，我们先不给这个标签

赋src属性，这样岂不是浏览器就不会发送 请求了。

三： vue-router的实现原理

答：前端路由实现原理主要通过以下两种技术实现的

第一种：利用H5的history API实现
主要通过history.pushState 和 history.replaceState来实现，不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录[发布项目时,需要配置下apache]

第二种：利用url的hash实现
我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，路由里的 # 不叫锚点，我们称之为 hash，我们说的就是hash,主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新

四： 你对vuex 了解多少？

答：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素，主要流程：组件通过dispatch到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的数据做提前处理的.再说到辅助函数的作用.

五： 绝对定位跟相对定位的区别

一：绝对定位

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的父元素（即是设置了绝对定位或者相对定位父先元素）。如果元素没有已定位的父元素，那么它的位置则是相对于最初的包含（body）。

绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

二：相对定位

position: relative;相对定位：相对定位是相对于元素在文档中的初始位置；

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。