2024前端基础复习

爱上诺曼底
105 阅读14分钟

HTML

1. 如何理解HTML语义化？

image.png

  • 让人更容易读懂（增加代码可读性）
  • 让搜索引擎更容易读懂（SEO）
  1. 块级元素 & 内联元素？
  • display:block/table；有div h1-h6 table ul ol p 等；独占一行显示；
  • display:inline/inline-block；有span img input button等；

CSS

  1. 盒模型宽度计算

image.png

  • offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
  • 因此，答案是100px + 10px * 2 + 1px * 2 = 122px
  • 补充：如何让offsetWidth 等于 100px，该如何做？

image.png

2. margin纵向重叠问题

image.png

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

3. margin负值问题

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

4. 什么是BFC？如何应用？

  • Block Format Context 块级格式化上下文
  • 一块独立渲染区域，内部元素的渲染不会影响到边界以外的元素

形成BFC的常见条件

  • float 不是none
  • position 是 absolute 或 fixed
  • overflow 不是 visible
  • display 是 flex inline-block等

BFC的常见应用

  • 清除浮动

5. 手写 .clearfix

image.png

6. 水平垂直居中

水平居中

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

垂直居中

  • inline元素： line-height的值等于height的值
  • absolute元素：top:50% + margin-top负值
  • absolute元素：transform(-50%, -50%)
  • absolute元素：top,left,bottom,right = 0 + margin: auto

7. 响应式 - rem是什么？响应式布局的常用方案？

rem是一个长度单位

  • px，绝对长度单位，最常用
  • em，相对长度单位，相对于父元素，不常用
  • rem，相对长度单位，相对于根元素html的font-size，常用于响应式布局

响应式布局的常用方案：

  • media-query，根据不同的屏幕宽度设置根元素html的font-size
  • rem，基于根元素的相对单位

8. 响应式 - vw/vh

rem的弊端：“阶梯”性

image.png

网页视口尺寸

  • window.screen.height 屏幕高度
  • window.innerHeight === 100vh 网页视口高度；window.innerWidth === 100vw 网页视口宽度
  • document.body.clientHeight body高度

image.png

vw/vh

  • vw 网页视口宽度的1/100
  • vh 网页视口高度的1/100
  • vmax 取两者的最大值；vmin 取两者的最小值

JS基础

1.typeof 能判断哪些类型

tyoeof 运算符

  • 识别所有值类型
  • 识别函数
  • 判断是否是引用类型（不可再细分）

image.png

image.png

2.何时使用===，何时使用==

image.png

3.值类型和引用类型的区别

image.png

image.png

image.png

image.png

image.png

image.png

4. 手写深拷贝

  • 注意判断值类型和引用类型
  • 注意判断是数组还是对象
  • 递归
/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

5. 变量计算-类型转换

  • 字符串拼接

image.png

  • ==

image.png

image.png

  • if语句和逻辑运算

    • truely变量： !!a === true的变量
    • falsely变量：!!a === false的变量

image.png

image.png

6. 作用域

image.png

image.png

自由变量

  • 一个变量在当前作用域没有定义，但被使用了
  • 向上级作用域，一层一层依次寻找，直到找到为止
  • 如果到全局作用域都没找到，则报错 xx is not defined

image.png

7. 闭包

闭包

  • 作用域应用的特殊情况，有两种表现：
  • 函数作为参数被传递
  • 函数作为返回值被返回

实际工作中，闭包的应用

  • 隐藏数据

image.png

image.png

  • 两个都打印出100
  • 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方

8. this的不同应用场景，如何取值？

  • 作为普通函数被调用（window）
  • 使用call apply bind被调用（传入什么，取值什么）
  • 作为对象方法被调用（取值对象本身）
  • 在class方法中调用（取值实例本身）
  • 箭头函数中被调用（取值上一作用域this的取值）
  • this取什么样的值，是在函数执行的地方决定的，而不是函数定义的地方决定的

image.png

image.png

  • 箭头函数this的取值，取它上级作用域的值

image.png

JS异步

1. 同步和异步的区别是什么？

单线程和异步

  • js是单线程语言，只能同时做一件事儿
  • 浏览器和nodejs已支持JS启动进程，如Web Worker
  • JS和DOM渲染共用同一个进程，因为JS可修改DOM结构
  • 遇到等待（网络请求，定时任务）不能卡住
  • 需要异步
  • 回调callback函数形式来调用

image.png 异步和同步

  • 基于JS是单线程语言
  • 异步不会阻塞代码执行
  • 同步会阻塞代码执行

2. 前端使用异步的场景有哪些？

  • 网络请求，如 ajax 图片加载
  • 定时任务，如 setTimeout

3. Promise解决了回调地狱（不断嵌套）问题

image.png

image.png

image.png

image.png

image.png

image.png

4. 请描述event loop（事件循环/事件轮询）的机制，可画图

  • JS 是单线程的
  • 异步要给予回调来实现
  • event loop 就是异步回调机制的实现原理

JS如何执行？

  • 从前到后，一步一步执行
  • 如果某一行执行报错，则停止下面代码的执行
  • 先把同步代码执行完，再执行异步

image.png

5. 什么是宏任务和微任务，两者有什么区别？

6. Promise 有哪三种状态？如何变化？

三种状态

  • pending resolved rejected
  • pending -> resolved 或 pending -> rejected
  • 变化不可逆

状态的表现

  • pending状态，不会触发then和catch
  • resolved状态，会触发后续的then回调函数
  • rejected状态，会触发后续的catch回调函数

then和catch状态

  • then正常返回resolved，里面有报错则返回rejected
  • catch正常返回resolved，里面有报错则返回rejected

then和catch的链式调用（常考） image.png

image.png

image.png

7. async/await

  • 异步回调 callback hell 回调地狱
  • Promise then catch 链式调用， 但也是基于回调函数
  • async/await 是同步语法，彻底消灭回调函数

async/await 和 Promise 的关系

  • async/await 是消灭异步回调的终极武器
  • 但和Promise并不互斥
  • 反而，两者相辅相成
  • 执行async函数，返回的是Promise对象
  • await 相当于Promise的then
  • try...catch可捕获异常，代替了Promise的catch

异步的本质

  • async/await 是消灭异步回调的终极武器
  • JS还是单线程，还得是异步（await后是异步），还得是基于event loop
  • async/await 只是一个语法糖

image.png

8. 宏任务和微任务（异步）

  • 宏任务：setTimeout setInterval ajax DOM事件；DOM渲染后触发
  • 微任务：Promise async/await；DOM渲染前触发
  • 微任务执行时机比宏任务要早

js执行顺序：先同步，再异步（先微任务，再宏任务） image.png

JS Web API(操作网页的API）

DOM操作

1. DOM本质是一棵树

2. DOM节点操作

  • 获取DOM节点 image.png
  • attribute（尽量少用，比较消耗性能） 修改html属性，会改变html结构

image.png

  • property 修改对象属性，不会体现到html结构 image.png
  • attribute和property两者都有可能引起DOM重新渲染

3. DOM结构操作

  • 新增/插入节点

image.png

  • 获取子元素列表，获取父元素

image.png

  • 删除子元素

image.png

4. DOM性能

  • DOM操作非常“昂贵”，避免频繁的DOM操作
  • 对DOM查询做缓存

image.png

  • 将频繁操作改为一次性操作

image.png

5. xhr.status

  • 2xx 成功处理请求，如200
  • 3xx 需要重定向，浏览器直接跳转，如301 302 304
  • 4xx 客户端请求错误 如404 403
  • 5xx 服务器端错误

6. 跨域

  • 什么是跨域（同源策略->如何绕过）

    • 同源策略

      • ajax请求时，浏览器要求当前网页和server必须同源（安全）
      • 同源：协议、域名、端口，三者必须一致
      • 前端：a.com:8080 ； server: b.com/api/xxx

    • 加载图片 css js 可无视同源策略

      • <img src=跨域的图片地址/>
      • <link href=跨域的css地址/>
      • <script src=跨域的js地址></script>
      • <img/>可用于统计打点，可使用第三方统计服务
      • <link/><script>可使用CDN，CDN一般都是外域
      • <script>可实现JSONP

    • 跨域

      • 所有的跨域，都必须经过server端允许和配合
      • 未经过server端允许就实现跨域，说明浏览器有漏洞，危险信号

  • JSONP

    • 访问https://baidu.com/，服务端一定返回一个html文件吗？
    • 服务器可以任意动态拼接数据返回，只要符合html格式要求
    • 同理<script src="https://sina.com/getData.js">
    • <script>可以绕过跨域限制
    • 服务器可以任意动态拼接数据返回
    • 所以，<script>就可以获得跨域的数据，只要服务端愿意返回

image.png

image.png

  • CORS（服务端支持）

image.png

7. cookie localStorage sessionStorage 区别（容量、API易用性、是否跟随http请求发送出去）

  • cookie

    • 本身用于浏览器和server通讯
    • 被“借用”到本地存储来
    • 可以用document.cookie = '...'来修改
    • 缺陷：
      • 存储大小，最大4KB
      • http请求时需要发送到服务端，增加请求数据量
      • 只能用 document.cookie = '...'来修改，太过简陋

  • localStorage 和 sessionStorage

    • HTML5专门为存储而设计，最大可存5M
    • API简单易用， setItem getItem
    • 不会随着http请求被发送出去
      • localStorage数据会永久存储，除非代码或手动删除
      • sessionStorage数据只存在于当前会话，浏览器关闭则清空
      • 一般用localStorage会更多一些

http

1. http常见的状态码有哪些？

  • 状态码分类
    • 1xx 服务器收到请求
    • 2xx 请求成功 如200
    • 3xx 重定向 如302
    • 4xx 客户端错误 如404
    • 5xx 服务端错误 如500
  • 常见状态码
    • 200 成功
    • 301 永久重定向（配合location，浏览器自动处理）
    • 302 临时重定向（配合location，浏览器自动处理）
    • 304 资源未被修改
    • 404 资源未找到
    • 403 没有权限
    • 500 服务器错误
    • 504 网关超时
  • 关于协议和规范
    • 就是一个约定
    • 要求大家跟着执行
    • 不要违反规范，例如IE浏览器

2. http 常见的header有哪些？

  • 常见的Request Headers
    • Accepted浏览器可接受的数据格式
    • Accepted-Encoding 浏览器可接受的压缩算法 如gzip
    • Accept-Language 浏览器可接受的语言 如zh-CN
    • Connection: keep-alive 一次TCP连续重复使用
    • cookie
    • Host
    • User-Agent（简称UA）浏览器信息
    • Content-type 发送数据的格式，如application/json
  • 常见的Response Headers
    • Content-type 返回数据的格式，如application/json
    • Content-length 返回数据的大小，多少字节
    • Content-Encoding 返回数据的压缩算法，如gzip
    • Set-Cookie

3. 什么是 Restful API?

  • 传统的 methods
    • get 获取服务器的数据
    • post 向服务器提交数据
    • 简单的网页操作，就这两个操作
  • 现在的 methods
    • get获取数据
    • post新建数据
    • patch/put更新数据
    • delete删除数据
  • Restful API
    • 一种新的API设计方法（早已推广使用）
    • 传统API设计：把每个url当做一个功能
      • 传统API设计： /api/list?pageIndex=2
    • Restful API设计：把每个url当做一个唯一的资源
      • 尽量不用url参数 /api/list/2
      • 用method表示操作类型

image.png

image.png

4. 描述一下http的缓存机制（重要）

  • 关于缓存的介绍
    • 哪些资源可以被缓存？ 静态资源（js css img）
  • http缓存策略（强制缓存Catche-Control + [协商缓存Last-Modified和Etag 304状态码]）

image.png

image.png

image.png

image.png

image.png

image.png

image.png

  • 刷新操作方式，对缓存的影响

image.png

5.http和https

  • http和https
    • http是明文传输，敏感信息容易被中间劫持
    • https = http + 加密，劫持了也无法解密
    • 现代浏览器已经开始强制https协议
  • 加密方式：对称加密，非对称加密

image.png

  • https证书

image.png

开发环境

1. git

  • 最常用的代码版本管理工具
  • 大型项目需要多人协作，必须熟练使用git
  • 常用git命令
    • git status
    • git add .
    • git checkout xxx
    • git commit -m 'xxx'
    • git push origin master
    • git pull origin master
    • git branch
    • git checkout -b xxx/git checkout xxx
    • git merge xxx

2. 调试工具

3. 抓包

4. linux常用命令

  • ls 查看文件夹

  • clear 清屏

  • mkdir xxx 创建文件夹xxx

  • rm -rf xxx 删除文件夹xxx rmdir xxx

运行环境

网页加载过程

  • 加载资源的形式
    • html代码
    • 媒体文件，如图片、视频等
    • javascript css
  • 加载资源的过程
    • DNS解析：域名->IP地址
    • 浏览器根据IP地址向服务器发起http请求
    • 服务器处理http请求，并返回给浏览器
  • 渲染页面的过程
    • 根据HTML代码生成DOM Tree
    • 根据CSS代码生成CSSOM
    • 将DOM Tree和CSSOM整合形成Render Tree
    • 根据Render Tree 渲染页面
    • 遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续
    • 直至把Render Tree渲染完成

1. 从输入url到渲染出页面的整个过程

2. window.onload和 DOMContentLoaded的区别

image.png

性能优化

  • 原则

    • 多使用内存、缓存和其他方法
    • 减少CPU计算量，减少网络加载耗时
    • 适用于所有编程的性能优化 — 空间换时间

  • 从何入手

    • 让加载更快
      • 减少资源体积：压缩代码
      • 减少访问次数：合并代码，SSR服务器端渲染，缓存
      • 使用更快的网络：CDN
    • 让渲染更快
      • CSS放在head，JS放在body最下面
      • 尽早开始执行JS，用DOMContentLoaded触发
      • 懒加载（图片懒加载，上滑加载更多）
      • 对DOM查询进行缓存
      • 频繁DOM操作，合并到一起插入DOM结构
      • 节流throttle 防抖debounce

image.png

image.png

image.png

image.png

image.png

image.png

image.png

  • 防抖 debounce.
    • 监听一个输入框的，文字变化后触发change事件
    • 直接用keyup事件，则会频繁触发change事件
    • 防抖：用户输入结束或暂停时，才会触发change事件

image.png

image.png

  • 节流 throttle
    • 拖拽一个元素时，要随时拿到该元素被拖拽的位置
    • 直接用drag事件，则会频繁触发，很容易导致卡顿
    • 节流：无论拖拽速度多快，都会每隔100ms触发一次

image.png

image.png

安全

  • 常见的web前端攻击方式有哪些？
    • XSS跨站请求攻击

image.png

image.png

- XSRF跨站请求伪造

image.png

image.png

image.png

js真题

1.var 和 let const 的区别

  • var是ES5语法，let const是ES6语法；var有变量提升
  • var和let是变量，可修改；const是常量，不可修改；
  • let const有块级作用域，var没有

2. typeof 返回哪些类型

image.png

3. 列举强制类型转换和隐式类型转换

image.png

4. split()和join()的区别

image.png

5. 数组的pop push unshift shift 分别做什么？

  • 功能是什么？

  • 返回值是什么？

  • 是否会对原数组造成影响？

  • 数组中哪些是纯函数？

    • 纯函数：1. 不改变源数组（没有副作用）； 2. 返回一个数组
    • concat map filter slice

  • 非纯函数

    • push pop shift unshift forEach some every reduce

6. ajax请求get和post的区别

  • get 一般用于查询操作，post一般用于提交操作
  • get 参数拼接在url上，post放在请求体内（数据体积更大）
  • 安全性： post易于防止XSRF

7. 数组API slice和splice 的区别

image.png

8. 函数call和apply的区别

image.png

9. 事件代理（委托）是什么？

image.png

10. 闭包是什么？有何特性？有何影响？

image.png

  • 影响： 变量会常驻内存，得不到释放。闭包不要乱用

image.png

image.png

11. 如何阻止事件冒泡和默认行为？

image.png

12. 如何查找、添加、删除、移动DOM节点？

13. 如何减少DOM操作

image.png

image.png

14. 解释jsonp原理，为何不是真正的ajax?

image.png

image.png

15. document load 和 ready的区别？

image.png

16. == 和 ===的区别

image.png

17.函数声明和函数表达式的区别

  • 函数声明 function fn(){...}
  • 函数表达式 const fn = function(){...}
  • 函数声明会在代码执行前预加载，而函数表达式不会

image.png

18. 关于this的场景题

image.png

19. 关于作用域和自由变量的场景题

image.png

image.png

image.png

20. 如何捕获js中的异常？

image.png

21. 什么是JSON？

image.png

image.png

22. 获取当前页面 url 参数

image.png

image.png

23. 手写深拷贝

image.png

avatar
文章
阅读
粉丝