前端面试题（一）
目录
前言
一、css3实现布局的方式有哪些？
1.flex布局
2.grid布局
二、jquery的扩展机制？
三、jquery动画和css实现动画的本质区别？
四、不使用css的动画，如何实现盒子从左到右移动？
五、使用过的框架？
六、vue能否兼容ie8、ie9?
七、如何实现富文本？
八、如何实现响应式布局？
1.媒体查询
2.百分比
3.vh/vw
4.rem
5.flex
九、加快网站速度？
十、F12和查看源码有什么不一样？
十一、如何提升vue应用首屏加载速度？
十二、设计一个响应式网站要考虑什么？
十四、交互效果存在的目的是什么？
总结
前言
这是去一家公司面的，公司主要是作PC端，使用的jquery和js比较多，所以问的技术大多偏向于基础，记录一下把~
一、css3实现布局的方式有哪些？
我比较常用的是flex布局、grid布局、float布局、绝对布局
1.flex布局
一维布局，适用于局部，例如导航布局
是比较常用的布局，兼容性比较好，适用于绝大多数浏览器。
再父盒子上设置diaplsy：flex，确定要进行flex布局
再设置布局方向flex-direction，可选row(默认) 或者colunm
在设置主轴对齐方式justify-content，可以指定space-between（两端对齐，间距均分） ，或space-around（每一项左右间距都相同）等。
可设置超出是否换行flex-warp:可选warp或nowarp
可是设置每一项子元素的位置align-item，可选flex-end 、flex-start 、center等
可设置指定子元素的位置align-self,可以设置flex-end 、flex-start 、center等。
2.grid布局
二维布局，适用于大型布局、整个页面布局
首先设置父盒子display:grid；
再设置行或列的大小grid-template-rows/columns ，这里可以直接设置px值，有几个就设置几个，也可以使用一些函数：
- 如果你需要声明相同的值可以使用repeat（）函数，例：repeat(3,50px) 等价于 50px 50px 50px
- 如果你需要让他自适应浏览器，可以使用autofill,如 repeat(autofill，200px)表示列宽为200px ,适应浏览器
- grid还提供了一个单位 fr，表示剩余空间等分，例：200px 1fr 2fr 表示，除去200px后剩余的那部分分为3等份，分别占1/3、 2/3
- 如果你需要指定最大值和最小值，可以使用minmax（min,max）表示这一项再着之间
- 如果你需要自适应浏览器，可以使用auto，如：200px auto 200px表示左右固定，中间自适应
如果我们设置grid-template-rows/columns的时候只设置了三项，但实际中我们有六项，那多出来的三项我们称之为隐式网格，我们可以通过grid-auto-rows/columns设置隐式行或列的值，用法和grid-template-rows/columns一样
可以通过grid-gap:row column 设置每一项的之间的间隔，也可以通过grid-row(columu)-gap分别设置
可以通过grid-template-areas指定网格区域，如：
注：. 表示空白
以下代码表示：有三行 三列，第一行第二个项为空白内容，第三行第一项为空白内容
" header . header "
"content content content"
" . footer footer"grid-template-areas需要搭配grid-area使用，使用方如下：
以下代码表示content这个类指定了content这个区域
.content{
grid-area:content
}
我们还可以设置列或行上是否自动grid-auto-flow :row/column 表示先行后列或先列后行
可以通过设置dense打乱顺序，用合适的项填充空白区域，例如：grid-auto-flow :row dense
和flex布局类似，grid也有内容和项的布局之分，如果要设置内容的布局，使用justify-content设置内容再区域内横向位置，align-conten设置纵向位置，他们的值都有：start、center、end、space-around（左右间距相等，边框一份）、space-between（两端对齐，中间间距相等） 、space-eveny（等分）
除了内容布局，每一项也有布局，使用justify-item设置每一项的横向位置，使用align-item设置每一项的纵向位置，他们都有以下值：start、center 、end、stretch(铺满容器)
我们还可以设置每一项的其实位置，grid-column-start/end设置这一项的起始位置（网格线位置），如果有层级问题，可以用z-index设置层级
最后我们还可以单独设置每一项的位置justify-slef设置横向位置、align-self设置纵向位置，它的可选值和justify-item一样，为：start、center、end、stretch
最后，grid布局使用于ie10之后的浏览器，之前的兼容性不太友好。
这里参考啦这篇文章：一文搞懂Grid 布局，写得非常好，想详细了解得可以看看。
二、jquery的扩展机制？
jquery我们都知道，它很强大，他提供了很多方法让我们可以直接的去操作dom，但是它的强大之处并不局限于此，还有它的扩展机制。
jquery.extend和jquery.fn.extend就是扩展机制的核心，他们的区别在于，jquery.extend提供的式静态扩展，我们可以通过$.ajax()方法名来调用（就类似于定义了一个方法，需要调用才会执行）；jquery.fn.extend是为jquery类添加成员函数（可以理解为再jquery原型上添加了这个方法，所有的元素都能调用），我们可以用$(‘li’).css()调用
注：自己写的函数，如果不在最后retrun this 那将不能进行链式编程
三、jquery动画和css实现动画的本质区别？
jquery其实就是改变css的现实隐藏等等，本质上还是操纵css，知识jquery将它封装得更简单，我们直接调用方法就可以啦
四、不使用css的动画，如何实现盒子从左到右移动？
我们都知道，最开始css是没有annimation tarnsition这类的动画的，那我们最开是的jquery是如何实现动画的呢。
使用定时器，固定时间为它的left增加值，从而实现简单动画效果
五、使用过的框架？
bootstrap是基于html/css/js的前端框架，实现布局
vue是基于js的渐进式的构建框架，用它实现组件化
jquery是可以直接对dom进行操作的一个js库
六、vue能否兼容ie8、ie9?
vue2官方指出兼容ie9+,这是因为vue2中的主要运用了object.defintProroty()这个函数来实现双向绑定，但是ie9及以下的并不支持这个方法，所以不兼容。
vue3官方指出不支持ie。
七、如何实现富文本？
这篇不错，可以去看看：利用 javascript 实现富文本编辑器
八、如何实现响应式布局？
首先，有很多中方法可以实现响应式布局
1.媒体查询
使用媒体查询实现，写多套代码，不同设备下加载不同的代码。所以缺点很明显，代码量大，影响加载速度。
2.百分比
使用百分比来代替px，所以需要我们换算，也很麻烦。不太建议用
3.vh/vw
css3新增的单位，根据屏幕宽高来，可以配合计算模式calc(100vw-20px)来使用，这个非常好用。
4.rem
相对单位，相对于根字体。所以我们可以监听设备，修改根字体大小即可。
5.flex
弹性布局，这个不用多说，但是需要设置具体的值。
九、加快网站速度？
1.合并js.css模块，见晒代码体积
2.使用spries （雪碧精灵图），减少图片资源体积
3.引入的js使用cdn，加快加载速度
4.压缩js和css文件，在请求头上设置Accept-Encoding：gzip/*
十、F12和查看源码有什么不一样？
这个需要对浏览器加载页面的步骤很熟悉。
浏览器加载步骤如下：
- 输入地址，按下enter
- 解析url
- 解析DNS域名
- 客户端向服务端发起请求‘
- 服务端接收请求并返回数据
- 客户端解析数据并渲染至页面
查看源码显示的是第五步，接收到客户端返回的数据
F12是第六步解析之后的代码
十一、如何提升vue应用首屏加载速度？
- 使用路由懒加载
- 在config/index.js中使用
productionSourceMap：false,避免生成map文件 - 在index.html中引入cdn地址，减少服务器压力
- 请求头开启accept-encoding：gzip，压缩资源
- 写代码的时候要合理运用v-if和v-show，尽量少用全部变量、定时器记得清除、闭包记得最后指向null
十二、设计一个响应式网站要考虑什么？
需要考虑浏览器兼容性啊，布局不能太复杂啊，移动设备上要考虑手操作啊等。
十四、交互效果存在的目的是什么？
开发式命题，主要答用户体验感上就行
总结
以上就是今天要讲的内容，这篇面试可能比较基础，因为这个岗位还有设计方面的要求，所以对前端要求也不是很高，好啦，今天就到这里啦，拜拜~