2020年底前端面试总结

peterpanya

已于 2022-03-10 09:27:37 修改

阅读量482

点赞数

分类专栏：前端文章标签： javascript vue.js css html html5

于 2020-12-09 18:50:54 首次发布

本文链接：https://blog.csdn.net/peterpanya/article/details/110926811

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景

一、html
二、css
三、js
四、Vue全家桶
五、浏览器
六、webpack
七、跨域
八、ajax
九、性能优化
十、趣味题
十一、职业规划

一、html

HTML语义化是指从代码上展示页面的结构,而不是从最终视觉上来表现结构
HTML5新加的标签:header、footer、asid、nav、section、article、caption、thead、tbody、tfoot、h1~h6(重要性递减)
盒子模型： IE盒子模型：宽度 = border2+content+padding2
标准盒子模型：宽度 = content
水平垂直居中(高频)

// 方法一：flex布局
display: flex;
justify-content: centent;
align-items: centent;

// 方法二：table布局
display: table;
vertical-align: centent;

// 方法三:已知元素宽高
position： absolute；
width：100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;

// 方法四：未知元素宽高
position：absolute；
top：50%；
left： 50%;
transform: translateY(-50%) stanslateX(-50%)

// 方法五：行内元素
display：inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;

// 方法六： 块元素
display：block；
width：100px;
height: 100px;
margin: 0 auto;
line-height: 100px;

重排（回流）&重绘
重排就是页面的元素尺寸、结构或者某些属性发生变化时，浏览器重新渲染部分或全部页面的情况
重绘就是页面元素颜色等不会改变它在文档流的位置的变化
频繁的重排和重绘会引起性能问题
避免方法：
1.减少table布局的使用
2.将元素设为display：none；因为这个属性不会引发重排或重绘
3.减少DOM操作
4.对复杂的动画元素使用绝对定位，使它脱离文档流
5.减少使用行内样式
重排一定会引起重绘，重绘不一定会引起重排
清除浮动的方法
1.给要清楚浮动的元素增加样式clear
2.给该元素的父元素的结束标签前加入一个清除浮动的块级元素
3.给该元素的父元素的结束标签前加入一个清楚浮动的伪元素
4.父元素添加overflow：hidden样式清除浮动

二、css

引入css样式link和@import的区别
link是css的属性，会在页面加载时加载css，而@import是js的属性，会在页面加载完之后加载css
css3新特性
1.css3的新选择器
E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式
E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素
E:empty 选择没有子元素的每个E元素
E:target 选择当前活动的E元素
::selection 选择被用户选取的元素部分
属性选择器
E[abc*=“def”] 选择adc属性值中包含子串"def"的所有元素
2.文本
text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色
text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
text-wrap：规定文本换行的规则
word-break 规定非中日韩文本的换行规则
word-wrap：对长的不可分割的单词进行分割并换行到下一行
white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行
3.边框
border-raduis 边框的圆角
border-image 边框图片
.border-image {
border-image-source:url(images/border.png);
boder-image-slice:27;
border-image-width:10px;
border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边
}
4.背景
rgba
backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片
5.渐变
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)
radial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)
6.多列布局
column-count
column-width
column-gap
column-rule
7.过渡
transition
transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔
transition-duration:2s; //过渡持续的时间
transition-timing-function:ease;
transition-delay:5s //过渡延迟5s进行
8.动画、旋转
animation
transform ：translate（x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew（倾斜）
9.flex布局
10.@media媒体查询
选择器的优先级:
!important > ID选择器 > 类选择器 > 标签选择器

三、js

数据类型：
1.基本数据类型:boolean、string、number、undefined、null、symbol（ES6新增）
2.引用数据类型：Object（function、array、data）
setTimeout、setInterval：
setTimeout：在设定时间后只执行一次
setinterval：在设定时间后可重复执行，属于重复定时器
判断数据类型
1.typeof():对于引用类型只能判断出是Object
2.instanceof()
3.object.prototype.tostring.call()
防抖、节流
防抖：在持续触发事件中，如若触发则重新计时，在一段时间后没有再触发则调用一次
节流：在设定的时间段内不管触发事件多少次，都只调用一次
深浅拷贝
浅拷贝：只复制了值，但是对象在堆的地址还是指向原对象的地址，所以新对象改变原对象也会随着改变
深拷贝：新对象重新在堆开辟了一个地址，新对象改变不影响原对象
深拷贝实现：

// 方法一
JSON.parse(JSON.stringify(Object))；

// 方法二（当只有一层对象）
Object.assign(newObject,oldObject)

// 方法三（有多层对象使用递归）
// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}

原型
每个对象都有原型（proto）属性,而函数特有prototype属性，prototype的所有方法和属性都会被构造函数的实例继承，所以公用的方法可以写到prototype对象属性上。
原型链
每个对象都有proto属性，而proto属性也是个对象，所以它也有proto属性，因此当访问一个属性或方法时，它会沿着proto层层往上找
es6新特性：
1.promise
promise是一个处理异步任务的对象，它的主体是同步的，对象和函数的区别就是对象可以保存状态。它有三种状态：pending、resolve、reject
2.箭头函数：this指向父级
3.解构：从数组或对象取值并赋值给独特的变量
4.新增基本类型：symbol
5.map、set结构：map相当于对象，是key、value结构，value可以为任意结构；set相当于数组，但其里面的值不可重复，
6.apply（）、bind（）、call（）：call(对象，数据列表)、apply(对象，数组)、bind(对象，数据列表)，bind()返回函数，所以call()、apply()是立即生效的，而bind()是延迟生效的
7.let、const：不存在变量提升，const定义常量后不可修改
8.模板字符串：用倒引号连接字符串
9.for…of…循环：无需使用索引
this：绑定函数的执行上下文，谁调用它，它就指向谁
严格模式下this指向undefined；非严格模式下this指向window；箭头函数的this指向它的上级作用域
给字符串扩展方法，在原型链prototype上增加相应的方法

四、Vue全家桶

1.vue

数据的双向绑定：通过数据劫持结合发布-订阅者模式实现，数据劫持是用过Object.defineProperty()设置数据的的setter（）、getter（）方法实现的
插槽slot
Vue的生命周期
beforeCreate（初始化界面前）
created（初始化界面后，拿到data，props，methods，computer，watch）
beforeMount（渲染DOM前）
mounted（渲染DOM后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（卸载组件前）
destroy（卸载组件后）
父子组件通信
父传子：prop
子传父：$emit
同级：eventbus、vuex
对于MVVM的理解：
model：是数据模型，定义业务逻辑
viewmodel：将数据模型和UI组件连接起来，不需要手动操作DOM，只要关业务逻辑处理
view：代表UI组件
第一个页面加载会触发那些钩子：beforeCreate、created、beforeMount、mounted
新增已定义且绑定的属性时，需要使用.$set(绑定对象，新增属性，属性值)新增
keep-alive

2.vueX

1.页面上调用action的方法，促使mutations去改变state中的数据
2.vuex文件的结构:mouldle/store/state/getter/mutation/action/
mutation只能写同步方法,异步方法写在action里

2.vue-router

router和route的区别
router为vue-router的实例
route是正在跳转的路由对象,里面有ame,path,params,query等属性
hash模式和history模式：
1.hash模式：#号及后面的字符称之为hash，请求时不会随着URL请求到服务器
2.history模式：有pushState()、replaceState()两个可对浏览器历史记录栈进行修改的方法，还有popStete()属性可监听事件的状态变更
路由传参

// 方法一：
// vue:
$router.push({'path:/url/${id}'})
// router
{
path: '/url/:id',
name: url,
component: url
}
// 使用
this.$route.params.id

// 方法二：
// vue：
$router.push({
name: url,
params: {
id: id
}
})
// router
{
path: '/url/:id',
name: url,
component: url
}
// 使用
this.$route.params.id

// 方法三：
// vue
$router.push({
path: '/url',
query: {
id: id
}
})
// router
{
path: '/url',
name: url,
component: url
}
// 使用：
this.$route.query.id

五、浏览器

兼容性问题
1.不同浏览器默认的内外补丁不同：设置* ｛margin：0；padding：0；｝
2.ie6元素设置了float又设置了margin后会出现双边距：设置display：inline
3.ie6、ie7当标签高度小于10px时，显示的高度会超出设置的高度：设置overflow: hidden;或设置line-height小于设置的高度
4.图片之间默认有间距：使用float给图片布局
事件循环机制（event loop）
同步任务在主线程执行，在主线程之外还有个任务队列用于存放异步任务；当主线程的任务执行完之后，异步任务进入主线程执行；异步任务又分宏任务和微任务；会先执行微任务后执行宏任务；
宏任务：script、定时器setTimeout、setinterval
微任务：promise的then属性里的方法、perocess.nextTick()、mutationObserver

// 示例：
console.log('script start');

setTimeout(function() {
  console.log('settimeout');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('then1')
})

console.log('script end');
// 最终打印
script start
promise1
script end
then1
settimeout

http
1.http请求由什么组成:请求行、请求头、请求体
1.从请求到页面出来发生了什么
在浏览器的地址栏中敲入了url -> 域名解析 -> 服务器处理请求 -> 浏览器处理 -> 绘制网页
客户端缓存（cookie、sessionStorage、localstorage）
cookie: 服务器生成的数据,需要随请求发送到服务器,有数据大小限制,可设置存在的时长
sessionStorage:客户端生成的数据,保存在客户端,无需随请求发送到服务器,浏览器关闭则失效(刷新页面不会失效)
localStorage:客户端生成的数据,保存在客户端,无需随请求发送到服务器,永久保存,也可设置失效时间
内存泄露
怎么会导致内存泄露:
1.局部变量会在函数调用完后销毁,但全局变量会保存到浏览器页面关闭之前,所以
过多使用全局变量也会导致内存泄露
2.闭包
3.没有清理的DOM元素引用
4.未清除的定时器
怎样避免内存泄露
1.减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
2.注意程序逻辑，避免“死循环”之类的；
3.避免创建过多的对象原则：不用了的东西要及时归还。
浏览器内核:
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

六、webpack

七、跨域

概念：因浏览器的同源策略，当请求路径的域名、协议、端口号三者有不同的话则不允许资源共享
解决方法：

使用nginx在nginx.conf文件里配置反向代理
在后端通过webserver向第三方请求服务，提供本地前端接口
使用jsonp(只支持get请求和http请求)
document.domain + iframe
动态创建script
Vue-cli2.0在config文件夹下的index.js文件里更改跨域配置

proxyTable: {
      '/api': { // 请求的代称，写在Axios里的BaseUrl
        target: 'http://localhost:8083',  // 真实请求URl
        changeOrigin: true, // 允许跨域
        pathRewrite: {  // 替换，通配/api的替换成/
          '^/api': '/'
        }
      }

Vue-cli3.0在根目录下创建vue.config.js文件配置跨域

八、ajax

手写ajax请求

/*
      创建 XMLHttpRequest 对象 ；XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
    */
// var xhr = new XMLHttpRequest();

var xhr = null;
// 检查浏览器是否支持 XMLHttpRequest 对象
if(window.XMLHttpRequest){
  // 若支持则创建 XMLHttpRequest 对象
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr = new XMLHttpRequest();
}else {
  // 若不支持创建 ActiveXObject
  // IE6, IE5 浏览器执行代码
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 设置请求行，向服务器发送请求；用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据。
// open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。
// method：请求的类型；GET 或 POST；
// url：文件在服务器上的位置；
// async：true（异步）或 false（同步）
xhr.open('GET','http://ajax.com/phpFile/time.php',true);

// post 请求需要设置请求头
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 设置请求体；
// send(string); 将请求发送到服务器。string：仅用于 POST 请求
xhr.send(null); // get请求参数可不填或置空

/* 设置响应HTTP请求状态变化的函数 */
// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
xhr.onreadystatechange = function(){
  // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  // 0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪
  // console.log(this.readyState);

  if(this.readyState != 4) return;
  
  // 获得来自服务器，字符串形式的响应数据。
  console.log(this.responseText);
}

怎么中断ajax请求：
1.设置超时时间，让ajax自动断开
2.手动调用xmlhttpRequest对象的abort方法中断请求

九、性能优化

静态资源合并压缩
静态资源缓存（浏览器缓存）
css放head中，js放body后
图片懒加载
减少对DOM的操作
事件节流
减少使用闭包、递归
避免死循环

十、趣味题

1.五个人中只有一个人说真话,其他四个时真时假,但有个规律,四个人第一句为假话时第二句则一定为真话,反之第一句为真话时第二句则为假话,问:只问两句话(可问同一个人也可问不同人),怎么找出那个说真话的人
2.一家五口人,要过一座桥,只有一盏灯(30秒熄灭)一次只能过两个人,五人分别过桥需要的时间为1S、3S、6S、8S、12S,请问怎么过桥才能30秒内全部通过

十一、职业规划

peterpanya

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2020年底前端面试总结

背景前言一、html二、css三、js四、Vue全家桶1.vue2.vueX2.vue-router五、浏览器六、webpack七、跨域八、ajax九、性能优化前言从上家公司失业到现在40天了,找工作到今天也找了一个月整,终究是流下了没有技术的泪水.毕业之后本来是Java开发,但是进了公司做的项目一言难尽.做了一年多只接触了两个人力项目,一个最新Vue框架的还中途流产了,另一个Java没得写,天天写最老最臭连百度资料都百度不到的angularJS.到现在面了十几二十家公司也没见过哪个说要用这个
复制链接

扫一扫

专栏目录