前端校招滴滴面试 第一篇

本文介绍了JavaScript中的Promise函数实现,图片懒加载原理,上传图片和预览功能,以及如何合并有序数组和理解操作系统LRU算法。此外,还涉及CSS层叠性原理和前端开发的学习资源,包括面试题和体系化的学习资料。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

A:

function delay(timer) {

return new Promise(function(resolve, reject) {

setTimeout(function() {

resolve();

}, timer)

})

}

2.图片懒加载原理 (lazy image)


A:给每张图片添加一个data-xxx的属性用于存放图片的src,检测到图片进入视野中的时候把data-xxx的属性赋给src

如何检测图片进入视野:

  • a.document.documentElement.clientHeight获取屏幕可视窗口高度

  • b.element.offsetTop获取元素相对于文档顶部的距离

  • c.document.documentElement.scrollTop获取滚动被卷去的高度

如果b-c<a成立则元素进入可视区域,

具体实现:参考第五题,js实现图片懒加载原理

3.上传图片和预览实现


上传:

//ajax的基本写法

function ajax(url,data,fn){

const xhr =new XMLHttpRequest();

xhr.onreadystatechange =function(){

if(xhr.readyState ===4 && xhr.status ===200){

fn(xhr.responseText);

}

}

const formData=new FormData();

formData.append(‘file’,data);

xhr.open(“post”,url,true);

xhr.send(formData);

}

预览:

4.有序数组合并


给定两个排序后的数组 A 和 B,其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法,将 B 合并入 A 并排序。

初始化 A 和 B 的元素数量分别为 m 和 n。

示例:

输入:

A = [1,2,3,0,0,0], m = 3

B = [2,5,6], n = 3

输出: [1,2,2,3,5,6]

想法
  • 合并两个有序数组,就是归并排序的一步

  • 归并排序会开辟一个长度为nums1 + nums2的空间,用两个指针遍历两个数组,把小的放到新数组里

  • 这里 nums1 就是我们开辟的新数组,我们沿用归并排序的思路,用三个指针

从后开始遍历的好处
  • 先比较较大的数,只需要把大的数放到数组nums1的后面即可

  • 如果先从小的比较,需要把数组nums1的所有数往后挪一位,时间复杂度较高

图示

const merge = (nums1, m, nums2, n) => {

let index1 = m - 1

let index2 = n - 1

let tail = m + n - 1

while (index2 >= 0) {

if (nums1[index1] > nums2[index2]) {

nums1[tail] = nums1[index1]

index1–

tail–

} else {

nums1[tail] = nums2[index2]

index2–

tail–

}

}

}

5.说说,操作系统LRU算法


LRU

近期最久未访问过的页,进行置换。

最久未访问过的页表示的,701进入,2进入,满,选择最久未访问过的,在2之前,7两次未访问,0一次,1无,故淘汰7,继续,0进入,不缺页,3进入时,1比2 多经过一轮,故1淘汰置换,以此类推。

6.css的层叠性


指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。

原则:

  • 1、样式冲突,遵循的原则是就近原则,即CSS的书写位置。

  • 2、样式不冲突,不会层叠

详细参考CSS样式表的继承性和层叠性(图文详解)

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)


前端面试题汇总


前端面试题是我面试过程中遇到的面试题,每一次面试后我都会复盘总结。我做了一个整理,并且在技术博客找到了专业的解答,大家可以参考下:

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

t/0432b8e539325b94948089383d0bfa8c.png)

由于篇幅有限,只能分享部分面试题,完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

春招面试的后期,运气和实力都很重要,自己也是运气比较好,为了回馈粉丝朋友们(毕竟自己也玩了这么久哈哈哈),整理个人感悟和总结以上。最后祝愿大家能够收获理想offer!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值