ms-前端八股文

1、暂时性死区

是指在 JavaScript 中使用 let 或 const 声明变量时,变量在其声明之前不能被访问或使用的特性。

var可以变量提升(在 JavaScript 中,变量声明提升是指在执行代码之前,变量声明会被提升到作用域的顶部。)

let 或 const 不能变量提升,提前打印会报错阻塞代码运行 

2、防抖与节流

3、关于面对后端给的上万张图片,我们如何进行最优处理

第一次只渲染10条,监听滚动事件,到达页面底部再渲染10条··········· 

4、vue的keep-alive生命周期函数  

4.1、

activated(组件激活时)            该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

4.2、

deactivated(组件停用时)        该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数,初始化操作放在actived里面,一旦切换组件,因为组件没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在deactived里面,在里面进行一些善后操作,这个时候created钩子函数只会执行一次,销毁的钩子函数一直没有执行。
 

5、CSR和SSR

CSR,即客户端渲染,数据的获取和加载都在客户端进行。而SSR则是服务端渲染,数据的获取和拼接都是在服务端进行,服务器直接返回拼接好的HTML文件,因此加载速度很快。CSR和SSR都各有优缺点。SSR对SEO更加友好,CSR反之;因为SSR到达的很快,因此不会有白屏问题,而CSR同样反之;SSR因为需要在服务端加载,因此会占用比较多的服务端资源,但CSR可以减少很多服务端资源的占用;在用户体验方面,CSR的页面跳转因为不是真正的跳转,因此会更加流畅,而SSR则是根据网络情况决定。总之,CSR和SSR都有它各自擅长的地方,如何选用主要根据具体的使用场景来决定。

6、同构渲染

同构渲染就是结合了CSR和SSR优势的一种渲染方式。同构渲染在首次渲染时与SSR是一样的,即直接返回静态HTML文件,但是有一点不同的是,同构渲染返回的文件中,不会包含已经处理好的数据。同构渲染返回的HTML文件中会包含link和script标签,浏览器在加载完这些标签后,会开始激活操作,此时,整个应用都会被CSR接管,作为CSR应用进行操作。

 7、大前端和前端的区别

  首先前端通常指的都是web前端,web前端的工作范围就是在web浏览器中,包括网站前端页面,web后端服务器开发或者从后端程序员处调用接口数据开发等等。

      而大前端涉及到的就比较多了,除了传统的web前端之外,还有其他PC界面,移动端,app,小程序等等显示界面都属于大前端开发的范畴。

8、模块化个人理解

常用es6模块化和require

模块化把相同代码进行提取,减少了代码冗余

实现了模块分类,提高了可维护性,达成按需引入的效果,增长了开发效率

问:模块化有哪几种标准?

答: 目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统

问:ES Modules 和 CommonJS的一些区别

答:

  1. 使用语法层面,CommonJs是通过module.exports,exports导出,require导入;ESModule则是export导出,import导入

  2. CommonJs是运行时加载模块,ESModule是在静态编译期间就确定模块的依赖

  3. ESModule在编译期间会将所有import提升到顶部,CommonJs不会提升require

  4. CommonJs导出的是一个值拷贝,会对加载结果进行缓存,一旦内部再修改这个值,则不会同步到外部。ESModule是导出的一个引用,内部修改可以同步到外部

  5. CommonJs中顶层的this指向这个模块本身,而ESModule中顶层this指向undefined

  6. CommonJS加载的是整个模块,将所有的接口全部加载进来,ESModule可以单独加载其中的某个接口

九、JS移动、复制DOM节点

可以看一下我的这篇文章(CSDN)

处理思路大概为将页面元素归为一个数组,通过下标置换来移动元素,复制元素则是在指定下标位置插入相同的值,页面重新渲染后就完成了移动复制页面元素的目的

十、闭包的写法

闭包闭包,老生常谈的闭包,内部函数访问外部函数的变量这个场景就是闭包,闭包的目的就是让内部函数访问外部函数的变量。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
 
const counter = createCounter();
counter(); // 输出:1
counter(); // 输出:2

十一、js将一个数组循环插入另一个数组(写起来跟轮播图似的,到达最后一个下标就从头开始)

      const imgUrlList=[require('@images/download.png'),require('@images/download-hover.png'),require('@images/cancel.png')];


const videoOriginInfo=res.data.data;
           let indexNow=0;
          videoOriginInfo.forEach(a=>{

            if(indexNow!=this.imgUrlList.length){
              a.imgUrl=this.imgUrlList[indexNow];
            indexNow++;
            }else{
              indexNow=0;
               a.imgUrl=this.imgUrlList[indexNow];
            }

          })
          this.videoList = videoOriginInfo;

十二、webpack 热更新怎么知道模块文件改变的 

热更新原理很简单,就是每个文件都有独特的编码名,每次修改只需要检测到相应文件发生变化,更新文件名,实现热更新,项目运行中几乎无感刷新。

那webpack是通过啥检测的,chokidar库(https://github.com/webpack/webpack-dev-server/blob/2aed7625d92f0eedfb691a4e4cf602658469c758/lib/Server.js#L3018C31-L3018C39),vite也是用的这个

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

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

相关文章

SSM 项目学习(Vue3+ElementPlus+Axios+SSM)

文章目录 1 项目介绍1.1 项目功能/界面 2 项目基础环境搭建2.1 创建项目2.2 项目全局配置 web.xml2.3 SpringMVC 配置2.4 配置 Spring 和 MyBatis , 并完成整合2.5 创建表,使用逆向工程生成 Bean、XxxMapper 和 XxxMapper.xml2.6 注意事项和细节说明 3 实现功能 01-…

【C++】二叉搜索数

目录 一、二叉搜索树的概念 二、二叉搜索树的模拟实现 1、定义节点 2、构造二叉树 3、析构二叉树 ​4、拷贝二叉树 5、二叉树赋值 6、插入节点 🌟【非递归方式】 🌟【递归方式】 7、打印节点 8、搜索节点 🌟【非递归方式】 &…

臻奶惠无人售货奶柜:定义新时代的健康生活方式

臻奶惠无人售货奶柜:定义新时代的健康生活方式 臻奶惠的无人售货奶柜,代表着科技与生活方式融合的一个新趋势,它不仅仅是一个简单的购买平台,更是一种全新的生活体验。在这个快节奏的时代,臻奶惠通过其无人售货奶柜&a…

第四百四十三回

文章目录 1. 概念介绍2. 思路与方法2.1 整体思路2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义Action菜单"相关的内容,本章回中将介绍如何获取屏幕相关参数.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…

(一)小案例银行家应用程序-介绍

案例示例如下所示: 登录之后就会出现下面所示: 项目案例流程图如下 ● 首先我们建立四个账号对象,用于登录 const account1 {owner: ItShare,movements: [200, 450, -400, 3000, -650, -130, 70, 1300],interestRate: 1.2, // %pin: 11…

数学建模-最优包衣厚度终点判别法(主成分分析)

💞💞 前言 hello hello~ ,这里是viperrrrrrr~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#xff…

线程安全问题与解决方法~

本文内容仅供对线程安全问题、锁的认识和使用等,进行一个介绍。适合小白的文章! 目录 一、线程安全问题 1.什么是线程安全问题 2.解释上述安全问题 3.线程安全的五大原因 二、使用锁解决线程安全问题 1.介绍锁 2.加锁操作 一、线程安全问题 在多线…

【吊打面试官系列】Redis篇 - 使用过 Redis 分布式锁么,它是什么回事?

大家好,我是锋哥。今天分享关于 【使用过 Redis 分布式锁么,它是什么回事?】面试题,希望对大家有帮助; 使用过 Redis 分布式锁么,它是什么回事? 先拿 setnx 来争抢锁,抢到之后&#…

C语言中的字符与字符串:魔法般的函数探险

前言 在C语言的世界里,字符和字符串是两个不可或缺的元素,它们像是魔法般的存在,让文字与代码交织出无限可能。而在这个世界里,有一批特殊的函数,它们如同探险家,引领我们深入字符与字符串的秘境&#xff0…

阿里云租用GPU服务器多少钱?

阿里云GPU服务器租用价格表包括包年包月价格、一个小时收费以及学生GPU服务器租用费用,阿里云GPU计算卡包括NVIDIA V100计算卡、T4计算卡、A10计算卡和A100计算卡,GPU云服务器gn6i可享受3折优惠,阿里云服务器网aliyunfuwuqi.com分享阿里云GPU…

【51单片机入门记录】A/D、D/A转换器PCF859应用

目录 一、IIC初始化代码 二、开发板电路图 三、PCF8591读/写字节操作流程及相关函数 (1)PCF8591(AD)读操作流程及代码 (2)PCF8591(AD)写操作流程及代码 四、应用示例-显示电压…

微信小程序 电影院售票选座票务系统5w7l6

uni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。 框架支持:springboot/Ssm/thinkphp/django/flask/express均支持 前端开发:vue.js 可选语言:pythonjavanode.jsphp均支持 运行软件…

JS继承与原型、原型链

在 JavaScript 中,继承是实现代码复用和构建对象关系的重要概念。本文将讨论原型链继承、构造函数继承以及组合继承等几种常见的继承方式,并提供相应的示例代码,并分析它们的特点、优缺点以及适用场景。 在开始讲解 JavaScript 的继承方式之…

RDD算子(四)、血缘关系、持久化

1. foreach 分布式遍历每一个元素,调用指定函数 val rdd sc.makeRDD(List(1, 2, 3, 4)) rdd.foreach(println) 结果是随机的,因为foreach是在每一个Executor端并发执行,所以顺序是不确定的。如果采集collect之后再调用foreach打印&#xf…

ADB(Android Debug Bridge)操作命令详解及示例

ADB(Android Debug Bridge)是一个强大的命令行工具,它是Android SDK的一部分,主要用于Android设备(包括真实手机和平板电脑以及模拟器)的调试、系统控制和应用程序部署。 下面是一些ADB的常用命令&#xff…

全面解析找不到msvcr110.dll,无法继续执行代码的解决方法

MSVCR110.dll的丢失可能导致某些应用程序无法启动。当用户试图打开依赖于该特定版本DLL文件的软件时,可能会遭遇“找不到指定模块”的错误提示,使得程序启动进程戛然而止。这种突如其来的故障不仅打断了用户的正常工作流程,也可能导致重要数据…

[中级]软考_软件设计_计算机组成与体系结构_08_输入输出技术

输入输出技术 前言控制方式考点往年真题 前言 输入输出技术就是IO技术 控制方式 程序控制(查询)方式:分为无条件传送和程序查询方式两种。 方法简单,硬件开销小,但I/O能力不高,严重影响CPU的利用率。 程序中断方式&#xff1…

机器学习第33周周报Airformer

文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制(MSA)2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA(DS-MSA)3.4 时间相关MSA&…

特定领域软件体系结构

1.DSSA的定义 简单地说,DSSA(Domain Specific Software Architecture)就是在一个特定应用领域中为一组应用提供组织结构参考的标准软件体系结构。 从功能覆盖的范围的角度有两种理解DSSA中领域的含义的方式: (1&#x…

微信小程序生命周期管理:从数据初始化到事件绑定

作为一个独立的应用开发平台,微信小程序提供了自己的生命周期机制,与我们熟悉的Vue.js框架有一些差异。掌握小程序生命周期的特点和使用技巧,对于开发高质量的小程序应用至关重要。深入理解和掌握小程序生命周期的使用技巧,将有助于我们构建出更加健壮和可维护的小程序应用。 小…