前端面试题（一）

目录

前言

一、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和查看源码有什么不一样？

这个需要对浏览器加载页面的步骤很熟悉。

浏览器加载步骤如下：

1. 输入地址，按下enter
2. 解析url
3. 解析DNS域名
4. 客户端向服务端发起请求‘
5. 服务端接收请求并返回数据
6. 客户端解析数据并渲染至页面

查看源码显示的是第五步，接收到客户端返回的数据

F12是第六步解析之后的代码

十一、如何提升vue应用首屏加载速度？

1. 使用路由懒加载
2. 在config/index.js中使用productionSourceMap：false,避免生成map文件
3. 在index.html中引入cdn地址，减少服务器压力
4. 请求头开启accept-encoding：gzip，压缩资源
5. 写代码的时候要合理运用v-if和v-show，尽量少用全部变量、定时器记得清除、闭包记得最后指向null

十二、设计一个响应式网站要考虑什么？

需要考虑浏览器兼容性啊，布局不能太复杂啊，移动设备上要考虑手操作啊等。

十四、交互效果存在的目的是什么？

开发式命题，主要答用户体验感上就行

---

总结

以上就是今天要讲的内容，这篇面试可能比较基础，因为这个岗位还有设计方面的要求，所以对前端要求也不是很高，好啦，今天就到这里啦，拜拜~