面试 4

news2025/1/16 11:09:46

1、作用域

w3scholl中定义:作用域指的是您有权访问的变量集合。

作用域是指在程序中定义变量的区域,该位置决定了变量的生命周期。通俗理解,作用域就是变量与函数的可访问范围,即作用域控制着变量和函数的可见性和生命周期。

在 JavaScript 中有两种作用域类型:

  • 局部作用域:在 JavaScript 函数中声明的变量,会成为函数的局部变量。(局部变量的作用域是局部的:只能在函数内部访问它们。)
  • 全局作用域:函数之外声明的变量,会成为全局变量。
    JavaScript 拥有函数作用域:每个函数创建一个新的作用域。(全局变量的作用域是全局的:网页的所有脚本和函数都能够访问它。)

2、变量提升

https://juejin.cn/post/7007224479218663455

  • JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的行为
  • 变量被提升后,会给变量设置默认值为 undefined
  • ES6的let和const不存在变量提升
    在这里插入图片描述

3、事件循环机制EventLoop

  • 宏任务:setTimeout、setInterval、setImmediate、UI Rending
  • 微任务:Promise、async\await
    在这里插入图片描述
    在这里插入图片描述

微任务是由ES6语法规定的
宏任务是由浏览器规定的
在这里插入图片描述
视频讲解:
事件循环-EventLoop
事件循环-宏任务、微任务
练习事件循环的网站

练习
在这里插入图片描述
上图依次打印:2 3 6 p2 p1 1 4 5
在这里插入图片描述
上图依次打印:script start -> async1 start -> async2 -> async1 end -> setTimeout
注:await 关键字,会等右边的方法执行完以后,再向下继续执行。

4、promise

特点:
①三种状态:pending(进行中)、resolved(已完成)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态,任何其他操作都不能改变这个状态。
②两种状态的转化:其一,从pending(进行中)到resolved(已完成)。其二,从pending(进行中)到rejected(已失败)。只有这两种形式的转变。
③Promise构造函数的原型对象上,有then()和catch()等方法,then()第一个参数接收resolved()传来的数据,catch()第一个参数接收rejected()传来的数据

作用:
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护

Promise.all([]).then(() => {}):等待数组里所有的方法执行完以后,再执行then里的回调,只要有一个失败,就不会继续执行后续代码

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

Promise.race([]).then(() => {}):以最先执行好的结果为准

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

5、async、await

①async/await是ES8新特性
②async/await是写异步代码的新方式,以前的方法有回调函数和Promise
③async/await是基于Promise实现的,它不能用于普通的回调函数
④async/await与Promise一样,是非阻塞的
⑤async/await使得异步代码看起来像同步代码

6、promis和async、await的区别

promise的出现解决了传统callback函数导致的地狱回调问题,但是他的语法导致它纵向发展形成了一个回调链,遇到复杂的业务场景显然是不美观的;
async、await看起来更加简洁,使得异步代码看起来像同步代码,只有await的代码执行完毕后才会执行下面的代码,与promise一样,也是非阻塞的;
async/await基于Promise实现,相当于Promise的升级版,不能用于普通的回调函数;

7、浏览器拿到html到现实在页面上,都做了什么

在这里插入图片描述
在这里插入图片描述

8、如何异步读取script标签(async、defer)

在浏览器加载html过程中,html解析器运行在主线程,并且在遇到<script> 标签后,会被阻塞,知道脚本从网络中被获取和执行,呃呃就是说<script>标签中的脚本会阻塞浏览器的渲染,这样也被称为“渲染人阻塞”。
async 异步:
该属性值为布尔值,指示浏览器是否允许异步执行该脚本,该属性仅对外链脚本有效。为 true 时,是告诉浏览器先把文件下载下来,在时机成熟的时候再执行。异步及哦啊笨一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发前或后执行。另外,标记为async的脚本并不保证按照指定他们的先后顺序执行,所以确保各个异步脚本互不依赖非常重要
defer:延迟:
该属性值为布尔值,指示浏览器该脚本将在文档完成解析后,触发DOMContentLoaded事件前执行,该属性仅对外链脚本生效。

总结:
script 标签有2个属性 async(异步) 和 defer(推迟);他们的功能是:
async:他是异步加载,不确定何时会加载好;页面加载时,带有 async 的脚本也同时加载,加载后会立即执行,如果有一些需要操作 DOM 的脚本加载比较慢时,这样会造成 DOM 还没有加载好,脚本就进行操作,会造成错误。
defer:页面加载时,带有 defer 的脚本也同时加载,加载后会等待 页面加载好后,才执行。

9、vue底层,数据修改,如何更新显示

10、vue3的双向数据绑定

11、插槽的作用

扩展组件能力,提高组件的复用性;
使用插槽可以将一些比较复杂的父传子的通信去掉,直接在父组件中完成后利用插槽显示到子组件中(这是由于父组件模板的内容在父组件作用域内编译,子组件模板的内容在子组件作用域内编译)。

12、浏览器的缓存机制

在这里插入图片描述
1、Cache-Control(不需要前端做额外处理)
取值为:

  • public:所有内容都被缓存
  • private:只有客户端可以缓存
  • no-cache:客户端缓存内容,但是是否使用缓存需要经过协商来验证决定
  • no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
  • max-age=10:缓存内通将在10秒后失效(不需要前端做额外处理)

2、Expires(不需要前端做额外处理)
缓存过期时间,用来制定资源到期的时间,是服务器的具体的时间点
在这里插入图片描述
在这里插入图片描述3、Last-Modified和If-Modified-Since

  • 浏览器首先发送一个请求,服务端在这个请求中,返回资源上一次的更新时间last-modifired,浏览器通过webstorage缓存下这个时间和资源
  • 浏览器在下次请求中,带上if-modified-since:[保存的last-modified的值]
  • 服务端根据浏览器发生的修改时间和服务端的修改时间进行对比。一致的话代表资源没有变,服务端返回403,让浏览器从缓存中读取资源,否则重新更新时间,处理数据,一并返回给浏览器

由于last-modified依赖的是保存的绝对时间,会出现误差的情况
- 保存的时间是以秒为单位的,1秒内多次修改无法捕捉到
- 各机器读取到的时间不一致,会有误差的可能性,为了改善这个问题,提出了使用etag

4、ETag和if-None-Match

  • 与 3 类似,不同的是,浏览器第一次请求时,服务端将更新时间last-modifired改成ETag由数据内容生成的一个md5值或者其他字符串,浏览器保缓存这个值和数据
  • 与 3 类似,浏览器下次请求时,请求头带上if-none-match:保存的etag值
  • 服务端通过得到的请求头中的值和服务端重新生成的etag值做比较,如果一致,代表资源没有改变,返回403,高度浏览器从缓存中读数据

13、打包构建流程

14、loader和plaugin的区别

15、响应式布局

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

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

相关文章

【C++】特殊类的设计(只在堆、栈创建对象,单例对象)

&#x1f30f;博客主页&#xff1a; 主页 &#x1f516;系列专栏&#xff1a; C ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ &#x1f60d;期待与大家一起进步&#xff01; 文章目录 一、请设计一个类&#xff0c;只能在堆上创建对象二、 请设计一个类&#xff0c;只能…

Golang interface 多态/类型断言

基本介绍 变量(实例)具有多种形态。面向对象的第三大特征&#xff0c;在Go语言&#xff0c;多态特征是通过接口实现的&#xff08;接口能够体现多态的特征&#xff09;。可以按照统一的接口来调用不同的实现。这时接口变量就呈现不同的形态。 在前面的Usb接口案例&#xff0c;u…

【01】LVGL-CodeBlock模拟器安装 | LVGL工程下载 | PC端模拟LVGL步骤

LVGL模拟器 1.LVGL模拟器介绍2.Windows环境搭建CodeBlock及获取LVGL工程3.PC端模拟LVGL4.总结 1.LVGL模拟器介绍 LVGL模拟器&#xff1a;使用PC端软件模拟LVGL运行&#xff0c;而不需要任何嵌入式硬件。优点&#xff1a;便于学习、跨平台协同开发 2.Windows环境搭建CodeBlock及…

【每日一题】—— B. Arrays Sum (Grakn Forces 2020)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

GO 语言的方法??

GO 中的方法是什么&#xff1f; 前面我们有分享到 GO 语言的函数&#xff0c;他是一等公民&#xff0c;那么 GO 语言中的方法和函数有什么区别呢&#xff1f; GO 语言中的方法实际上和函数是类似的&#xff0c;只不过在函数的基础上多了一个参数&#xff0c;这个参数在 GO 语…

深度学习(12)之模型训练[训练集、验证集、过拟合、欠拟合]

模型训练[训练集、验证集、过拟合、欠拟合] 在不断补充训练数据集的过程中&#xff0c;发现纯粹增加数据集并不会使得模型效果单向地变好&#xff0c;如果是多目标检测模型的话&#xff0c;常会出现精度变低的现象本文想总结在模型训练时的一些注意事项&#xff0c;比如训练集…

云务器迁移(腾讯云>华为云)

自己平时除了写些bug外还喜欢玩玩服务器&#xff0c;这不前几年买了一个域名&#xff0c;当时服务器买的是阿里云的&#xff0c;想着域名备案挺麻烦的就一直用着&#xff0c;只是在服务器到期后会重新购买其他运营商的&#xff08;关键是续不起&#x1f92b;&#xff09; 这不最…

华为eNSP配置专题-VRRP的配置

文章目录 华为eNSP配置专题-VRRP的配置0、参考文档1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、基本终端构成和连接 2.VRRP的配置2.1、PC1的配置2.2、接入交换机acsw的配置2.3、核心交换机coresw1的配置2.4、核心交换机coresw2的配置2.5、配置VRRP2.6、配置出口…

基于Java的企业门户管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

linux性能分析(三)查看系统的性能指标

一 查看系统的性能指标 这里简略的将系统监控指标分为&#xff1a;cpu、memory、disk、network、os 五大类强调&#xff1a; 这五类命令的输出与/proc虚目录下的文件信息强相关说明&#xff1a; 后续专门讲解这五大类的系统命令,尽可能全面罗列每个工具的使用场景补充&#x…

智能水印相机微信小程序源码

相信大家日常在生活中或者工作中都有使用过水印相机来拍照记录吧&#xff0c;但是又要在手机上面多下载一个APP。 那么小编今天给大家带来一款智能水印相机&#xff0c;拍照自动添加时间、地点、经纬度等水印文字&#xff0c;可用于工作考勤、学习打卡、工作取证等&#xff0c…

深度学习 | Pytorch深度学习实践 (Chapter 1~9)

一、overview 基于pytorch的深度学习的四个步骤基本如下&#xff1a; 二、线性模型 - Linear Model 基本概念 数据集分为测试集和训练集&#xff08;训练集、开发集&#xff09;训练集&#xff08;x&#xff0c;y&#xff09;测试集只给&#xff08;x&#xff09;过拟合&#…

世界国家/地区行驶方向数据

Part1数据背景 道路通行方向规则是交通规则的重要部分之一。不同国家及地区通行方向并不一样&#xff0c;受风俗、习惯、风潮因素等影响。 最近也在学道路行驶&#xff0c;结果差强人意&#xff0c;继续努力吧。祝学车的小伙伴们一次过~ Part2数据详情 今天分享的国家/地区行…

二叉搜索树的详解及Map和Set的介绍

目录 1.二叉搜索树 1.1二叉搜索树的介绍 1.2.二叉搜索树的实现 1.2.1二叉搜索树的创建 1.2.2查找关键字 1.2.3插入 1.2.4删除 1.3二叉搜索树的性能分析 2.Map Map官方文档 2.1Map 的常用方法说明 2.2关于Map.Entry的说明,> 2.3注意事项 2.4reeMap和HashMap的区别 …

Django小白开发指南

文章目录 HTTP协议socket实现一个web服务器WSGI实现一个web服务器WSGI实现支持多URL的web服务器WSGI实现图片显示的web服务器MVC && MTV1.MVC2.MTV3.总结 一、创建Django项目1.创建项目2.创建app3.第一次django 请求 二、模板1.配置settings.py2.模板语法3.继承模板 三…

[云原生1.]Docker数据管理与Cgroups资源控制管理

文章目录 1. Docker的数据管理1.1 数据卷1.1.1 示例 1.2 数据卷容器 2. 容器互联3. Cgroups资源控制管理3.1 简介3.2 cgroups的主要功能3.3 cpu时间片的简单介绍3.4 对CPU使用的限制3.4.1 对CPU使用的限制&#xff08;基于单个容器&#xff09;3.4.2 对CPU使用的限制&#xff0…

MySQL高可用架构学习

MHA&#xff08;Master HA&#xff09;是一款开源的由Perl语言开发的MySQL高可用架构方案。它为MySQL 主从复制架构提供了 automating master failover 功能。MHA在监控到 master 节点故障时&#xff0c;会提升其中拥有最新数据的 slave 节点成为新的 master 节点&#xff0c;在…

基于Java的农资采购销售管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

(转)STR 内核做了什么

参考这篇文章&#xff1a; Linux电源管理(6)_Generic PM之Suspend功能 写的很清晰

了解SUI质押和发行计划

SUI是Sui链上的原生资产&#xff0c;总供应量100亿个&#xff0c;并非所有SUI token在一开始就完全流通。相反&#xff0c;随着Sui生态的发展&#xff0c;新token将逐步解锁以奖励生态的早期支持者。质押补贴用于支持网络当前的运营&#xff0c;并由Sui基金会分发给Sui的构建者…