2024年最全Web APIs-Day5(2)，2024年最新一起“干完”这份300页1000道面试题

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)

4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标

5. 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动

代码如下（示例）：

var box = document.querySelector(‘.box’);

box.addEventListener(‘mousemove’, function(e) {

var x = e.pageX - this.offsetLeft;

var y = e.pageY - this.offsetTop;

this.innerHTML = ‘x坐标是’ + x + ’ y坐标是’ + y;

})

二、元素可视区client系列

==============================================================================

2.1 client概述

---

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client

系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

三、元素滚动 scroll 系列

===============================================================================

3.1 scroll概述

---

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

3.2 页面被卷去的头部

---

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

3.3 案例：仿淘宝固定右侧侧边栏

---

1. 原先侧边栏是绝对定位

2. 当页面滚动到一定位置，侧边栏改为固定定位

3. 页面继续滚动，会让 返回顶部显示出来

3.4 案例分析：

---

1. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document

2. 滚动到某个位置，就是判断页面被卷去的上部值。

3. 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset

4. 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset

5. 其实这个值 可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了

代码如下（示例）：

//1. 获取元素

var sliderbar = document.querySelector(‘.slider-bar’);

var banner = document.querySelector(‘.banner’);

// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面

var bannerTop = banner.offsetTop

// 当我们侧边栏固定定位之后应该变化的数值

var sliderbarTop = sliderbar.offsetTop - bannerTop;

// 获取main 主体元素

var main = document.querySelector(‘.main’);

var goBack = document.querySelector(‘.goBack’);

var mainTop = main.offsetTop;

// 2. 页面滚动事件 scroll

document.addEventListener(‘scroll’, function() {

// console.log(11);

// window.pageYOffset 页面被卷去的头部

// console.log(window.pageYOffset);

// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位

if (window.pageYOffset >= bannerTop) {

sliderbar.style.position = ‘fixed’;

sliderbar.style.top = sliderbarTop + ‘px’;

} else {

sliderbar.style.position = ‘absolute’;

sliderbar.style.top = ‘300px’;

}

// 4. 当我们页面滚动到main盒子，就显示 goback模块

if (window.pageYOffset >= mainTop) {

goBack.style.display = ‘block’;

} else {

goBack.style.display = ‘none’;

}

})

3.5 页面被卷去的头部兼容性解决方案

---

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop

2. 未声明 DTD，使用 document.body.scrollTop

3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

代码如下（示例）：

function getScroll() {

return {

left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,

top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

};

}

使用的时候 getScroll().left

四、 三大系列总结

========================================================================

他们主要用法：

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得

五 、mouseenter 和 mouseover的区别

===========================================================================================

• 当鼠标移动到元素上时就会触发mouseenter 事件

• 类似 mouseover，它们两者之间的差别是

• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发

• 之所以这样，就是因为mouseenter不会冒泡

• 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

注：mouseenter和mouseleave不会冒泡，而且只有经过自身的盒子才会触发；

六 动画函数的封装

========================================================================

6.1 动画实现原理

---

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置

2. 让盒子在当前位置加上1个移动距离

3. 利用定时器不断重复这个操作

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，才能使用element.style.left

6.2 动画函数给不同元素记录不同定时器

---

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法