前端技术面试大全

快速搞定前端技术一面匹配大厂面试要求迅速建立初中级前端面试（0~2年）JS知识体系掌握解决面试题的思路与技巧知识点介绍CSS:布局定位移动端响应式ES语法:原型原型链作用域闭包异步单线程Web APIDOM BOMAjax跨域事件存储开发环境版本管理调试抓包打包构建运行环境页面渲染性能优化Web优化网络通讯headersRestful API缓存策略1.0 如何思考面试问题拿到一个面试

以码平川

3132人浏览 · 2022-03-13 12:47:30

以码平川 · 2022-03-13 12:47:30 发布

快速搞定前端技术一面匹配大厂面试要求

迅速建立初中级前端面试（0~2年）JS知识体系掌握解决面试题的思路与技巧

知识点介绍

CSS:

布局
定位
移动端响应式

ES语法:

原型原型链
作用域闭包
异步单线程

Web API

DOM BOM
Ajax跨域
事件存储

开发环境

版本管理
调试抓包
打包构建

运行环境

页面渲染
性能优化
Web优化

网络通讯

headers
Restful API
缓存策略

1.0 如何思考面试问题

拿到一个面试题,第一时间看到 ->考点
如何看到做不完的题海 -> 不变应万变(题可变,考点不变)
如何对待接下来的题目 -> 题目到知识点,再到题目

例如:

typeof能判断的类型
考点:JS变量类型,值类型与引用类型的区别,值拷贝和深拷贝
何时使用===何时使用==
考点:强制类型转换,(字符串拼接的时候有字符串转换,逻辑判断的时候有字符串转换)
window.onloand和DOMContentLoaded区别
- 考点:页面加载过程
JS创建10个<a>标签,点击弹出对应的序号
考点:JS作用域
手写节流throttle和防抖debounce
考点:性能,体验优先
promise解决了什么问题?
考点:JS异步

2.0 前端知识体系

什么是知识体系?

高校学习三部曲:找准知识体系;刻意训练;及时反馈
知识体系:结构化的知识范围
涵盖所有知识点:结构化,有组织,易拓展

从哪些方面梳理

W3C标准
ECMA262标准
开发环境
运行环境

知识体系

CSS基础知识
JS基础语法
JS-Web-API
开发环境
运行环境HTTP协议

面试前的准备

2.1 面试前需要你准备什么

先不急于学习知识
先了解一下什么是面试
面试前需要准备什么
面试的环节和流程
JD分析
如何写简历
准备工作和注意事项

投递简历的几种方式

什么是面试
如何拿到简历
面试流程

什么是面试?

经过组织者精心设计
以交谈和观察为主要手段
面试是评价知识,能力和经验,综合素质的手段

在面试中一定要保持积极乐观向上的心态和表情,

面试流程

一面 (基础知识)
二面(交叉面试) (ABC部门一块把关)
三面 (组织leader,对产品有什么样的想法)
hr面试 ()

校招和社招的区别

校招看中基础知识和能力,主要在一面
社招看经验,主要在二面,(基础知识过关就行)

2.2 JD分析

JD是什么
JD分析的思路
案例
JD是用人单位发布的招聘信息
职位描述
岗位要求

从JD中能看到什么

工作内容
技术栈
经验要求

不要过于在意JD

JD是hr发布的
hr和技术人员可能会沟通不及时
不能完全相信JD的要求

2.3 如何写简历

简历包含的内容
简历中需要注意的问题
案例
简历就行高考作文—阅卷时间非常的短
内容简介
直击重点,表现出自己的优势
- 会一点java和后端知识

2.4 简历案例分析

专业技能3~5条
项目部分,注意格式

修改过的一个简历

熟悉js,Es6,H5新特性,CSS3,熟悉jQuery Bootstrap
vue element-UI,
webpack

2.5 面试前的准备工作

看JD,时候需要临时准备一下
打印纸质简历,带着纸和笔
最好带着自己的电脑,现场可能手写代码
要有时间观念,如果迟到或者推迟,要提前说
衣着适当,不用正装,也不要太随意了
能加班吗?-----------能!除非你特别自信,能找到其他机会
不要挑战面试官,即便他错了
遇到不会的问题,要表现出自己积极的一面

第1章CSS 面试题

1.0 HTML面试题

如何理解HTML语义化?
默认情况下,哪些HTML标签是块级元素,哪些是内联元素?

- 让人更容易读懂(增加代码可读性)
- 让搜索引擎更容易读懂(SEO)

块状元素&内联元素?

- display:block/table; 有div h1 h2 table ul ol p等// 独占一行的元素
- display:inline/inline-block; 有span img input button等

2.0 CSS面试题

布局
定位
图文样式
响应式
CSS3

3.0 CSS 布局问题

盒模型的宽度如何计算?
margin纵向重叠的问题
margin负值的问题
BFC理解和应用
float布局的问题,以及clearfix
flex画色子

offsetWidth = (内容宽度 + 内边距 + 边框),无外边距
因此答案是122px
box-sizing 属性可以被用来调整这些表现:

content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的<p></p>也会重叠,也会忽略
- 答案是15px

margin负值问题

对margin的top left right bottom设置负值,有何效果?

- margin-top和margin-left负值,元素向上,向左移动
- margin-right负值,右侧元素左移,自身不受影响
- margin-bottom负值, 下方元素上移,自身不受影响

BFC理解和应用

什么是BFC?如何应用?

- Block format context, 块级格式化上下文
- 一块独立渲染区域,BFC内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
- float不是none
- position是absolute 或 fixed
- overflow不是visible
- display是flex, inline-block等

BFC的常见内容

- 清除浮动

float布局

如何实现圣杯布局和双飞翼布局(PC端比较常用的一套布局方式,经典的float布局方式)
手写clearfix

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣杯布局</title>
    <style>
      body{
          min-width: 550px;
      }
      #header{
          text-align: center;
          background-color: #f1f1f1;
          height: 50px;
      }
      #center{
          background-color: #ccc;
          width: 100%;
          text-align: center;
      }
      #left{
          /* 相对于自身移动,不影响任何元素 */
          position: relative;
          background-color: yellow;
          width: 200px;
          /* 为了让left和center横向重合 */
          margin-left: -100%;
          right: 200px;
          text-align: center;
      }
      #right{
          background-color: red;
          width: 150px;
          /* 外边距设置负值的原理是,元素本身正在缩小 */
          margin-right: -150px;
          text-align: center;
      }
      #footer{
          clear: both;
          text-align: center;
          background-color: #f1f1f1;
          height: 50px;
      }
      /* 开始进行浮动 */
      #container .column{
          float: left;
          height: 500px;
      }
      #container{
          padding-left: 200px;
          padding-right: 150px;
      }
    </style>
  </head>
  <body>
    <div id="header">this is header</div>
    <div id="container">
      <div id="center" class="column">this is center</div>
      <div id="left" class="column">this is left</div>
      <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
  </body>
</html>

圣杯布局和双飞翼布局的目的
- 三栏布局 中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般适用于PC网页
- 为什么要去浮动?
document.getElementById('container').offsetHeight
- 0

圣杯布局和双飞翼布局的技术总结

使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding,一个用margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <!-- 
        双飞翼布局需要注意的点：

     -->
    <style>
        body{
            min-width: 550px;
        }
        #main{
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left{
            width: 190px;
            height: 200px;
            background-color: #0000ff;
            margin-left:-100%;
        }
        #right{
            width: 190px;
            height: 200px;
            background-color: red;
            margin-left: -190px;
        }
        /* 利用双飞翼布局来布局 */
        .col{
            float: left;
        }
        #main-wrap{
            margin: 0 190px 0 190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>

    <div id="left" class="col">
        this is left
    </div>

    <div id="right" class="col">
        this is right
    </div>

</body>
</html>

圣杯布局和双飞翼布局的区别?
- 为左右留白,圣杯布局是使用padding
- 双飞翼布局是使用margin

flex布局

flex实现一个三点的色子

常用语法回顾
            -flex-direction 属性决定主轴的方向（即项目的排列方向）。
            -justify-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
            -aligin-items  属性定义项目在交叉轴上如何对齐。
            -flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
            -aligin-self 
			-flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4.0 CSS 定位

absolute和relative分别依据什么定位?
居中对齐有哪些实现方式?
- 水平居中
- 垂直居中

- relative依据自身定位
- absolute 依据最近一层的定位元素定位
	- absolute relative fixed
	- body
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 20px;
        }
        .relative{
            position: relative;
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            top: 50px;
            left: 50px;
        }
        .absolute{
            position: absolute;
            width: 200px;
            height: 100px;
            border: 1px solid blue;
            top: 50px;
            
        }
    </style>
</head>
<body>
    <p> absolute和relative定位问题</p>
    <div class="relative">
        <div class="absolute">
            this is absolute
        </div>
    </div>
</body>
</html>

居中对齐:水平居中

inline元素:text-align:center
block元素:margin:auto
absolute元素:left50% + margin-left负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
        }
        .item{
            background-color: #ccc;
        }
        /* span元素 */
        .container-1{
            text-align: center;
        }
        .container-2 .item{
            width: 500px;
            margin: auto;
            text-align: center;
        }
        .container-3{
            position: relative;
            height: 100px;
        }
        .container-3 .item{
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px; ;
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is block item
        </div>
    </div>

    <div class="container container-3">
        <div class="item">
            this is absolute item
        </div>
    </div>
</body>
</html>