当前位置: 首页 > news >正文

前端面试灵魂提问(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的转化吗?

不受跨域限制的标签

相关文章:

前端面试灵魂提问(1)

1.自我介绍 2.在实习中&#xff0c;你负责那一模块 3.any与unknow的异同 相同点&#xff1a;any和unkonwn 可以接受任何值 不同点&#xff1a;any会丢掉类型限制&#xff0c;可以用any 类型的变量随意做任何事情。unknown 变量会强制执行类型检查&#xff0c;所以在使用一个…...

Linux中项目部署步骤

安装jdk&#xff0c;tomcat 安装步骤 1&#xff0c;将压缩包&#xff0c;拷贝到虚拟机中。 通过工具&#xff0c;将文件直接拖到虚拟机的/home下 2&#xff0c;回到虚拟机中&#xff0c;查看/home下&#xff0c;有两个压缩文件 3&#xff0c;给压缩文件做解压缩操作 tar -z…...

cmd下查看python命令的用法

在cmd下&#xff0c;可以运行python --help或者py --help来查看python命令的用法。例如&#xff1a;...

大型语言模型在实体关系提取中的应用探索(二)

上一篇文章我们探讨了如何使用大语言模型进行实体关系的抽取。本篇文章我们将进一步探索这个话题。比较一下国内外几款知名大模型在相同的实体关系提取任务下的表现。由于精力有限&#xff0c;我们无法全面测试各模型的实体关系抽取能力&#xff0c;因此&#xff0c;看到的效果…...

Easy Excel设置表格样式

1. 设置通用样式 import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.annotation.write.style.*; import com.fasterxml.jackson.annotation.JsonFormat; import com.xxx.npi.config.easypoi.EasyExcelDateConverter; import lombok.Data; import …...

HarmonyOS/OpenHarmony应用开发

OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目, 目标是面向全场景、全连接、全智能时代, 搭建一个智能终端设备操作系统的框架和平台, 促进万物互联产业的繁荣发展。 了解OpenHarmony HarmonyOS是华为通过OpenHarmony项目&#xff0c;结合商业…...

孩子都能学会的FPGA:第二十一课——用线性反馈移位寄存器实现伪随机序列

&#xff08;原创声明&#xff1a;该文是作者的原创&#xff0c;面向对象是FPGA入门者&#xff0c;后续会有进阶的高级教程。宗旨是让每个想做FPGA的人轻松入门&#xff0c;作者不光让大家知其然&#xff0c;还要让大家知其所以然&#xff01;每个工程作者都搭建了全自动化的仿…...

国内 AI 成图第一案!你来你会怎么判?

我国目前并未出台专门针对网络爬虫技术的法律规范&#xff0c;但在司法实践中&#xff0c;相关判决已屡见不鲜&#xff0c;K 哥特设了“K哥爬虫普法”专栏&#xff0c;本栏目通过对真实案例的分析&#xff0c;旨在提高广大爬虫工程师的法律意识&#xff0c;知晓如何合法合规利用…...

快速登录界面关于如何登录以及多账号列表解析以及config配置文件是如何读取(1)

快速登录界面关于如何登录以及多账号列表解析以及config配置文件是如何读取 1、快速登录界面关于如何登录以及快速登录界面账号如何显示 如图所示:根据按下按钮一键登录中途会发生什么。 关于一键登录按钮皮肤skin的设置: <Button name"QuickLoginOkBtn" text&q…...

finebi 新手入门案例

finebi 新手入门案例 连锁超市销售数据分析 步骤&#xff1a; 准备公共数据新建分析主题处理数据在数据中分析在图形中分析数据大屏 准备公共数据 点击公共数据 点击新建文件夹 修改文件夹名称 上传数据 鼠标悬停在文件夹上&#xff0c;右侧出现 鼠标悬停在文件夹上&#x…...

1. 小游戏(贪心)

题干&#xff1a; 谷同学很喜欢玩计算机游戏&#xff0c;特别是战略游戏&#xff0c;但是有时他不能尽快找到解所以常常感到很沮丧。现在面临如下问题&#xff1a;他必须在一个中世纪的城堡里设防&#xff0c;城堡里的道路形成一棵无向树。要在结点上安排最少的士兵使得他们可以…...

记录 | c++打印变量类型

c打印变量类型: 使用 typeid(变量名).name() int main(){std::cout << "type of ss : " << typeid(ss).name() << std::endl; }...

nodejs_vue+vscode美容理发店会员管理系统un1dm

按照设计开发一个系统的常用流程来描述系统&#xff0c;可以把系统分成分析阶段&#xff0c;设计阶段&#xff0c;实现阶段&#xff0c;测试阶段。所以在编写系统的说明文档时&#xff0c;根据系统所处的阶段来描述系统的内容。 绪论&#xff1a;这是对选题的背景&#xff0c;意…...

C语言 操作符详解

C语言学习 目录 文章目录 前言 一、算术操作符 二、移位操作符 2.1 左移操作符 2.2 右移操作符 三、位操作符 3.1 按位与操作符 & 3.2 按位或操作符 | 3.3 按位异或操作符 ^ 四、赋值操作符 五、单目操作符 5.1 逻辑反操作符&#xff01; 5.2 正值、负值-操作符 5.3 取地址…...

成为AI产品经理——回归模型评估(MSE、RMSE、MAE、R方)

分类问题的评估是看实际类别和预测类别是否一致&#xff0c;它的评估指标主要有混淆矩阵、AUC、KS。回归问题的评估是看实际值和预测值是否一致&#xff0c;它的评估指标包括MAE、MSE、RMSE、R方。 如果我们预测第二天某支股票的价格&#xff0c;给一个模型 y1.5x&#xff0c;…...

【C++11(一)】右值引用以及列表初始化

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; C11 1. 前言2. 统一的列表初始化3. initializer…...

通俗理解Jenkins是什么?

目录 通俗理解 Jenkins是什么&#xff1f; 通俗理解 假设你有一个软件项目&#xff0c;多个开发者在一起写代码。每当有人提交新的代码时&#xff0c;你想要自动地构建、测试这些代码&#xff0c;确保它们没有引入问题。 Jenkins就像一个聪明的助手&#xff0c;会在有人提交…...

格雷希尔帮助仪器仪表测试时快速密封的G60C系列接头其优势有哪些

仪器仪表在工业领域中扮演着重要的角色&#xff0c;如&#xff1a;压力表&#xff0c;压力传感器、压力变送器、压力开关、压力歧管等这些&#xff0c;在工业领域中都是随处可见的&#xff0c;其数据的精度直接影响着产品在生产过程中的质量和安全性&#xff1b;因此&#xff0…...

系统运维工具KSysAK——让运维回归简单

系统运维工具KSysAK——让运维回归简单 1.基本信息 1.1概述 系统异常定位分析工具KSysAK是云峦操作系统研发及运维人员总结开发及运维经验&#xff0c;设计和研发的多个运维工具的集合&#xff0c;可以覆盖系统的日常监控、线上问题诊断和系统故障修复等常见运维场景。 工具…...

NowCoder | KY11 二叉树遍历

NowCoder | KY11 二叉树遍历 OJ链接 简单来说就是构建这个二叉树定义结构体通过递归方式根据输入的字符串构建二叉树。对于输入字符串中的每个字符&#xff0c;如果是 ‘#’ 表示空节点&#xff0c;否则创建一个新节点&#xff0c;并递归地构建左右子树。 #include <limit…...

android.view.WindowLeaked解决方法

问题 我在使用WindowManager添加一个button&#xff0c; windowManager.addView(button,layoutParams);然后关闭当前的这个Activity的时候遇到了WindowLeak这个问题&#xff0c;也就是所谓的窗体泄露。 原因 主要原因是因为android只允许在UI主线程操作&#xff0c;我在使用W…...

浪潮信息KeyarchOS的飞跃之路

1.背景 在正式向大家介绍KOS之前&#xff0c;我们先关注这样一些问题。 传统操作系统在大规模数据处理、高性能计算和人工智能应用方面面临着一些瓶颈问题&#xff0c;包括存储和访问效率、数据传输和通信效率、并行计算性能等等问题。为了能够更好的改进这些问题&#xff0c…...

C++基础 -41- 迭代器

每个stl 模板接口都有一个专用的迭代器 迭代器就是 stl 库中的 一个特殊指针&#xff0c;功能与指针类似(类似但不是) 迭代器定义格式 迭代器的使用,使用迭代器遍历向量容器的参数 代码运行结果 无论使用普通方式还是迭代器方式去都可以遍历vector容器...

zookeeper心跳检测 (实操课程)

本系列是zookeeper相关的实操课程&#xff0c;课程测试环环相扣&#xff0c;请按照顺序阅读来学习和测试zookeeper。 阅读本文之前&#xff0c;请先阅读----​​​​​​zookeeper 单机伪集群搭建简单记录&#xff08;实操课程系列&#xff09;zookeeper 客户端常用命令简单记录…...

社区新零售:重塑零售业的全新模式

社区新零售&#xff1a;重塑零售业的全新模式 近年来&#xff0c;新零售业成为了研究的焦点&#xff0c;它是一种以互联网为基础的零售形式。新零售通过运用先进技术手段&#xff0c;如大数据和人工智能&#xff0c;对商品的生产、流通和销售过程进行升级改造&#xff0c;重新构…...

北京华联BHGMall“宠粉模式”不断迭代,强体验注互动成行业UP主

在今年双11热度遇冷后&#xff0c;双十二被官宣取消&#xff0c;而这背后本质已经间接印证&#xff1a;传统“电商大促”的模式&#xff0c;已经难以为继。反观线下消费市场&#xff0c;则是以持续恢复和增长成为经济恢复的亮点&#xff0c;从线下客流量的快速回升&#xff0c;…...

前端时间的失败总结复盘

分享失败经验&#xff0c;前段时间的总结复盘&#xff1a; 与伙伴合作面对异常决策要及时提出质疑&#xff0c;怼&#xff0c;别太客气&#xff0c;客气起来&#xff0c;小心翼翼在意他人情绪那么这个项目就会让人难受&#xff0c;不要因为因为伙伴身上有标签/光环/权威就觉得…...

Ribbon 负载均衡

1、负载均衡整体流程 2、负载均衡流程逐级跟踪运行 (1) LoadBlanced 注解可以使LoadBalancerInterceptor拦截到&#xff1b; (2)LoadBalancerInterceptor 实现了ClientHttpRequestInterceptor接口&#xff1b; (3)ClientHttpRequestInterceptor接口释义如下&#xff1b; (4)int…...

微服务实战系列之Cache(技巧篇)

前言 凡工具必带使用说明书&#xff0c;如不合理的使用&#xff0c;可能得到“意外收获”。这就好比每个人擅长的领域有所差异&#xff0c;如果放错了位置或用错了人&#xff0c;也一定会让 Leader 们陷入两难之地&#xff1a;“上无法肩负领导之重托&#xff0c;下难免失去伙伴…...

6.17验证二叉树(LC98-M)

算法&#xff1a; 中序遍历下&#xff0c;输出的二叉搜索树节点的数值是有序序列。 有了这个特性&#xff0c;验证二叉搜索树&#xff0c;就相当于变成了判断一个序列是不是递增的了。 具体地&#xff1a;中序遍历时&#xff0c;判断当前节点是否大于中序遍历的前一个节点&a…...

手机app软件开发/seo外链资源

python3正则要加括号&#xff01;&#xff01;&#xff01; 转载于&#xff1a;https://www.cnblogs.com/chuxiuhong/p/5885073.html 本文主要为没有使用正则表达式经验的新手入门所写。 转载请写明出处 引子 首先说 正则表达式是什么&#xff1f; 正则表达式&#xff0c;又…...

网站建设手机银行修改登录密码/优化大师win10下载

<#if startTime?datetime lt .now?datetime>:年月日时分秒比较 <#if startTime?date lt .now?date>:年月日比较 <#if startTime?time lt .now?time>:时分秒比较...

广东佛山如何制作网站公司/google app

1.简单工厂模式 简单工厂模式专门定义一个类来负责创建其他类的实例&#xff0c;被创建的实例通常都具有共同的父类。 注意&#xff1a; 实际上简单工厂不是一个设计模式&#xff0c;更多程度上比较像一种编程习惯。 结构图&#xff1a; Factory&#xff1a;工厂类&#xff…...

辉县网站建设/seo网站内部优化

资深敏捷专家Lisa Crispin在最近的讲座和参与合著的《Agile Testing – A Practical Guide for Testers and Agile Teams》中分享了敏捷软件测试的七个关键成功要素&#xff0c;包括​使用团队整体参与的方法、采用敏捷测试思维、​自动化回归测试、提供并获取反馈、构建核心实…...

做期货的一般看什么网站/湖南省人民政府官网

Pixelmator Pro中文版图像处理软件来啦&#xff0c;让人工智能更好地服务于图片编辑&#xff01;&#xff01;你会用它来处理图片吗&#xff1f;新的进化版本Pixelmator Pro Mac 激活版&#xff0c;拥有众多新功能&#xff0c;并且令人工智能在图像处理中发挥了更大的作用。将人…...

百度官方网站怎么做/网上接单平台有哪些

和IOS开发和Windows Phone开发相比&#xff0c;Android是开放的&#xff0c;Android上的开发也相对更加灵活&#xff0c;能够做很多事情。有的朋友会发现&#xff0c;在某些Android应用安装以后&#xff0c;第一次运行&#xff0c;就会在桌面创建快捷方式。这是如何做到的呢&am…...