面试题篇

CSS

1. 盒子模型 (box model) :
  • IE 和 w3c 模型 包括

width height margin padding border content

  • W3C 和 IE 模型的区别

IE的content包含了 padding,border

2. box-sizing:border-box;作用

主要为了简化盒模型 让宽度 width 包含了border+padding+内容

/* 设置当前盒子为 标准盒模型(默认) */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box; 
element.style.width/height;缺点:通过这种方式,只能获取行内样式,不能获取内嵌或者外链的样式
window.getComputedStyle(element).width/height;(兼容 Chrome、火狐。是通用型方式)
element.currentStyle.width/height; (IE)

标准文档流中,竖直方向的margin不叠加,只取较大的值作为margin(水平方向的margin是可以叠加的,即水平方向没有塌陷现象)。

3. css选择器

标签选择器 id选择器 类(class)选择器 属性选择器 派生选择器(上下文选择器) 伪类选择器 属性选择器

4.css形状
// 圆角
.test1{
   width:50px;
   height:150px;
   border-radius : 50%;
   background:red;
}
// 椭圆
.test2{
  width: 50px;
   height: 50px;
   border-radius : 50%;
}

JS

this 指向问题

this 普通模式 指向window , 对象函数调用的时候指向的是所执行环境 ES6(严格模式下) 为undefined

this 作为对象方法调用

会指向这个对象,
多个对象嵌套 会指向最近的哪个值
多个函数嵌套 函数里面在嵌套一个函数的时候里面的函数会指向window

this 通过构造函数调用

通过new一个对象 会指向这个新对象,
如果return 一个对象的时候 this会变为 return的这个值,

call、apply区别

同:都是为了改变this的指向,将this指向为第一个参数
异:call(obj,a,b,c,d) apply(obj,[a,b,c,d]) call第二个参数一个接受很多个值, apply接受的是一个数组。

bind(obj)会生成一个新的函数,新函数永远指向第一次传入的那个对象,用bind改变的指向,无法用call,apply、bind去改变。

箭头函数 会从上一层作用域链继承 this 不能通过 call、apply改变他的指向。

link - this 指向问题

es6 了解

let,

作用域不同,循环中var i =0 ; 循环结束之后还在,let就undefined了

const, 常量,改变不了。

如果定义一个对象,或者数组,因为这两个本身是可变的所以会改变它, 用对象. 数组push 的方法可以改变,但重新赋值还是不行。

promise ,

箭头函数和普通函数的区别,

简化回调函数,修正this的指向,

module 模块化

export 输出 import输入

严格模式:

this的全局指向为 undefined
变量必须先声明后使用
不能有相同名字的属性
常量不能赋值,但是如果常量是一个对象或者数组的时候可以使用对象数组自带的方法赋值,但是不能直接用另一个对象或者数组赋值

首屏渲染优化的方法

首屏一定要快
滚屏一定要流畅
能不加载的先别加载
能不执行的先别执行
渐进展现、圆滑展现

js,css的优化,图片精灵处理的优化
模块化开发,按需加载,用intersectionObserver 去判断加载条件,但这样页面刚开始会空白这个时候用一个骨架屏了,在页面没加载完成的时候用图形进行占位,加载之后再替换 vue-skeleton-webpack-plugin,这个东西最主要就是提升了用户体验。首页图片尺寸为小图片,详情里面才为大图。适合自己的尺寸图片,webp格式会比正常图片下小1/3,element-ui 局部引用
将一个文件托管到速度快的服务器上。
把文件缓存下来,

vue-router 作用?

1.前端路由(编程式导航 · GitBook):让页面中的部分内容可以无刷新的跳转,就像原生APP一样。
2.懒加载(懒加载 · GitBook):结合异步组件以及在组建的created钩子上触发获取数据的ajax请求(数据获取 · GitBook)可以最大化的降低加载时间,减少流量消耗。
3.重定向(重定向 和 别名 · GitBook):可以实现某些需要根据特定逻辑改变页面原本路由的需求,比如说未登录状态下访问“个人信息”时应该重定向到登录页面。
4.美化URL(HTML5 History 模式):还记得前面网易云音乐的URL吗?

怎么做一个IntersectionObserver应用之实现元素随着页面滚动吸附在顶部的效果
JS函数的定义与调用方法

JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式

0.1+0.2 != 0.3 ?

不等于 为了数值更加精确造成精度的缺失, 一般在计算钱的时候乘以100,计算完成之后在除以100 原理就是转为整数计算,保留几位小数就全部化为整数计算之后在转为小数

什么是闭包?

要理解闭包,首先要理解javascript的特殊的变量作用域。
变量的作用域无非就两种:全局变量和局部变量。
javascript语言的特别之处就在于:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。
所以当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

// 解决了可以读取函数内部变量
function a(){
   var n = 10;
   function b(){
       console.log(n);
   }
   return b;
}
var c = a();
c();

优点:解决了可以读取函数内部变量,当我们需要定义一些变量,并希望这些变量一直保存在内存中但又不会 “污染” 全局的变量时,就可以用闭包来解决。
缺点: 因为嵌套的那个整个函数的变量都被保存在内存中,有可能会造成网页性能问题。

link 什么是闭包?link 阮一峰js闭包理解

什么是原型链?

因为每个对象和原型都有原型,对象的原型指向原型对象,
而父的原型又指向父的父,这种原型层层连接起来的就构成了原型链。
js里面的东西都是对象,任何一个对象,通过原型链,找到它上面的原型对象中的方法和属性,一层一层查找。

var A= {};
console.log(A.__proto__)
var B= function {};
console.log(B.prototype)

js里所有的对象都有proto属性,指向该构造函数的原型。
但只有函数有prototype属性,这个属性是个指针,指向一个对象,这个对象的用途包含了实例共享的属性和方法,我们把这个对象叫做原型对象。

什么是作用域?

js作用域(全局变量,局部变量)Alt

数组中的去重
var data = [1,2,2,3,4,5,5,4];
var newData = [];
for(var i=0;i<data.length;i++){
   if( newData.indexOf(data[i])  == -1 ){
      newData.push(data[i])
   }
}
console.log(newData);
5. 数组的方法有哪些?

sort() 排序 、
shift 删除数组第一个 、
unshift 最前面添加一个数据 、
push 最后面添加一个
join 数组转为字符串、

6. 字符串的方法

split(’,’) 字符串转为数组
toFixed(2) 保留两位小数

自我介绍

1-3分钟,方便面试官了解你,查看你的简历。
我叫***,来自山西临汾,从事前端开发三年左右,我上一家公司都是做的项目都是自己集团旗下网站的搭建,有小程序,移动端页面,积极参与开发用户体验的优化,项目需求,功能测试,代码优化,也做过直播、电商类型的小程序,h5页面开发。技术方面,使用到Weui ,layUI,vue技术栈,前端框架es6,webpack,node, git等前端技术,脾气品性好,不易和同事产生冲突,在前两家公司中,除了学习到一些新的技术的收获,业务能力,自学能力,为人处世方面也有了很大的提升,因为每入职一家公司的时候因为是新人,所以很把握每一次开发的机会,很注重和同事之间的和谐相处,因为很专注,认真工作和学习的时候忽视身边的一些声音,我对每一份工作都抱着认真负责,有责任心的态度。以上就是我的自我介绍。谢谢。

附件简历上面 应聘:职位-姓名-工作经验/应届毕业生

邮箱好记得: [email protected] / [email protected]

你有什么优点?

自信说出自己得优点,最好跟工作相关,一定要加例子。

你有什么缺点?

说出缺点并带上弥补方案

你的人生规划?

想看到你的成长的规划和学习的渴望。

你怎么看的加班?

如果是我自身能力的问题,我会努力提升自己,如果整个团队都再为了同一目标而努力,大家都会想着怎么去完成它,公司也会有相应部分的考量和奖赏的。加班这个问题,本质还是再与怎么提升员工的归属感、幸福感。

对公司技术团队有什么要求?

我感觉在每一个环境中都能学到不同东西,不论技术方面的提升和为人处世方面的提升,当每个人各司其职的时候,整个团队是积极向上的。所以做好自己,在自己工作之外,去维系同事之间的情感。

复试准备?

带一份面试作品

我听聂总监说新开产品线,您对员工关怀方面有什么考虑。比如到时候我们可能会996,夜间加班?您会考虑怎么提升员工的幸福感和归属感?

MVVM

Model-View-viewModel
数据类型
UI视图
监听数据和视图之间的交互
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

Vue技术栈

vue-cli工程

1、构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么?

webpack 打包发布
node 搭建环境

2、vue-cli 工程常用的 npm 命令有哪些?

npm install 下载node-modules 资源包的命令
npm run dev 启动vue-cli 开发环境的命令
npm run bulid 生产环境部署资源的命令
npm run build --report 生产环境部署资源文件大小的命令

3、请说出vue-cli工程中每个文件夹和文件的用处

build 用于配置webpack相关配置和脚本,开发中less,sass预编译,配置UI库
config 配置文件存放 用于区分开发环境和生产环境的区别,
dist 文件
node_modules 依赖的资源包
src 存放项目源码及需要引用的资源文件

asstes

static 静态资源文件夹
package.json 描述 用于 node_modules资源和启动、打包项目的npm命令行管理

4、config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置

build 对象下 对于 生产环境 的配置:

index:配置打包后入口.html文件的名称以及文件夹名称
assetsRoot:配置打包后生成的文件名称和路径
assetsPublicPath:配置 打包后 .html 引用静态资源的路径,一般要设置成 “./”
productionGzip:是否开发 gzip 压缩,以提升加载速度

dev 对象下 对于 开发环境 的配置:

port:设置端口号
autoOpenBrowser:启动工程时,自动打开浏览器
proxyTable:vue设置的代理,用以解决 跨域 问题

5、请你详细介绍一些 package.json 里面的配置

项目信息
工具的版本信息
打包执行程序
生产环境依赖资源包
开发环境依赖资源包

Vue核心知识点

1、对于Vue是一套渐进式框架的理解

简洁、高效、渐进式 不做别的事情,所有的都位置 数据驱动和组件系统去做 然后就是你可以在一个大系统里像引入jq一样引入他

2、vue.js的两个核心是什么?

双向数据绑定,组件,

3、请问 v-if 和 v-show 有什么区别

v-if 页面加载的时候不去加载,按需加载,减轻服务器压力
v-show页面渲染的时候渲染出来了,css diaplay none的效果

4、vue常用的修饰符

v-bind: :
v-on: @
v-for 、 v-if 、v-show、v-else

5、v-on可以监听多个方法吗?

可以,v-on:keyup.enter 按下的时候判断是不是按的 回车键

6、vue中 key 值的作用

用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快,但是这样也不总是符合实际需求。

7、vue-cli工程升级vue版本

前言:此命令谨慎使用,实际开发中如需升级建议直接使用 vue-cli 脚手架搭建,只需要了解即可!
//升级插件
npm-check-updates
npm install npm-check-updates -g

8、vue事件中如何使用event对象?

注意在事件中要使用 $ 符号

//html部分
<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
//js部分
showEvent(event){
    //获取自定义data-id
	console.log(event.target.dataset.id)
   //阻止事件冒泡
    event.stopPropagation(); 
    //阻止默认
    event.preventDefault()
}
9、$nextTick的使用

因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的。

10、Vue 组件中 data 为什么必须是函数
11、v-for 与 v-if 的优先级
12、vue中子组件调用父组件的方法

$emit

13、vue中 keep-alive 组件的作用

缓存页面,active 减轻服务器压力,提升用户体验

14、vue中如何编写可复用的组件?
15、什么是vue生命周期和生命周期钩子函数?

生命周期是指vue实例从创建开始,到初始化数据,编译模板,挂载Dom渲染,数据更新渲染,以及最后实例的销毁前后发生的一系列的行为就是vue的生命周期。

16、vue生命周期钩子函数有哪些?

beforeCreate/created mounte/mounted

17、vue如何监听键盘事件中的按键?

v-on:keyup.enter

18、vue更新数组时触发视图更新的方法
19、vue中对象更改检测的注意事项
20、解决非工程化项目初始化页面闪动问题
21、v-for产生的列表,实现active的切换
22、v-model语法糖的组件中的使用
23、十个常用的自定义过滤器
24、vue等单页面应用及其优缺点

优点:数据驱动,简洁,高效,组件化,轻量,
缺点:不利于seo,首次加载耗时相对较长,需要自己执行前进后退

25、什么是vue的计算属性?

computed

26、vue-cli提供的几种脚手架模板

3种,gulb 、webpack(常用)

27、vue父组件如何向子组件中传递数据?

props :[];

28、vue-cli开发环境使用全局常量
29、vue-cli生产环境使用全局常量
30、vue弹窗后如何禁止滚动条滚动?
31、计算属性的缓存和方法调用的区别
32、vue-cli中自定义指令的使用

猜你喜欢

转载自blog.csdn.net/qq_15238979/article/details/87866083