前端自查【知识点】（低概率）2024最新版

HTML

网页重绘 repaint 和重排 reflow 的区别

重绘:元素外观改变(如颜色)，但尺寸、定位不变，不会影响其他元素的位置
重排:重新计算尺寸和布局，可能会影响其他元素的位置
重排比重绘的影响更大，消耗也更大

减少重排的方法

集中修改样式，或直接切换 css class
修改之前先设置 display: none，脱离文档流.
使用 BFC 特性，不影响其他元素的位置
频繁触发(resize scroll)使用节流和防抖
使用 createDocumentFragment 批量操作 DOM
使用 CSS3 和 requestAnimationFrame 优化动画

link 标签中的 preload 、 prefetch 、dns-prefetch、preconnect

在这里插入图片描述

preload 资源在当前页面使用，会优先加载
prefetch 资源在未来页面使用，空闲时加载
dns-prefetch 是 DNS 预查询
preconnect 是 DNS 预连接

JS

ES6 和 TS 带来了什么价值 ?

ES 有更加规范的语法，避免怪异问题，增加开发效率
ES 有更快的执行效率，例如 async/await 比 Promise 执行更快
TS 静态类型，开发大型项目会更加稳定

== 和 === 的区别

== 会尝试类型转换，类型转换后若值相等，则视为相等
=== 不会进行类型转换，数据类型和值都相等，才视为相等

哪些场景才用 ==?

唯一可以使用的场景：判断变量是否为 null 或 undefined

obj.a ==null

相当于

obj.a ===null|| obj.a ===undefined

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

强制: parseInt ，parseFloat ，toString等
隐式: if、逻辑运算、==、+ 拼接

Map 和 Object 的区别

Map 的 key 可以是任意数据类型，Object 只能以字符串/symbol为 key
操作 Map 的 API 和 Object 不同
Map 是有序结构【重要】，Object 是无序结构
Map虽然有序，但操作速度和Object差不多

Set 和 Array 的区别

Set 元素不能重复，Array 元素可以重复
操作 Set 的 API 和 Array 不同
Set 是无序结构，操作很快，Array 是有序结构，操作很慢

HTMLCollection 与 NodeList 的区别

NodeList 内的节点可以是各种类型，HTMLCollection内的节点只能是元素节点
NodeList 支持 forEach，HTMLCollection 不支持 forEach
NodeList 通过 querySelectorAll 和 childNodes 获取，HTMLCollection 通过 getElementsByTagName 和 children 获取

闭包是内存泄漏吗?

闭包只是让变量在内存常驻，本身不是内存泄漏，滥用闭包才会导致内存泄漏

(IE 在IE9之前对 JS 对象和 DOM对象使用了不同的垃圾回收机制，所以闭包在这些旧版本的 IE 中会引发内存泄漏。)

前端常用的【设计模式】和使用场景

https://blog.csdn.net/weixin_41192489/article/details/140882228

遍历一个数组用 for 和 forEach 哪个更快？

for 更快，因为 forEach 每次都要创建一个函数来调用 , 而 for 不会创建函数，函数需要独立的作用域，会有额外的开销，但 forEach 的可读性更好。

offsetHeight、offsetWidth、clientHeight、clientWidth 等的计算规则

offsetHeight 和 offsetWidth

border + padding + content

clientHeight 和 clientWidth

padding + content

scrollHeight 和 scrollWidth

padding + 实际内容尺寸

requestldleCallback和requestAnimationFrame有什么区别

两者都是宏任务（在DOM完成渲染后执行）

requestAnimationFrame 每次渲染完都会执行，高优
requestIdleCallback 空闲时才执行，低优

正则表达式

面试只会考简易表达式，了解基础规则即可

// 邮政编码/\d{6}/// 小写英文字母/^[a-z]+$/// 英文字母/^[a-zA-Z]+$/// 日期格式 2019-12-1/^\d{4}-\d{1,2}-\d{1,2}$/// 用户名/^[a-zA-Z]\w{5,17}$/// 简单的 IP 地址匹配/\d+\.\d+\.\d+\.\d+/

【考题】字符串字母开头，后面字母数字下划线，长度 6-30

/^[a-zA-Z]\w{5,29}$/

【考题】手写字符串 trim 保证浏览器兼容性

String.prototype.trim=function(){returnthis.replace(/^\s+/,"").replace(/\s+$/,"");};

URL 解析

location.href 当前页面完整的 url- 将location.href的值修改为一个绝对路径（或相对路径），则页面会自动跳转到该路径，并生成相应的历史记录。
location.protocol 协议一般是http、https，现在基本都是https
location.hostname 主机名（域名），如 search.phpied.com
location.port 端口（http协议默认端口 80 ； https 默认端口 443 ； ftp 默认端口 22）
location.host 主机名，包括端口，如 search.phpied.com:8080
location.pathname url中的路径部分，如 /search
location.search 查询字符串，如 **?q=java&what=script**
location.hash 设置/获取hash值，即url中#后面的内容，包含#，如 **#results**

Vue2

v-html

有XSS风险，会覆盖子组件

动态样式

<template><div><p:class="{ black: isBlack, yellow: isYellow }">使用 class</p><p:class="[black, yellow]">使用 class （数组）</p><p:style="styleData">使用 style</p></div></template><script>exportdefault{data(){return{isBlack:true,isYellow:true,black:'black',yellow:'yellow',styleData:{fontSize:'40px',// 转换为驼峰式color:'red',backgroundColor:'#ccc'// 转换为驼峰式}}}}</script><stylescoped>.black{background-color: #999;}.yellow{color: yellow;}</style>

v-show和 keep-alive的区别

v-show 通过移除/添加display:none样式，来显示/隐藏元素，适合频繁切换显隐的情况，有较高的渲染成本（v-show="false"时，该节点也会被创建） - 元素若是子组件，元素mounted及之前生命周期中的代码会在整个页面初次渲染时就执行，后期切换显隐的过程中，不会再执行
keep-alive 是vue提供的组件，通过内存缓存组件，适合实现tab切换

事件传参

vue 使用的原生 event 对象
vue 的事件是绑定在挂载的元素上的
若事件不传参，则默认第一个参数是原生 event 对象- event.target 事件绑定的对象- event.currentTarget 触发事件的对象

<button@click="increment1">+1</button>

increment1(event){}

若需要传其他参数，又需要取原生 event 对象，则使用 $event 传入原生 event 对象

<button@click="increment2(2, $event)">+2</button>

increment2(val, event){}

如何将组件所有 props 传递给子组件 ?

使用 $props

<Userv-bind="$props">

Vue Router

Vue Router 的路由模式

HTML5 模式【推荐】
Hash 模式
Memory 模式（更适用于Node 环境和 SSR，不会有历史记录）

路由模式 hash 和 H5 history 是怎么实现的？两者的区别？

https://blog.csdn.net/weixin_41192489/article/details/137685345

如何配置 Vue-router 异步加载

{path:'/dic',name:'速查手册',component:()=>import('./dic/index')},

Vuex

mutation 和 action 的区别

mutation:原子操作，必须同步代码;
action:可包含多个 mutation; 可包含异步代码;

redux

redux 如何进行异步请求

使用异步 action，如redux-thunk

移动端

移动端 H5 click 有 300ms 延迟，如何解决 ?

添加元信息

width=device-width

Retina 屏幕的 1px 像素，如何实现

有些手机屏幕的 DPR = 2 ，即 1px 它会用两个物理像素来显示，就粗了。
不能直接写 0.5px ，浏览器兼容性不好，渲染出来可能还是 1px 的效果。

正解：使用 transform 缩小

#box{padding: 10px 0;position: relative;}#box::before{content:'';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #d9d9d9;transform:scaleY(0.5);transform-origin: 0 0;}

有 border-radius 时的解决方案：用 box-shadow

#box2{margin-top: 20px;padding: 10px;border-radius: 5px;/* border: 1px solid #d9d9d9; */box-shadow: 0 0 0 0.5px #d9d9d9;}

网络通信

通信协议 TCP 和 UDP 的区别

对比项TCPUDP通信过程有连接（三次握手），有断开（四次挥手）无连接，无断开是否稳定稳定不稳定传输效率一般高使用场景http请求视频会议、语音通话

通信协议 HTTP 和 UDP 的区别

HTTP 协议在应用层
UDP 协议在传输层（TCP 也在）

HTTP 缓存

在这里插入图片描述

页面跳转刷新 – 强制缓存有效，协商缓存有效
如地址栏输入 url，跳转链接，前进后退等

手动刷新 – 强制缓存失效，协商缓存有效
windows 快捷键 F5，点击刷新按钮，右击菜单刷新

强制刷新 – 强制缓存失效，协商缓存失效
windows 快捷键 ctrl +F5

CDN 缓存和强缓存的区别

CDN缓存侧重于通过分布式网络节点快速分发内容
强缓存则是在用户本地浏览器中进行资源的快速访问和重用。‌

网页多标签 tab 通讯

WebSocket
localStorage
SharedWorker

框架原理

虚拟DOM(vdom)真的很快吗？

vdom 并不快，JS 直接操作 DOM 才是最快的
但“数据驱动视图”要有合适的技术方案，不能全部 DOM 重建
vdom 就是目前最合适的技术方案(并不是因为它快，而是合适)

svelte 框架就没有用 vdom ，而是直接用 JS 操作 DOM

实战

设计一个前端统计SDK-分析功能范围

https://blog.csdn.net/weixin_41192489/article/details/141098481

设计一个H5编辑器的数据模型和核心功能-CSDN博客

https://blog.csdn.net/weixin_41192489/article/details/141105553

开发一个 H5 抽奖页，你需要后端提供哪些 API?

登录，获取用户信息，用户是否已抽奖
抽奖接口
统计接口（pv，抽奖按钮的点击统计，分享按钮的点击统计），微信 JSSDK 信息(需要和 PM 确定)

什么是图片防盗链？

本站图片禁止其他网站使用，即图片防盗链

实现原理：服务端通过 Referer 来判断是否是其他网站发来的请求，来实现图片防盗链。

现代浏览器为何要禁用第三方 cookie ?

第三方 cookie 会记录用户的行为和数据（方便做广告），为了保护用户的隐私，有些浏览器默认禁止了第三方 cookie，Chrome增加了 SameSite(谷歌有广告)

其他

linux 常用命令

https://blog.csdn.net/weixin_41192489/article/details/136478214

如何学习一门新语言，需要考虑哪些方面

它的优势和应用场景
语法(常量，变量，数据类型，运算符，函数等)
内置模块和 API
常用的第三方框架和库
开发环境和调试工具
线上环境和发布过程

B 端和 C 端，有什么区别

B 端，即 toB - to Business 面向商业、生产者
C 端，即 toC - to Customer 面向消费者、终端用户

B 端

一般是对内的管理系统，公司内部使用
由业务驱动，业务运营人员的话语权更重。
功能通常非常复杂，需要复杂的组件设计，拆分和抽离，要深入熟悉业务才能更好的制作技术方案。
流量不会太大，一般后台一个服务器、一个数据库即可满足。
用户环境比较单一，网络情况好，不用考虑极致的性能优化、浏览器兼容性等。

C 端

公司对外的核心业务
一般是技术驱动的，技术人员话语权很重。
民用级别，不会有特别复杂专业的功能。
流量一般很大，后台可能需要很多服务器集群，需要各种 CDN 和缓存。
用户群体很不固定，手机、浏览器、网络等都不确定，需要全面的性能优化和统计、监控。

SaaS

SaaS - Software as a service 软件即服务，它集合了 B 端和 C 端。

例如常见的腾讯文档、在线画图软件、在线 PS 等。他们既有 B 端的复杂功能，又有 C 端面向终端用户的特点。SaaS 的研发成本是非常高的。

前端周边技术

webpack 竞品 vite esbuild
babel竞品 SWC
nodejs 竞品 deno

了解 WebAssembly 吗 ?

JS 是解释型语言，不需要编译，直接在虚拟机(如 V8)执行
C C++ Rust 是编译型语言，要提前编译为机器码，再运行
前者效率低，后者效率高。WebAssembly 允许后者运行在浏览器

自定义 DSL 流程图（含XML 描述邮件，XML 描述流程图）

https://blog.csdn.net/weixin_41192489/article/details/139429767

标签：前端

本文转载自: https://blog.csdn.net/weixin_41192489/article/details/140932202
版权归原作者 朝阳39 所有，如有侵权，请联系我们删除。