前端面试灵魂提问（1）

1.自我介绍

2.在实习中，你负责那一模块

3.any与unknow的异同

相同点：any和unkonwn 可以接受任何值

不同点：any会丢掉类型限制，可以用any 类型的变量随意做任何事情。unknown 变量会强制执行类型检查，所以在使用一个 unknown 类型的变量之前，你需要进行类型检查。

4. type 与 interface 和 class 的异同

Class是用于定义对象的结构和行为，它是数据和行为的封装（实现方法）。

Interface是用于描述对象的结构和行为的规范，它是对类的抽象。接口定义了对象应具备的属性和方法，但不提供实现。 接口可以用来描述类的公共部分，并且类可以实现一个或多个接口。

Type是用于定义数据的形状和结构，它是对数据的抽象。

Class用于创建对象，Interface用于定义规范，而Type用于定义数据类型。

class与interface的区别

  • type 是 TypeScript 中用于定义类型别名、联合类型、交叉类型等复杂类型的声明方式。type 和 interface 定义的类型信息在编译后的 JavaScript 代码中被移除，因为它们仅在编译阶段用于类型检查。换句话说，type 不需要运行时信息。相比之下，class 定义的类型信息会保留在编译后的代码中，因为它们包含实际的属性和方法实现，这些信息在运行时是必需的。
  • interface 主要用于定义对象的类型和结构，不提供具体实现。它支持继承extends和实现implements。

interface与type的区别

  • interface 使用 extends 实现继承， type 使用交叉类型实现继承。
  • type 可以，类型别名会给一个类型起个新名字，声明基本类型、联合类型、交叉类型、元组。interface 不行。

  • interface可以合并重复声明，type 不行，重复声明 type ，就报错了

interface Person { 
  name: string 
}
type Person = { 
  name: string 
}

interface Student extends Person { 
  grade: number 
}
interface Student extends Person { 
  grade: number 
}

type Student = Person & { grade: number  }    用交叉类型
type Student = Person & { grade: number  }    用交叉类型


const person:Student = {
  name: 'lin',
  grade: 100
}

type Name = string                              // 基本类型

type arrItem = number | string                  // 联合类型

const arr: arrItem[] = [1,'2', 3]

type Person = { 
  name: Name 
}

type Student = Person & { grade: number  }       // 交叉类型

type Teacher = Person & { major: string  } 

type StudentAndTeacherList = [Student, Teacher]  // 元组类型

const list:StudentAndTeacherList = [
  { name: 'lin', grade: 100 }, 
  { name: 'liu', major: 'Chinese' }
]

interface Person {
    name: string
}
interface Person {         // 重复声明 interface，就合并了
    age: number
}
const person: Person = {
    name: 'lin',
    age: 18
}


type Person = {
    name: string
}

type Person = {     // Duplicate identifier 'Person'
    age: number
}

5.vue的最佳实践

编码风格

  1. 命名组件时用多个单词，避免跟现有及未来的 HTML 元素相冲突
  2. prop 属性定义应尽量详细，至少要指定类型
  3. 组件 data 必须是个函数，避免多个组件数据互相影响
  4. 使用 v-for 务必加上 key，且避免和 v-if 写在一起
  5. 为组件样式设置作用域，使用 scoped 属性，使用 BEM 约定
  6. 私有 property 名，使用 $_ 前缀，避免产生冲突

最佳实践（性能优化）

1、组件按需加载

const Home = () => import('@/components/home')

使用 import 动态导入，配合 webpack tree-shaking 摇树功能，没有用到的组件就不会打包到 chunk，从而提升加载性能。

2、提升首屏加载速度

参考：【Vue】从实际开发出发，浅谈vue的最佳实践 - 掘金 (juejin.cn)

2.1、webpack体积优化
2.1.1、编译优化

1）配置module.noParse，比如 JQuery、Lodash 已经是可以直接运行在浏览器的文件，就不必再搜索解析。告诉webpack不必解析某些文件。

2）配置loader，通过test、include、exclude缩小搜索范围，例如：

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
        include: [resolve('src')],
        exclude: /node_modules/,
      }
    ]
  }
}

 3）解析loader开启多进程，使用thread-loader，只要把 thread-loader 放置在其他 loader 之前。

4）合理利用缓存，对性能开销较大的 loader启用缓存（保存和读取这些缓存文件会有一些时间开销），比如使用loader本身的缓存或使用cache-loader

2.1.2、代码压缩打包时间过久的优化方式

1）terser-webpack-plugin 或uglifyjs-webpack-plugin压缩代码插件开启多进程并行、缓存模式

2.1.3、构建体积

bundle文件里包含了很多较大的第三方依赖包、业务代码js/css、以及图片资源等。配置externals，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

module.exports = {
  //...
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    ...
  },
};

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.0/axios.min.js"></script>
2.2、可改造成SSR，减少首屏加载时间

使用SSR服务端渲染，将组件或是页面通过服务器生成html字符串，再发送到浏览器，这样可以加快首屏加载渲染的速度，提前显示文档内容。

在服务器配置SSR，项目中在激活模式下挂载应用，我们应该使用 createSSRApp() 而不是 createApp()：

3、不需要更新的内容静态化

可以将不需要更新的节点内容静态化，这样可以优化更新性能。

4、尽量减少DOM层级嵌套

diff算法比较，dom的性能消耗很大

5、不活动的组件，可用<keep-alive>缓存
6、让传给子组件的 props 尽量保持稳定

只要需要修改的子组件的props会发生变化

7、大数据量的渲染优化

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染。实际上就是在首屏加载时，只加载可视区域的列表项，当滚动发生时，动态计算获取可视区域内的列表项，并将非可视区域的列表项删除。当滚动后，由于渲染区域相对于可视区域已经发生了偏移，此时我需要获取一个偏移量startOffset，通过样式控制将渲染区域偏移至可视区域中。

参考：「前端进阶」高性能渲染十万条数据(虚拟列表) - 掘金 (juejin.cn)

6、画一个平行四边形

 .button {
            background-color: aqua;
            transform: skewX(-45deg);
 }
        
.button>div {
            transform: skewX(45deg);
}

  <div class="button">
        <div>Click me</div>
 </div>

7、早期服务端渲染--客户端渲染--服务端渲染

参考：（一文带你入门SSR）从传统服务端渲染到客户端渲染再到现代化的服务端渲染 - 掘金 (juejin.cn)

1.早期Web页面渲染都是在服务端完成的，应用的前后端部分完全耦合在一起，内容都是在服务端动态生成的，所以服务端的压力较大；

2.基于客户端渲染的 SPA 应用，把【数据处理】和【页码渲染】分开，也就是【后 端】负责数据处理，【前端】负责页面渲染。因为 HTML 中没有内容，等到 JavaScript 加载，首屏渲染慢，SEO 问题。

3.服务端渲染或同构渲染即【服务端渲染】 + 【客户端渲染】，

8.图片懒加载

8、伪元数选择器

DNS会发生域名与ip的转化，或发生IP与mac的转化吗？

不受跨域限制的标签

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/211175.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Redis RDB

Redis RDB

基于内存的 Redis, 数据都是存储在内存中的。 那么如果重启的话, 数据就会丢失。 为了解决这个问题, Redis 提供了 2 种数据持久化的方案: RDB 和 AOF。 RDB 是 Redis 默认的持久化方案。当满足一定条件的时候, 会把当前内存中的数据写入磁盘, 生成一个快照文件 dump.rdb。Redi…
阅读更多...
各类声音数据集大合集—乐器、车辆、鸟鸣、蜜蜂声音、歌曲、喇叭、人类声音不同等类型的声音数据集

各类声音数据集大合集—乐器、车辆、鸟鸣、蜜蜂声音、歌曲、喇叭、人类声音不同等类型的声音数据集

最近收集了一大波关于各类声音的数据集&#xff0c;包含乐器、车辆、鸟鸣、蜜蜂声音、歌曲、喇叭、人类声音不同等类型的声音数据集&#xff0c;废话不多说&#xff0c;给大家逐一介绍&#xff01;&#xff01; 1、吉他和弦大调、小调数据集 吉他和弦大调、小调数据集&#x…
阅读更多...
Hive数据倾斜之：数据类型不一致导致的笛卡尔积

Hive数据倾斜之：数据类型不一致导致的笛卡尔积

Hive数据倾斜之&#xff1a;数据类型不一致导致的笛卡尔积 目录 Hive数据倾斜之&#xff1a;数据类型不一致导致的笛卡尔积一、问题描述二、原因分析三、精度损失四、问题解决 一、问题描述 如果两张表的jion&#xff0c;关联键分布较均匀&#xff0c;没有明显的热点问题&…
阅读更多...
无桌面版docker在Ubuntu系统上安装

无桌面版docker在Ubuntu系统上安装

目录 注意 系统要求 卸载旧版本 安装 使用apt存储库安装 1. 设置 Docker 的apt存储库。 2. 安装Docker软件包 3. 通过运行镜像来验证Docker Engine安装是否成功 hello-world。 从包中安装 1. 进入 https://download.docker.com/linux/ubuntu/dists/。 2. 在列表中选择…
阅读更多...
阿里云MySQL从 2003-＞1251-＞1396

阿里云MySQL从 2003-＞1251-＞1396

目的 由于需要在阿里云的实例中装MySQL数据库&#xff0c;安装前期&#xff08;本地访问&#xff09;还是挺顺利的&#xff0c;但是到了远程连接的时候&#xff0c;却出现了一系列的Bug&#xff0c;以为是没有 实名认证没有备案 的原因导致的&#xff0c;但是后来…
阅读更多...
在Spring Boot中使用@Async实现一个异步调用

在Spring Boot中使用@Async实现一个异步调用

在使用异步注解之前&#xff0c;我们需要先了解&#xff0c;什么是异步调用&#xff1f; 异步调用对应的事同步调用&#xff0c;同步调用是值程序按照我们定义的顺序依次执行&#xff0c;每一行程序都必须等待上一行的程序执行完成之后才执行&#xff0c;而异步是指在顺序执行…
阅读更多...
动态规划------方法汇总

动态规划------方法汇总

核心&#xff1a; 状态定义 状态转移方程 启发思路&#xff08;两种情况&#xff09;&#xff1a;选 或 不选 / 选哪个 DP三步&#xff1a;先写回溯&#xff0c;时间复杂度 指数级别&#xff1b;递归的过程中会重复计算&#xff0c;要保存计算结果&#xff0c;递归搜索…
阅读更多...
uniapp是否可以用elementUI等前端UI库、使用步骤以及需要注意的问题

uniapp是否可以用elementUI等前端UI库、使用步骤以及需要注意的问题

文章目录 uniapp是否可以用elementUI等前端UI库使用方法和步骤问题如何解决 uniapp是否可以用elementUI等前端UI库 在PC端开发uniapp&#xff0c;可以用elementUI&#xff0c;因为elementUI就是PC端的。 在使用uniapp&#xff0c;选择vue2.0时&#xff0c;实测可以用nodejs16的…
阅读更多...
Linux部署HDFS集群

Linux部署HDFS集群

&#xff08;一&#xff09;VMware虚拟机中部署 ps、其中node1、node2、node3替换为自己相应节点的IP地址&#xff0c;或者host文件中配置过的主机名&#xff0c;或者看前置准备 或者查看前置准备&#xff1a;Linux部署HDFS集群前置准备 1.下载压缩包 https://www.apache.or…
阅读更多...
管理类联考-性质

管理类联考-性质

性质 ——性质—— 一、是什么 &#xff08;1&#xff09;本质&#xff1a;判断一定范围内的对象是否具备某个性质的命题就是性质命题&#xff08;直言命题&#xff09;。直言命题是断定事物/对象是否具有某种性质的命题。直言命题在结构上由主项、谓项、联项和量项组成。 &am…
阅读更多...
对Spring框架的一些总结

对Spring框架的一些总结

对Spring框架的一些总结 在文章开头我真心推荐大家一个优秀的编程老师&#xff1a;孙帅老师(孙哥suns)&#xff0c;孙帅老师在哔哩哔哩的Spring5教学视频时长接近33个小时&#xff0c;从0基础到一步一步手把手的教你抽丝剥茧分析Spring框架的所有知识&#xff0c;孙帅老师的教…
阅读更多...
打印元素绘制协议Java实现

打印元素绘制协议Java实现

我一直提倡的面向接口和约定编程&#xff0c;而打印元素绘制协议一直是我推荐的打印实现方式&#xff0c;我以前只是强调按打印元素绘制协议输出数据就行了&#xff0c;有实现程序按协议控制打印&#xff0c;说是可以用任何语言实现客户端程序而不影响打印业务&#xff0c;那么…
阅读更多...
《opencv实用探索·八》图像模糊之均值滤波简单理解

《opencv实用探索·八》图像模糊之均值滤波简单理解

1、前言 什么是噪声&#xff1f; 该像素与周围像素的差别非常大&#xff0c;导致从视觉上就能看出该像素无法与周围像素组成可识别的图像信息&#xff0c;降低了整个图像的质量。这种“格格不入”的像素就被称为图像的噪声。如果图像中的噪声都是随机的纯黑像素或者纯白像素&am…
阅读更多...
【动态规划】LeetCode-91.解码方法

【动态规划】LeetCode-91.解码方法

&#x1f388;算法那些事专栏说明&#xff1a;这是一个记录刷题日常的专栏&#xff0c;每个文章标题前都会写明这道题使用的算法。专栏每日计划至少更新1道题目&#xff0c;在这立下Flag&#x1f6a9; &#x1f3e0;个人主页&#xff1a;Jammingpro &#x1f4d5;专栏链接&…
阅读更多...
leetcode-160-相交链表（C语言实现）

leetcode-160-相交链表（C语言实现）

题目&#xff1a; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;…
阅读更多...
Leetcode226. 翻转二叉树

Leetcode226. 翻转二叉树

文章目录 题目介绍题目分析解题思路边界条件&#xff1a;节点为空时返回空子问题&#xff1a;交换左右子节点 整体代码 题目介绍 题目分析 题目要求我们将树中每个节点的左右子节点全部交换,最后返回交换后的树的根节点。 解题思路 这题是比较常见的递归&#xff0c;直接找边…
阅读更多...
LangChain 18 LangSmith监控评估Agent并创建对应的数据库

LangChain 18 LangSmith监控评估Agent并创建对应的数据库

LangChain系列文章 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储&#xff0c;读取YouTube的视频文本搜索I…
阅读更多...
最多不一定最好，只有适合的才是最好的！电脑的内存多大才是合理的

最多不一定最好，只有适合的才是最好的！电脑的内存多大才是合理的

RAM&#xff0c;或称随机存取存储器&#xff0c;是最好的笔记本电脑和最好的电脑最重要的组成部分之一。硬盘驱动器&#xff08;HDD&#xff09;或固态驱动器&#xff08;SSD&#xff09;存储可以被视为电脑的长期内存&#xff0c;内存是其短期内存。内存可以跟踪后台运行的应用…
阅读更多...
背包9讲系列2-完全背包问题

背包9讲系列2-完全背包问题

一、前言 又到周末了&#xff0c;这几天可以腾出时间来把背包系列的其他内容好好肝一肝&#xff0c;本次介绍的是完全背包问题&#xff0c;之前的系列内容请查看&#xff1a; 背包9讲系列1-01背包问题 二、完全背包 2.1 问题描述 有n个物品和一个容量为capacity的背包&…
阅读更多...
误用STM32串口发送标志位 “USART_FLAG_TXE” “USART_FLAG_TC”造成的BUG

误用STM32串口发送标志位 “USART_FLAG_TXE” “USART_FLAG_TC”造成的BUG

当你使用串口发送数据时是否出现过这样的情况&#xff1a; 1.发送时第一个字节丢失。 2.发送时出现莫名的字节丢失。 3.各种情况字节丢失。 1.先了解一下串口发送的流程图&#xff08;手动描绘&#xff09;&#xff1a; 可以假想USART_FLAG_TXE是用于检测"弹仓"&…
阅读更多...
最新文章

Copyright @ 2022~2023