HTML
性能优化
- 防抖与节流 juejin.cn/post/726143…
- 前端懒加载 juejin.cn/post/727079…
- 首屏优化 juejin.cn/post/708537…
- el-tree懒加载 juejin.cn/post/701367…
渲染
- 回流与重绘 juejin.cn/post/694127…
前端路由
- vue-router hash模式与history模式 juejin.cn/post/709603…
Vue2
- Vue的优点 juejin.cn/post/691937…
- assets与static文件夹的区别juejin.cn/post/691937…
- vue常见的修饰符 juejin.cn/post/698162…
- 父子嵌套生命周期执行顺序
- watch与computed的异同
相同点： 1.本质上都是一个watcher实例，它们都通过响应式系统与数据、页面建立通信 2.它们都是以vue的依赖
- vue里面实现首屏加载的优化juejin.cn/post/711169…
- 页面刷新后store中state是否存在
- 自定义组件中的v-model是做什么的juejin.cn/post/708724…
- vue3相对于vue2的优势
- vue3中ref与reactive的区别
- vue component标签
- mixin混入
- 插槽 juejin.cn/post/727888…
- 说说的vue的响应式原理
- proxy能够监听到对象中的对象的引用吗？如何让proxy去监听基本数据类型
- vuex用过吗？知道vuex的原理吗？
- vue2与vue3中v-if与v-for的优先级？如何避免冲突？
vue2:v-if < v-for vue3: v-if> v-for
如何避免：使用computed等预先过滤与在 v-if 和 v-for 不同的元素层级上使用它们
vue3
- watchEffect juejin.cn/post/729676…
- watchEffect实现一个防抖函数blog.csdn.net/qq_24719349…
组件通讯
- $refs通信时有什么弊端？
- refs是直接操作DOM的，这与Vue的数据驱动思想不符，可能会导致代码的可维护性和可读性变差。
- refs只能在组件渲染完成后才能访问，如果在组件渲染之前就需要访问子组件的方法或属性，就需要使用其他的方式进行通讯。
- refs只能访问直接子组件，如果需要访问嵌套子组件，就需要在父组件中逐层传递props或使用Vuex等状态管理工具。
- refs在使用v-for指令时可能会出现问题，因为$refs只能访问到最后一个渲染的组件，而不是所有组件的实例
JS篇
- 浅拷贝与深拷贝 juejin.cn/post/684490…
- Map与Set juejin.cn/post/706447…
- 原型与原型链 juejin.cn/post/729601…
- 手写call、bind、apply juejin.cn/editor/draf…
- reduce的具体用途？juejin.cn/post/730939…
- 如果空数组调用reduce会发生什么？
如果是空数组并且没有设置初始值的话会报错。如果设置了初始值，则return最终的结果就为初始值
- JS数据类型
JS数据类型可以分为基本数据类型和引用类型两大类。
基本数据类型：
1.Number:表示数值，可以为整数、浮点数或者NaN，以及正负无穷大。
2.String:由0个或者多个unicode字符组成的字符序列，用单引号或者双引号包围。
3.Boolean
4.Null
5.Undefined：表示变量已经声明但是未赋值，或者尝试访问不存在的对象属性时返回的默认值。
6.Symbol(ES6新增)：一种唯一的、不可变的数据类型，常用于定义对象的唯一属性名，防止键冲突
7.BigInt(虽然不是严格意义上的基本类型，但在现代JS中通常被当作独立类型处理)：用来安全地存储、操作大于Number.MAX_SAFE_INTEGER的大整数。
引用类型： Object：包括但不限于数组、函数、日期、正则表达式等，它们都是基于对象的，也就是说它们时通过引用来传递的，而非像基本类型那样直接复制值。
- 如何判断一个元素是否为数组
<body>
<script>
// 如何判断一个元素是数组还是对象
let arr = [
{
name: 'lanqing'
},
[
'足球',
'蓝球'
]
]
console.log(Array.isArray(arr[1]));
console.log(arr[1] instanceof Array);
console.log(arr[1].constructor == Array);
</script>
</body>
- 如何判断一个元素是否为对象
<body>
<script>
// 如何判断一个元素是数组还是对象
let arr = [
{
name: 'lanqing'
},
[
'足球',
'蓝球'
]
]
if (arr[0] instanceof Object && !(arr[0] instanceof Array) && arr[0] !== null) {
console.log('为对象');
} else {
console.log('不为对象');
}
if (typeof arr[0] == 'object' && !(arr[0] instanceof Array) && arr[0] !== null) {
console.log('为对象');
} else {
console.log('不为对象');
}
</script>
</body>
- 变量提升与暂时性死区 juejin.cn/post/700722…
计算机网络篇
前端工程化
- 什么是静态资源、动态资源
静态资源是指在服务器上存储的内容不会随着用户请求的变化而变化的资源，如 HTML、CSS、JS、图片等。而动态资源是指在服务器上存储的内容会随着用户请求的不同而动态生成的资源，如动态网页、API接口等。
- webpack入门 juejin.cn/post/727628…
- webpack loaders 跟 plugin 的区别 juejin.cn/post/715799…
- webpack 常见loader juejin.cn/post/715799…
- webpack 常见的 plugins juejin.cn/post/715799…
- 为什么要只将小于10k的图片资源处理成base64呢，base64格式的图片有什么特点呢？
1.减少HTTP请求：将小于10k的图片处理成base64后，可以直接将图片嵌入到HTML、CSS或JS文件中，避免额外的HTTP请求，从而加快页面加载速度。
2.提高页面加载速度：在页面加载时，base64格式的图片可以直接从文件中读取，而不需要到服务器请求图片资源，从而可以减少页面加载时间。
3.更加安全：base64格式的图片能直接嵌入到HTML、CSS或JS文件中，不需要通过图片的URL来加载图片资源，从而可以更加保护图片资源的安全性。
- 尚硅谷webpack笔记 yk2012.github.io/sgg_webpack…
- 说说对前端工程化的理解
前端工程化是指将前端开发的各个环节进行规范化、自动化处理的过程，它涉及构建工具、模块化开发、性能优化、代码组织与管理等诸多方面。随着现代Web应用变得越来越复杂和庞大，前端工程化的实践逐渐成为确保项目高效、稳定开发的重要手段。
9.说说对Webpack的理解。
Webpack作为一款强大的前端构建工具，是前端工程化的一个核心组成部分。Webpack的主要功能和价值体现在以下几个方面：
1.模块化支持：Webpack支持CommonJS、ES6模块规范，允许开发者以模块的方式组织JS代码，并且可以处理CSS、图片等非JS资源，将其视为模块来导入导出。
2.依赖管理与打包：Webpack通过分析项目中的入口文件（entry）及其引用的所有模块，生成一个详细的依赖关系图（dependency graph）,然后根据此图谱将所有依赖的模块打包生成多个或单个bundle（捆绑包），方便再浏览器中加载运行。
3.Loader机制：Webpack通过loader可以预处理各种类型的文件，比如将sass与less转换为css,将ES6语法转换为浏览器兼容的ES5语法，增强了对多种资源的处理能力。 4.插件系统：通过丰富的插件系统，Webpack能够实现更加高级的功能，如代码压缩优化（TerserPlugin）、按需加载 5.配置灵活性：Webpack高度可配置，允许开发者根据项目的具体需求定制构建过程，比如输出路径、公共路径、热更新、代码分割等策略 总之，webpack可以通过整合各种技术，帮助开发者更好地管理和优化前端资源，从而提升整个项目开发和部署流程的效率和质量。
业务应用类
获取当前电脑ip地址
- 调用第三方接口
- 后端写一个接口
- 前端通过WebRTC技术获取本地IP地址。WebRTC是一种实时通信技术，可以在浏览器中进行音视频通话和数据传输（谷歌浏览器需要手动解除禁用,并不能真正完成功能） juejin.cn/post/717616…
异步请求后window.open打开窗口被拦截
window.open打开地址报错
自适应方案
juejin.cn/post/716393… juejin.cn/post/729462…
