金九银十--前端常见面试题（一）开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题: 主要考察前端技能基础是否扎实,是否能够将前端知识体系串联；一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。

题目的答案提供了一个思考的方向，答案不一定正确全面，有错误的地方欢迎大家请在评论中指出，共同进步。

v-show和v-if有什么区别什么时候使用最好

区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

带宽增加，什么方式去考虑问题

病毒在服务器上安装杀毒软件，进行杀毒。
网络攻击登陆阿里云管理控制台，查看云盾中的防护 DDOS 攻击是否调整好阈值，并核实是否开启CC防护。
存在耗资源进程任务管理器>性能>资源监控器>网络>查看
爬虫站点是否存有 MP3，flv，swf 等大文件被频繁访问下载建议减少这些文件
网站规模大建议升级带宽

网站性能优化

http 请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，控制项目资源的 dns 解析在2到4个域名，提取公告的样式，公共的组件，雪碧图，缓存资源，
压缩资源，提取公共资源压缩，提取 css ，js 公共方法
不要缩放图片，使用雪碧图，使用字体图表（阿里矢量图库）
使用 CDN，抛开无用的 cookie
减少重绘重排，CSS属性读写分离，最好不要用js 修改样式，dom 离线更新，渲染前指定图片的大小
js 代码层面的优化，减少对字符串的计算，合理使用闭包，首屏的js 资源加载放在最底部

闭包优缺点

作用:读取函数内部的函数,始终保持在内存中

优点:变量长期保持在内存中,不会清除,避免全局污染

缺点:增大内存使用,导致内存泄漏

网页性能问题

你知道内存泄露吗

内存泄露导致网站/软件反应迟缓,崩溃,高延迟

原因：变量使用没有被回收,造成了内存泄漏,一般由定时器,闭包导致

vue如何处理生命周期 beforeDestroy 销毁前做处理

react如何处理生命周期 componentWillUnmount 销毁做处理

link标签和@import的区别

1. link标签属于html标签,@import是css提供的方式

2. link除了加载css，还可以做rss(简易联合)，rel属性,@import只能加载css

3. link引用的css同时被加载，@import引用的css等到页面加载完成后再加载,

4. link的权重的大于@import

5. 兼容性的差别 @import不兼容IE5以下的,link完全兼容

es5和es6的区别

1.引用

es5:require

es6:import

2.声明变量

es5:var

es6:let const

3.函数定义

es6：使用箭头函数 =>

4.set集合和map集合

set 无重复列表

map 键对值列表

5.es6新增一个数据类型 symbol:唯一ID,独一无二

6.promise

git常用命令

git clone 下载项目

git add 添加文件

git rm 删除

git commit 提交到仓库

git init 新建一个git代码库

nginx的好处

1.高并发连接

2.内存消耗

3.成本低

4.负载均衡

5.反向代理

axios的请求方式

get：获取数据

post：提交数据（表单提交+文件上传）

put：更新数据（所有数据推送到后端）

patch：更新数据（只将更改的数据推送到后端）

delete：删除数据

React Native的本地存储

Asyncstorage 对应app是全局的

vue为什么要有计算属性

把数据缓存起来了,提高性能

React的初始化写在哪里

consructor()

js的原型和原型链

原型：任何对象都有原型对象,主要用来继承,只存在函数变量中

原型链:两个类型的继承,js查找对象属性,如不存在，在原型链上查找

跨域问题，谁限制的跨域，怎么解决

浏览器的同源策略导致了跨域
用于隔离潜在恶意文件的重要安全机制
[jsonp ，允许 script 加载第三方资源]segmentfault.com/a/11…
nginx 反向代理（nginx 服务内部配置 Access-Control-Allow-Origin *）
cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息
iframe 嵌套通讯，postmessage

js 自定义事件实现

原生提供了3个方法实现自定义事件
createEvent，设置事件类型，是 html 事件还是鼠标事件
initEvent 初始化事件，事件名称，是否允许冒泡，是否阻止自定义事件
dispatchEvent 触发事件

get与post 通讯的区别

Get 请求能缓存，Post 不能
Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。
Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术
URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的
Post 支持更多的编码类型且不对数据类型限制

ES6模块与CommonJS模块的差异

CommonJs 模块输出的是一个值的拷贝，ES6模块输出的是一个值的引用
CommonJS 模块是运行时加载，ES6模块是编译时输出接口
ES6输入的模块变量，只是一个符号链接，所以这个变量是只读的，对它进行重新赋值就会报错

金九银十--前端常见面试题（一）