前端面试灵魂提问

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,一经查实,立即删除!

相关文章

工具及方法 - 如何阅读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 晶体闸流…

【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;并推荐贵港市能强优品木业作为专业的建筑…

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

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

【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…

机器视觉双目测宽仪具体有什么优势?

双目测宽仪是机器视觉原来制造而成的智能宽度检测设备&#xff0c;广泛应用于板材类产品的宽度检测。通过测宽仪的使用&#xff0c;实时了解产品宽度品质&#xff0c;进行超差提示&#xff0c;减少废品的生产。 双目测宽仪优势 测量软件界面显示&#xff1a;产品规格、标称宽…

Android控件全解手册 - 任意View缩放平移工具-源码

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

竞赛选题 题目:基于机器视觉的图像矫正 (以车牌识别为例) - 图像畸变校正

文章目录 0 简介1 思路简介1.1 车牌定位1.2 畸变校正 2 代码实现2.1 车牌定位2.1.1 通过颜色特征选定可疑区域2.1.2 寻找车牌外围轮廓2.1.3 车牌区域定位 2.2 畸变校正2.2.1 畸变后车牌顶点定位2.2.2 校正 7 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享…

yolov8-pose姿势估计,站立识别

系列文章目录 基于yolov8-pose的姿势估计模式,实现站姿,坐姿,伏案睡姿识别,姿态动作识别接口逻辑作参考。本文以学习交流,分享,欢迎留言讨论优化。 yoloPose-姿势动作识别 系列文章目录前言一、环境安装二、使用yolov8-pose1.导入模型,预测图像三.姿势动作识别之站立总…

人工智能_机器学习053_支持向量机SVM目标函数推导_SVM条件_公式推导过程---人工智能工作笔记0093

然后我们再来看一下支持向量机SVM的公式推导情况 来看一下支持向量机是如何把现实问题转换成数学问题的. 首先我们来看这里的方程比如说,中间的黑线我们叫做l2 那么上边界线我们叫l1 下边界线叫做l3 如果我们假设l2的方程是上面这个方程WT.x+b = 0 那么这里 我们只要确定w和…

<Linux> 文件理解与操作

目录 前言&#xff1a; 一、关于文件的预备知识 二、C语言文件操作 1. fope 2. fclose 3. 文件写入 3.1 fprintf 3.2 snprintf 三、系统文件操作 1. open 2. close 3. write 4. read 四、C文件接口与系统文件IO的关系 五、文件描述符 1. 理解文件描述符 2. 文…

一则 MongoDB 副本集迁移实操案例

文中详细阐述了通过全量 增量 Oplog 的迁移方式&#xff0c;完成一套副本集 MongoDB 迁移的全过程。 作者&#xff1a;张然&#xff0c;DBA 数据库技术爱好者~ 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。 本文约 900…