前端面试合集(二)

前端面试题合集

      • 1.懒加载的原理及实现了解吗
      • 2.如何理解JS异步
      • 3.阐述一下 JS 的事件循环
      • 4.JS 中的计时器能做到精确计时吗?为什么?

1.懒加载的原理及实现了解吗

原理:当图片没有到达可视范围内时,图片不加载,当图片一旦进入可视范围,图片就会加载。先加载一部分数据进行页面展示,当触发了某个条件之后,会异步加载剩余的数据,且不会影响原有的数据,同时可以很大一部分减少服务器资源的消耗。
在这里插入图片描述
实现:

<body>	<img data-src="../img/1.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/2.jpg"  src="../img/loading.png" alt="xxx"><img data-src="../img/3.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/4.jpeg" src="../img/loading.png" alt="xxx"><img data-src="../img/5.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/6.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/7.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/8.png"  src="../img/loading.png" alt="xxx"><img data-src="../img/9.png"  src="../img/loading.png" alt="xxx">
</body>

js实现:当offsetTop <= scrollTop + clientHeight时,说明元素以及进入可视区,可以进行图片加载了

	//offsetTop为图片的顶部 window.innerHeight为窗口的高度  window.scrollY为鼠标滚动距离let num = document.getElementsByTagName("img").length; //9let images = document.getElementsByTagName("img");let n = 0;//n的存在是为了防止重复加载已经加载完的图片ergodic();window.onscroll = ergodic;function ergodic() {for(let i = n; i < num; i++) {if(images[i].offsetTop < window.innerHeight + window.scrollY) {if(images[i].getAttribute("src") === "../img/loading.png") {images[i].src = images[i].getAttribute("data-src");}n = i + 1;}}}

2.如何理解JS异步

JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。
而渲染主线程承担着诸多的工作,渲染页面、执行JS、解析HTML、解析CSS,执行事件回调,执行计时器回调等等都在其中运行。
如果使用同步的方式,就极有可能导致主线程产生阻塞,从而导致消息队列中的很多其他任务无法得到执行。这样一来,一方面会导致繁忙的主线程白白的消耗时间,另一方面导致页面无法及时更新,给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时,比如计时器、网络、事件监听,主线程将任务交给其他线程去处理,自身立即结束任务的执行,转而执行后续代码。当其他线程完成时,将事先传递的回调函数包装成任务,加入到消息队列的末尾排队,等待主线程调度执行。
在这种异步模式下,浏览器永不阻塞,从而最大限度的保证了单线程的流畅运行。

3.阐述一下 JS 的事件循环

事件循环又叫做消息循环,是浏览器渲染主线程的工作方式

在 Chrome 的源码中,它开启一个不会结束的 for 循环,每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列,这种说法目前已无法满足复杂的浏览器环境,取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释,每个任务有不同的类型,同类型的任务必须在同一个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级,在一次事件循环中,由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列,微队列的任务一定具有最高的优先级,必须优先调度执行。

4.JS 中的计时器能做到精确计时吗?为什么?

不行,因为:

  1. 计算机硬件没有原子钟,无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调用的是操作系统的函数,也就携带了这些偏差
  3. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层,则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响,计时器的回调函数只能在主线程空闲时运行,因此又带来了偏差(面试官想听的)

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

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

相关文章

Mobileye CEO来华:只有能控制住成本的公司,才能活下来

‍作者|德新 编辑|王博 上午9点近一刻&#xff0c;Mobileye CEO Amnon Shuashua步入酒店的会议室。由于Amnon本人是以色列希伯来大学的计算机科学教授&#xff0c;大部分人更习惯称他为「教授」。 时近以色列的新年&#xff0c;这趟教授的中国之行安排十分紧凑。 他率领了一…

使用go语言实现自建区块链系统的一些环境的一些总结

1.go版本 可以使用gvm安装&#xff0c;但gvm需要科学上网才能下载&#xff0c;而且安装脚本内部有的也需要科学上网&#xff0c;如果其他的最好还是安装gvm 因此这里直接安装go go官网选择go1.17.1.linux-amd64.tar.gz ### 1.解压 tar -xvf go1.17.1.linux-amd64.tar.gz ### …

遥遥领先的内存函数

目录 ​编辑 函数介绍 1.1 strlen 1.2 strcpy 1.3 strcmp 1.4 strcat 1.5 strstr 2.1 memcpy 2.2 memmove 2.3 memcmp 函数实现 1.1 strlen 1.2 strcpy 1.3 strcmp 1.4 strcat 1.5 strstr 2.1 memcpy 2.3 memcmp 函数介绍 1.1 strlen size_t strlen ( const char *…

iOS CoreMotion获取传感器数据

CoreMotion是iOS系统目前用于处理加速度计&#xff0c;陀螺仪&#xff0c;计步器和环境相关事件。 Core Motion的报告来自iOS设备的板载硬件的运动和环境相关数据&#xff0c;包括加速度计和陀螺仪&#xff0c;以及计步器&#xff0c;磁力计和气压计。 为了以特定的时间间隔接…

SpringBoot整合Redis,基于Jedis实现redis各种操作

前言&#xff08;三步教你学会redis&#xff0c;主打一个实用&#xff09; springboot整合redis步骤&#xff0c;并基于jedis对redis数据库进行相关操作&#xff0c;最后分享非常好用、功能非常全的redis工具类。 第一步&#xff1a;导入maven依赖 <!-- springboot整合re…

小程序代码管理

“微信开发者工具”点击版本管理&#xff0c;然后点击代码管理会打开代码管理网页。 选择对应的项目组。 进来后点击创建项目。 输入git名称&#xff0c;然后选择命名空间&#xff0c;最后创建即可。 在刚才的“微信开发者工具”选择设置&#xff0c;然后添加远程。 输入名称&…

朋友圈大佬都去读研了,这份备考书单我码住了

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

pycharm安装jupyter,用德古拉主题,但是输入行全白了,看不清,怎么办?

问题描述 今天换了以下pycharm主题&#xff0c;但是jupyter界面输入代码行太白了&#xff0c;白到看不清楚这行的字&#xff0c;更不知道写的是什么&#xff0c;写到哪了&#xff0c;这还是挺烦人的&#xff0c;其他都挺正常的。 问题分析 目前来看有两个原因&#xff1a; 1、…

【新版vscode配置自动补全括号】

vscode新版配置自动补全括号方法 新版配置方法(Pylance) ①设置 -> 扩展 -> Pylance -> 将 python.analysis.completeFunctionParens 下方的选项打勾 ②直接在settings.json中添加"python.analysis.completeFunctionParens": true

【Apollo】自动驾驶技术的介绍

阿波罗是百度发布的名为“Apollo&#xff08;阿波罗&#xff09;”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。 帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 百度开放此项计划旨在建立一个以合作为中…

vue3 - setup之defineEmits

基础形式 子组件 const emits defineEmits([name])//触发emits事件 const eventButton () > {emits(name) }父组件 <script> const handleName () >{ } </script> <template><ComponentName name"handleName" /> </template>…

如何评估ChatGPT的语言多样性和方言识别能力?

评估ChatGPT的语言多样性和方言识别能力是重要的&#xff0c;特别是在处理全球性用户群体和多语种社区的情况下。这需要综合考虑ChatGPT的能力来理解、生成和适应不同语言和方言。在这篇回答中&#xff0c;我将详细讨论如何评估ChatGPT的语言多样性和方言识别能力&#xff0c;并…

ros2 学习launch文件组织工程 yaml配置文件

简单范例 功能描述 使用launch文件&#xff0c;统一管理工程&#xff0c;实现img转点云&#xff0c;发送到img_pt的topic&#xff0c;然后用reg_pcl节点进行subscribe&#xff0c;进行点云配准处理&#xff0c;输出融合后的点云到map_pt的topic。最后由rviz2进行点云展示。 …

CSS - 快速实现悬浮吸顶,当页面滑动一定距离时固定吸附在顶部(position: sticky)

效果图 如下图所示&#xff0c;利用 position: sticky 属性轻松实现。 示例代码 新建一个 *.html 文件&#xff0c;一键复制运行起来。 <body><section class"content"><div class"item">我是悬浮吸顶区域</div><h1>我是…

AI时代:探索机器学习与深度学习的融合之旅

文章目录 1. 机器学习和深度学习简介1.1 机器学习1.2 深度学习 2. 为什么融合是必要的&#xff1f;2.1 数据增强2.2 模型融合 3. 深入分析&#xff1a;案例研究3.1 传统机器学习方法3.2 深度学习方法3.3 融合方法 4. 未来展望结论 &#x1f389;欢迎来到AIGC人工智能专栏~AI时代…

【Java Web】HTML 标签 总结

目录 1.HTML 2.标签 1. head 标签 1.图标 2.样式居中 2. body 标签 1.注释 &#xff1a; 2.加载图片 3.加载视频 效果 4.区域 效果 5.上下跳转&#xff0c;页面跳转 效果 6.表格 效果 7.有序列表&#xff0c;无序列表 效果 8.登录 效果 9.按钮 10.多选框…

Mybatis中的#{}和${}的区别

#{}和${}他们两都是替换参数的作用&#xff0c;但也还是有很大区别的。 目录 一、${} 二、#{} 三、注意点 一、${} 它是直接替换过来&#xff0c;不添加其它的什么。 比如下面的sql语句 select *from user where id${id} 如果id1&#xff0c;那么他替换过来就还是1&#xff…

Web之tomcat

[TOC]&#xff08;文章目录&#xff09; 1.程序架构 1.C/S(client/server) 比如&#xff1a;QQ、 微信、 LOL 优点&#xff1a;有一部分代码写在客户端&#xff0c; 用户体验比较好。 缺点&#xff1a; 服务器更新&#xff0c;客户端也要随着更新。 占用资源大。 2. B/S(brows…

【Spatial-Temporal Action Localization(二)】论文阅读2017年

文章目录 1. ActionVLAD: Learning spatio-temporal aggregation for action classification [code](https://github.com/rohitgirdhar/ActionVLAD/)[](https://github.com/rohitgirdhar/ActionVLAD/)摘要和结论引言&#xff1a;针对痛点和贡献相关工作模型框架思考不足之处 2.…

C语言双向链表

文章目录 前言双向链表链表头结点的创建节点尾插与尾删节点头插与头删特定位置插入或删除节点链表节点查找双向链表的销毁 链表的打印 前言 假期时间因为为学校开学考试做准备所以一直没更新博客&#xff0c;今天开始博客会陆续更新。 双向链表 之前我们说过了顺序表和单链表…