全栈面试题|爽爽学编程

# 前端场景面试题 by 爽爽学编程

本文作者：爽爽学编程 (opens new window)

本站地址：https://code-wss.com (opens new window)

# Node的应用场景

  • 特点：

    • 它是⼀个 Javascript 运⾏环境
    • 依赖于 Chrome V8 引擎进⾏代码解释
    • 事件驱动
    • 非阻塞 I/O
    • 单进程， 单线程

  • 优点：

    • 高并发 ( 最重要的优点)

  • 缺点：

    • 只⽀持单核 CPU ，不能充分利用 CPU
    • 可靠性低，⼀ 旦代码某个环节崩溃，整个系统都崩溃

# 白屏原因怎么找

白屏通常是由于页面加载过程中出现了阻塞或错误导致页面无法正确渲染的情况。

网络请求问题： 检查浏览器的开发者工具（通常按F12键打开），查看网络选项卡，确认是否有资源加载失败或者请求被阻塞的情况。可能的原因包括网络连接问题、服务器故障、资源路径错误等。

JavaScript 错误： 查看浏览器的控制台（Console）选项卡，看是否有 JavaScript 错误。这些错误可能是由于语法错误、运行时错误或者依赖未定义等原因引起的。修复这些错误可以帮助解决白屏问题。

HTML/CSS 错误： 检查页面的 HTML 结构和 CSS 样式，确保没有语法错误或者样式问题导致页面无法正确渲染。可以使用浏览器的开发者工具检查元素，并逐步调整和排查可能的问题。

缓存问题： 有时候浏览器会缓存旧版本的页面或者资源，导致页面加载出现问题。可以尝试清除浏览器缓存或者强制刷新页面（通常按Ctrl + F5键）来解决缓存相关的问题。

框架或库问题： 如果项目中使用了前端框架或者第三方库，可能是由于框架或者库的配置错误、版本冲突等问题导致页面白屏。检查框架或者库的文档，以及相关配置，确认是否符合要求。

性能优化： 页面加载速度过慢也可能导致页面白屏。使用浏览器的性能分析工具（如Chrome的Performance选项卡）来分析页面加载过程，找出加载速度较慢的原因，并进行优化。

# (设计题) 想实现⼀个对页面某个节点的拖曳？如何做？ (使用原生JS)

给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件

mousedown 事件触发后， 开始拖拽

mousemove 时， 需要通过 event.clientX 和 clientY 获取拖拽位置， 并实时更新位置

mouseup 时，拖拽结束

需要注意浏览器边界的情况

# 希望获取到页面中所有的checkbox怎么做？

var domList = document.getElementsByTagName(‘input’ )
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
    if (domList [len].type == ‘checkbox’ ) {
        checkBoxList.push(domList [len]);
    }
}
1
2
3
4
5
6
7
8

# 如何渲染几万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能⼀次性将⼏万条都渲染出来， 而应该⼀次渲染部分 DOM ，那么就可以通过requestAnimationFrame 来每 16 ms 刷新⼀次

< ! DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <ul>控件</ul>
        <script>
        setTimeout(() => {
            // 插⼊十万条数据
            const total = 100000
            // ⼀次插⼊ 20 条，如果觉得性能不好就减少
            const once = 20
            // 渲染数据总共需要⼏次
            const loopCount = total / once
            let countOfRender = 0
            let ul = document.querySelector("ul");
            function add() {
                // 优化性能，插入不会造成回流
                const fragment = document.createDocumentFragment();
                for (let i = 0; i < once; i++) {
                        const li = document.createElement("li");
                        li.innerText = Math.floor(Math.random() * total);
                        fragment.appendChild(li);
                    }
                    ul.appendChild(fragment);
                    countOfRender += 1;
                    loop();
                }
                function loop() {
                if (countOfRender < loopCount) {
                    window.requestAnimationFrame(add);
                }
            }
            loop();
        }, 0);
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# ⼀个页面上有大量的图片 (大型电商网站) ，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

  • 图片懒加载，在页面上的未可视区域可以添加⼀个滚动事件， 判断图片位置与浏览器顶端的距离与页面的距离， 如果前者小于后者，优先加载。

  • 如果为幻灯片 、相册等， 可以使用图片预加载技术，将当前展示图片的前⼀张和后⼀张优先下载。

  • 如果图片为css图片， 可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。

  • 如果图片过大， 可以使用特殊编码的图片，加载时会先加载⼀张压缩的特别厉害的缩略图， 以提高用户体验。

  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示⼀致

# 网页验证码是干嘛的， 是为了解决什么安全问题

区分用户是计算机还是⼈的公共全自动程序 。可以防止恶意破解密码 、刷票 、论坛灌水

有效防止黑客对某⼀个特定注册用户用特定程序暴⼒破解方式进⾏不断的登陆尝试

# 如果后端一次发送多张图片，前端怎么处理？

懒加载：采用懒加载技术，在用户浏览到需要展示图片的位置时再进行加载。可以通过监听滚动事件或者其他触发条件，当用户快要浏览到图片区域时再开始加载图片。

# 👓性能优化

# 项目做过哪些性能优化？

  • 减少 HTTP 请求数

  • 减少 DNS 查询

  • 使用 CDN

  • 避免重定向

  • 图片懒加载

  • 减少 DOM 元素数量

  • 减少 DOM 操作

  • 使用 iconfont

  • 避免图片 src 为空

  • 把样式表放在 link 中

  • 把 JavaScript 放在页面底部

# 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始， ⼀次js请求⼀般情况下有哪些地方会有缓存处理？

dns 缓存， cdn 缓存， 浏览器缓存， 服务器缓存

# 渲染优化

  • 禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能)

  • 使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流)

  • 对于⼀些⼩图标， 可以使用base64位编码， 以减少⽹络请求 。但不建议大图使用， 比较耗费 CPU

  • ⼩图标优势在于

    • 减少 HTTP 请求
    • 避免⽂件跨域
    • 修改及时生效

  • 页面头部的

    会阻塞页面；( 因为 Renderer进程中 JS 线程和渲染线程是互斥的)

  • 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)

  • ⽹页 gzip ， CDN 托管， data 缓存 ， 图片服务器

  • 前端模板 1S+数据，减少由于 HTML 标签导致的带宽浪费， 前端用变量保存A1AX请求结果，每次操作本地变量，不用请求，减少请求次数

  • 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

  • 当需要设置的样式很多时设置 className 而不是直接操作 style

  • 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

  • 对普通的网站有⼀个统⼀的思路，就是尽量向前端优化 、减少数据库操作 、减少磁盘 IO

# 为什么利用多个域名来存储网站资源会更有效

  • CDN 缓存更⽅便

  • 突破浏览器并发限制

  • 节约 cookie 带宽

  • 节约主域名的连接数，优化页面响应速度

  • 防止不必要的安全问题

# 前端需要注意哪些SEO

  • 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小，。

    • title值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚⾯ title 要有所不同；
    • description 把⻚⾯内容高度概括， ⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同；
    • keywords 列举出重要关键词即可

  • 语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解网⻚

  • 重要内容 HTML 代码放在最前搜索引擎抓取 HTML 顺序是从上到下， 有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取

  • 重要内容不要用 js 输出：爬虫不会执⾏js获取内容少用 iframe ：

  • 搜索引擎不会抓取 iframe 中的内容⾮装饰性图片必须加 alt提高网站速度：

  • 网站速度是搜索引擎排序的⼀个重要指标

# 如何进行网站性能优化

  • content 方面

    • 减少 HTTP 请求：合并文件 、 CSS 精灵 、 inline Image
    • 减少 DNS 查询： DNS 缓存 、将资源分布到恰当数量的主机名
    • 减少 DOM 元素数量

  • Server 方面

    • 使用 CDN
    • 配置 ETag
    • 对组件使用 Gzip 压缩

  • Cookie 方面

    • 减⼩ cookie 大⼩

  • css 方面

    • 将样式表放到页面顶部
    • 不使用 CSS 表达式
    • 使用 不使用 @import

  • Javascript 方面

    • 将脚本放到页面底部
    • 将 javascript 和 css 从外部引⼊
      • 压缩 javascript 和 css
      • 删除不需要的脚本
    • 减少 DOM 访问

  • 图片⽅面

    • 优化图片：根据实际颜色需要选择色深 、压缩
    • 优化 css 精灵
    • 不要在 HTML 中拉伸图片
前端场景面试题 by 爽爽学编程
爽爽学编程   |