前端面试灵魂提问

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的转化吗?

不受跨域限制的标签

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 多层级导包

假如我的项目层级结构如下&#xff0c;project文件夹为项目根路径&#xff1a; project/ ├── first/ │ ├── __init__.py │ ├── second/ │ │ ├── __init__.py │ │ └── second_test.py │ └── first_test.py └── main.py假设项目入口文…

工具及方法 - 如何阅读epub文件:使用Adobe Digital Editions

EPUB&#xff08;Electronic Publication的缩写&#xff0c;电子出版&#xff09;是一种电子图书标准&#xff0c;由国际数字出版论坛&#xff08;IDPF&#xff09;提出&#xff1b;其中包括3种文件格式标准&#xff08;文件的扩展名为.epub&#xff09;&#xff0c;这个格式已…

【模电】晶闸管

晶闸管 结构和等效模型工作原理晶闸管的伏安特性晶闸管的主要参数额定正向平均电流 I F I\tiny F IF维持电流 I H I\tiny H IH触发电压 U G U\tiny G UG和触发电流 I G I\tiny G IG正向重复峰值电压 U D R M U\tiny DRM UDRM反向重复峰值电压 U R R M U\tiny RRM URRM 晶体闸流…

对Laxcus分布式操作系统的认知、价值、痛点解决的回答

下面是一位网友的提问&#xff0c;回答贴出来供大家参考&#xff0c;欢迎在下方留言评论。 问&#xff1a; Laxcus分布式操作系统有哪些与众不同的地方&#xff1f;它的价值在哪里&#xff1f;解决了哪些市场痛点&#xff1f;我公司现在已经使用Linux操作系统部署了一堆服务器…

设计模式-模板方法模式

定义 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个算法的步骤&#xff0c;并允许子类别为一个或多个步骤提供其实践方式。这种模式允许子类在不改变算法结构的情况下&#xff0c;重新定义算法的特定步骤。 模板方法模式的结构包括抽象类和具体子类。抽象类负责…

android 内存分析(待续)

/proc/meminfo memory状态解读 命令&#xff1a;adb shell cat /proc/meminfo内存分布log 查看方式 命令&#xff1a;adb shell cat /proc/meminfo 用途:可以整体的了解memory使用情况 我们说的可用memory一般以MemAvailable的数据为准。所以了解MemAvailable的组成可以帮助…

【LeetCode刷题-链表】--86.分隔链表

86.分隔链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }* }*/ class…

建筑木模板厂家批发

在建筑施工中&#xff0c;木模板是一种常见且重要的施工材料&#xff0c;用于搭建混凝土浇筑的支撑结构。选择合适的建筑木模板厂家进行批发&#xff0c;对于施工质量和效率至关重要。本文将介绍建筑木模板厂家批发的重要性&#xff0c;并推荐贵港市能强优品木业作为专业的建筑…

将文件读入C中的字符数组

当您使用 C 编程语言时&#xff0c;您可能会遇到一些需要将文件读入字符数组的问题&#xff0c;例如分析每个字符的频率&#xff0c;或者将所有句子的每个起始词从小写转换为大写&#xff0c;反之亦然。该解决方案非常简单&#xff0c;但对于不太了解文件读取或写入的人来说可能…

MVVM 模式与 MVC 模式:构建高效应用的选择

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

世岩清上:什么是元宇宙

元宇宙是一个虚拟的数字世界&#xff0c;它是一种全新的互联网形式&#xff0c;是一个可以提供身临其境体验的虚拟世界。元宇宙融合了现实和虚拟&#xff0c;允许用户在这个数字空间中自由探索、创造和交互。 元宇宙的概念源于科幻小说和电影&#xff0c;它最早出现在1992年的…

【SQL SERVER】定时任务

oracle是定时JOB&#xff0c;sqlserver是创建作业&#xff0c;通过sqlserver代理实现 先看SQL SERVER代理得服务有没有开 选择计算机右键——>管理——>服务与应用程序——>服务——>SQL server 代理 然后把SQL server 代理&#xff08;MSSQLSERVER&#xff09;启…

开源vs闭源,大模型的未来在哪一边?

开源和闭源&#xff0c;两种截然不同的开发模式&#xff0c;对于大模型的发展有着重要影响。开源让技术共享&#xff0c;吸引了众多人才加入&#xff0c;推动了大模的创新。而闭源则保护了商业利益和技术优势&#xff0c;为大模型的商业应用提供了更好的保障。 那么&#xff0c…

Vue3+java开发组队功能

Vue3java开发系统组队功能 需求分析 创建用户可以创建一个队伍&#xff08;一个房间队长&#xff09;&#xff0c;设置队伍人数&#xff0c;队伍名称&#xff08;标题&#xff09;&#xff0c;描述&#xff0c;超时时间。搜索加入&#xff0c;用户可以加入未满的队伍&#xf…

github新建项目

参考链接&#xff1a;Github上建立新项目超详细方法过程 在这里新建一个repositories 接下来就选择相关的信息&#xff1a; 然后create a new就行了 接下来需要创建文件&#xff1a;&#xff08;同时通过upload上传文件&#xff09; 每次最多上传100个文件&#xff0c;然后保…

OpenGL笔记:纹理的初次使用

说明 纹理的代码写完后&#xff0c;一直出不来结果&#xff0c;原因是没有设置GL_TEXTURE_MIN_FILTER&#xff0c; 它的默认值为GL_NEAREST_MIPMAP_LINEAR&#xff0c; 因为这里我还没用到Mipmap&#xff0c;所以使用这个默认值&#xff0c;结果是错误的&#xff0c;关于mipma…

软著项目推荐 深度学习二维码识别

文章目录 0 前言2 二维码基础概念2.1 二维码介绍2.2 QRCode2.3 QRCode 特点 3 机器视觉二维码识别技术3.1 二维码的识别流程3.2 二维码定位3.3 常用的扫描方法 4 深度学习二维码识别4.1 部分关键代码 5 测试结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天…

正点原子linux应用编程——提高篇1

在之前的入门篇学习中&#xff0c;都是直接在Ubuntu中进行验证的&#xff0c;对于嵌入式Linux系统来说&#xff0c;也是可以直接移植的&#xff0c;只需要使用嵌入式硬件平台对应的交叉编译工具编译应用程序即可运行。 在嵌入式Linux系统中&#xff0c;编写的应用程序通常需要…

Prometheus的详细部署

普罗米修斯下载网址: Download | Prometheus 准备两台机器&#xff1a; 192.168.58.152 prometheus 192.168.58.142 node_exporter 关闭防火墙和selinux&#xff1a; [rootlocalhost ~]# setenforce 0 && systemctl stop firewalld[rootlocalhost ~]# seten…

nginx https 一个端口代理多个前端项目

打包修改 &#xff01;&#xff01;&#xff01;注意&#xff1a;第一个location root 调用的项目不用修改 打包路径&#xff0c;直接用 ‘/’&#xff0c;其他项目或者需加 /mobile 路径 worker_processes 1; events {worker_connections 1024; } http {include mime.…