PDD 前端 一面 面筋(附答案)

整理了一份PDD前端面筋,答案记录在评论里~

时长65min,问问题45min,手撕代码20min

1、BFC是什么?BFC能用来干什么?怎么才能触发BFC?

2、浏览器的重排和重绘是什么意思?重绘的触发条件?如何避免重绘重排?

3、http状态码?304 / 301 / 401 / 403 分别代表什么

4、什么叫做同源策略,服务端向服务端请求会产生跨域吗?

5、函数防抖,函数节流

6、看代码输出

第一道 输出/闭包

for (var i = 0; i < 5; i++) {

    setTimeout(function () {

        console.log(i);

    }, i * 1000);

}

思考:

1.改为输出0-4

1)用let声明i

2)匿名函数立即执行实现闭包

for (var i = 0; i < 5; i++) {

    (function (i) {

        setTimeout(function () {

            console.log(i);

        }, i * 1000);

    })(i)

}

2.改为立即输出0-4

将setTimeout里的函数改为立即执行

第二道 事件循环

setTimeout(function () {

console.log(1);

new Promise(function executor(resolve) {

    console.log(7);

    for (var i = 0; i < 10000; i++) {

        i === 9999 && resolve();

    }

    console.log(8);

}).then(function () {

    console.log(9);

});

}, 0);

setTimeout(function () {

    console.log(6);

}, 0);

new Promise(function executor(resolve) {

    console.log(2);

    for (var i = 0; i < 10000; i++) {

        i === 9999 && resolve();

    }

    console.log(3);

}).then(function () {

    console.log(4);

});

console.log(5);

7、如何判断元素是否在可视区域ViewPort

8、如何实现简单的hash路由

9、手写一个倒计时xx时xx分xx秒

一开始用setTimeout搞定,问我有什么不足,面试官说会有误差,问我如何解决

最后在每次setTimeout里算和上一次的误差,补充在下一轮setTimeout的delay参数里

#我的实习求职记录##23届找工作求助阵地##拼多多2023春招##前端面试[话题]##牛客创作充电计划#
全部评论
7、判断元素是否在可视区域ViewPort
4 回复 分享
发布于 2023-03-13 22:32 上海
1、什么是BFC? BFC用途?怎么触发BFC? BFC全称是Block Formatting Context,意思就是块级格式化上下文。你可以把BFC看做一个容器,容器里边的元素不会影响到容器外部的元素。 BFC有什么特性? BFC是一个块级元素,块级元素在垂直方向上依次排列。 BFC是一个独立的容器,内部元素不会影响容器外部的元素。 属于同一个BFC的两个盒子,外边距margin会发生重叠,并且取最大外边距。 BFC作用 解决当父级元素没有高度时,子级元素浮动会使父级元素高度塌陷的问题 解决子级元素外边距会使父级元素塌陷的问题 如何创建BFC? 给父级元素添加以下任意样式 overflow: hidden; display: flex; display: inline-flex; display: inline-block; position: absolute; position: fixed;
3 回复 分享
发布于 2023-03-13 22:11 上海
2、避免重排:   1、浏览器自己的优化:浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。 2、我们要注意的优化:我们要减少重绘和重排就是要减少对渲染树的操作,则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。 (1)直接改变元素的className (2)display:none;先设置元素为display:none;然后进行页面布局等操作;设置完成后将元素设置为display:block;这样的话就只引发两次重绘和重排; (3)不要经常访问浏览器的flush队列属性;如果一定要访问,可以利用缓存。将访问的值存储起来,接下来使用就不会再引发回流; 不要在循环内获取dom 的样式例如:offsetWidth, offsetHeight, clientWidth, clientHeight... 这些。浏览器有一个回流的缓冲机制,即多个回流会保存在一个栈里面,当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个flush栈。但是如果你多次获取这些元素的实际样式,浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈,导致页面回流增加。 (4)使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘; (5)将需要多次重排的元素,position属性设为absolute或fixed,元素脱离了文档流,其变化不会影响到其他元素; (6)如需要创建多个DOM节点,可以使用createDocumentFragment创建完后一次性的加入document (7)尽量不要使用table布局,因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局 (8)用transform 代替 top,left ,margin-top, margin-left...
2 回复 分享
发布于 2023-03-13 22:17 上海
8、实现简单的hash路由
2 回复 分享
发布于 2023-03-13 22:34 上海
第一道输出题为什么不是每5秒输出5
2 回复 分享
发布于 2023-03-14 11:02 湖北
社招吗?几号的面试?
2 回复 分享
发布于 2023-03-14 18:12 广东
2、重绘+重排 触发重排的条件:任何页面布局和几何属性的改变都会触发重排,比如: (1)页面渲染初始化;(无法避免) (2)添加或删除可见的DOM元素; (3)元素位置的改变,或者使用动画; (4)元素尺寸的改变——大小,外边距,边框; (5)浏览器窗口尺寸的变化(resize事件发生时); (6)填充内容的改变,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变; (7)读取某些元素属性:(offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )
1 回复 分享
发布于 2023-03-13 22:17 上海
3、状态码 401:您的Web服务器认为,客户端发送的 HTTP 数据流是正确的,但进入网址 (URL) 资源 , 需要用户身份验证 ,而相关信息 1)尚未被提供 2)已提供但没有通过授权测试。这就是通常所知的“ HTTP 基本验证 ”。需客户端提供的验证请求在 HTTP 协议中被定义为 WWW–验证标头字段 (WWW-Authenticate header field)  桌面应用程序一般不会使用cookie, 而是把 "用户名+冒号+密码"用BASE64编码的字符串放在http request 中的header Authorization中发送给服务端, 这种方式叫HTTP基本认证(Basic Authentication)。 403 Forbidden 是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站。 该状态表示服务器理解了本次请求但是拒绝执行该任务,该请求不该重发给服务器。在HTTP请求的方法不是“HEAD”,并且服务器想让客户端知道为什么没有权限的情况下,服务器应该在返回的信息中描述拒绝的理由。 在服务器不想提供任何反馈信息的情况下,服务器可以用404 Not Found代替403 Forbidden。 详细来说,301和302状态码都表示重定向,就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部中获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址B)——这是它们的共同点。 他们的不同在于,301表示旧地址A的资源已经被永久地移除了(这个资源不可访问了),搜索引擎SEO在抓取新内容的同时也将旧的网址交换为重定向之后的网址;302表示旧地址A的资源还在(仍然可以访问),这个重定向只是临时地从旧地址A跳转到地址B,搜索引擎会抓取新的内容而保存旧的网址。 注意: 301请求是可以缓存的, 即通过看status code,可以发现后面写着from cache。301 意味着客户端可以对结果进行缓存, 搜索引擎或者浏览器都可以把跳转后的地址缓存下来,下一次不必发送这个请求。
1 回复 分享
发布于 2023-03-13 22:20 上海
4、同源 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面,当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。 [1]  如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。 同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。 它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。 {1} 比如一个web应用,用户访问的页面,处理页面的请求的controller都是在同一个contextPath下的,无论在页面上请求AController还是BController,页面、A、B都是同源的,所处的空间位于同一个contextPath下。 {2} 同源策略是为了安全,确保一个应用中的资源只能被本应用的资源访问。否则,岂不是谁都能访问。 服务器有同源策略吗?没有
1 回复 分享
发布于 2023-03-13 22:21 上海
5、节流、防抖 应用场景:页面滑动浏览--->节流,输入响应--->防抖
1 回复 分享
发布于 2023-03-13 22:27 上海
6、第一道:看代码输出 第二道:输出2 3 5 4 1 7 8 9 7
1 回复 分享
发布于 2023-03-13 22:29 上海
没有手撕算法嘛
1 回复 分享
发布于 2023-03-14 19:30 重庆

相关推荐

重生2012之我是java程序员:换个稍微正式点的照片吧
点赞 评论 收藏
分享
挣K存W养DOG:他真的很中意你,为什么不回他
点赞 评论 收藏
分享
Pandaileee:校友加油我现在也只有一个保底太难了
点赞 评论 收藏
分享
31 147 评论
分享
牛客网
牛客企业服务