自己做网站 套模板wordpress的代码在哪里

当前位置： 首页 > news >正文

自己做网站 套模板,wordpress的代码在哪里,佛山网站开发哪家好,模板大全网写在前面 最近前端面试大家有没有感觉到场景题的压迫感#xff01;#xff01;#xff01; 很显然普通面试八股不会怎么更新#xff0c;而且就前端来说#xff0c;面试并不是真正困难的#xff0c;常规八股显示不出面试者的技术水平。 前端作为一个技术行业#xff0c…写在前面 最近前端面试大家有没有感觉到场景题的压迫感 很显然普通面试八股不会怎么更新而且就前端来说面试并不是真正困难的常规八股显示不出面试者的技术水平。 前端作为一个技术行业对于技术的需求是很高的 最近朋友和我说公司招了些前端给他的感触是八股随便考面试通过肯定是没问题的但是对于工作的动作能力并不如面试中表现出来的样子。 那么场景题也许增加了面试的难度也让很多真正有技术的人可以获得机会吧。本文也只是针对场景题进行整理毕竟作为前端总要奋斗在岗位第一线的 好了2024前端场景题合集整理-111道热度爆火总结来了 可以根据个人需求选择八股、场景题、算法、简历等【 点击此处】获得以下完整PDF 目录展示 1. 前端如何实现截图 前端实现截图需要使⽤ HTML5 的 Canvas 和相关 API具体步骤如下 ⾸先在⻚⾯中创建⼀个 Canvas 元素并设置其宽⾼和样式。使⽤ Canvas API 在 Canvas 上绘制需要截图的内容⽐如⻚⾯的某个区域、某个元素、图⽚等。调⽤ Canvas API 中的 toDataURL() ⽅法将 Canvas 转化为 base64 编码的图⽚数据。将 base64 编码的图⽚数据传递给后端进⾏处理或者直接在前端进⾏显⽰。 以下是⼀个简单的例⼦实现了对整个⻚⾯的截图 这个例⼦中在⻚⾯中创建了⼀个 canvas 元素并设置其宽⾼和样式将其放在⻚⾯最上⽅。在 点击“截图”按钮时通过 toDataURL() ⽅法将整个⻚⾯的截图转换为 base64 编码的图⽚数据 并打印到控制台上。 2. 当QPS达到峰值时, 该如何处理 当QPS达到峰值时可以从以下⼏个⽅⾯来进⾏优化

1. 数据库优化数据库的优化包括优化SQL语句、使⽤索引、避免全表扫描、分表分库等措施以提 ⾼数据库的读写性能。
2. 缓存优化缓存可以降低对数据库的访问频率提⾼响应速度。可以使⽤Redis、Memcached等缓 存技术减轻服务器负载。
3. 代码优化优化代码可以提⾼代码的执⾏效率减少不必要的开销。可以通过⼀些优化⼿段如减 少不必要的代码执⾏、避免循环嵌套、避免不必要的递归调⽤等来提⾼代码的性能。
4. 负载均衡负载均衡可以将请求分发到多个服务器上减少单个服务器的负载提⾼整个系统的性能和可⽤性。
5. 异步处理将⼀些计算量⼤、耗时⻓的操作异步处理减少对主线程的阻塞提⾼响应速度。
6. CDN加速使⽤CDN技术可以将静态资源缓存到CDN节点上提⾼资源的加载速度减少服务器的负载。
7. 硬件升级可以通过升级服务器硬件增加带宽等⽅式来提⾼系统的处理能⼒。 以上是⼀些常⻅的优化⼿段需要根据具体情况进⾏选择和实施。 3. js 超过 Number 最⼤值的数怎么处理 js 超过 Number 最⼤值的数怎么处理 在 JavaScript 中超过 Number.MAX_VALUE 的数值被认为是 Infinity 正⽆穷⼤。如果要处理超过 Number.MAX_VALUE 的数值可以使⽤第三⽅的 JavaScript 库如 big.js 或 bignumber.js 这些库可以处理任意精度的数值。 例如使⽤ big.js 库可以将两个超过 Number.MAX_VALUE 的数相加 这⾥创建了两个 big.js 对象 x 和 y 分别存储超过 Number.MAX_VALUE 的数值。通过 plus ⽅法将它们相加得到了正确的结果。最后通过 toString ⽅法将结果转换为字符串。 如果不依赖外部库咋处理JavaScript 中数值超过了 Number 最⼤值时可以使⽤ BigInt 类型来处理它可以表⽰任意精度的整数。 使⽤ BigInt 类型时需要在数值后⾯添加⼀个 n 后缀来表⽰ BigInt 类型。例如 注意BigInt 类型是 ECMAScript 2020 新增的特性因此在某些浏览器中可能不被⽀持。如果需要在 不⽀持 BigInt 的环境中使⽤ BigInt可以使⽤ polyfill 或者第三⽅库来实现。 4. 使⽤同⼀个链接 如何实现 PC 打开是 web 应⽤、⼿机打开是⼀个 H5 应⽤ 可以通过根据请求来源User-Agent来判断访问设备的类型然后在服务器端进⾏适配。例如可 以在服务器端使⽤ Node.js 的 Express 框架在路由中对不同的 User-Agent 进⾏判断返回不同的⻚⾯或数据。具体实现可以参考以下步骤
8. 根据 User-Agent 判断访问设备的类型例如判断是否为移动设备。可以使⽤第三⽅库如 uaparser-js 进⾏ User-Agent 的解析。
9. 如果是移动设备可以返回⼀个 H5 ⻚⾯或接⼝数据。
10. 如果是 PC 设备可以返回⼀个 web 应⽤⻚⾯或接⼝数据。 具体实现⽅式还取决于应⽤的具体场景和需求以上只是⼀个⼤致的思路。 5. 如何保证⽤⼾的使⽤体验 【如何保证⽤⼾的使⽤体验】这个也是⼀个较为复杂的话题 这个也不是问题了 这个算是话题吧 主要从以下⼏个⽅⾯思考问题
11. 性能⽅向的思考
12. ⽤⼾线上问题反馈线上 on call 的思考
13. ⽤⼾使⽤体验的思考 交互体验使⽤⽅向
14. 提升⽤⼾能效⽅向思考 6. 如何解决⻚⾯请求接⼝⼤规模并发问题 如何解决⻚⾯请求接⼝⼤规模并发问题 不仅仅是包含了接⼝并发 还有前端资源下载的请求并发。 应该说这是⼀个话题讨论了 个⼈认为可以从以下⼏个⽅⾯来考虑如何解决这个并发问题:
15. 后端优化可以对接⼝进⾏优化采⽤缓存技术对数据进⾏预处理减少数据库操作等。使⽤集 群技术将请求分散到不同的服务器上提⾼并发量。另外可以使⽤反向代理、负载均衡等技术 分担服务器压⼒。
16. 做 BFF 聚合把所有⾸屏需要依赖的接⼝ 利⽤服务中间层给聚合为⼀个接⼝。3. CDN加速使⽤CDN缓存技术可以有效减少服务器请求压⼒提⾼⽹站访问速度。CDN缓存可以将 接⼝的数据存储在缓存服务器中减少对原始服务器的访问加速数据传输速度。
17. 使⽤ WebSocket使⽤ WebSocket 可以建⽴⼀个持久的连接避免反复连接请求。WebSocket 可以实现双向通信⼤幅降低服务器响应时间。
18. 使⽤ HTTP2 及其以上版本 使⽤多路复⽤。
19. 使⽤浏览器缓存技术强缓存、协商缓存、离线缓存、Service Worker 缓存 等⽅向。
20. 聚合⼀定量的静态资源 ⽐如提取⻚⾯公⽤复⽤部分代码打包到⼀个⽂件⾥⾯、对图⽚进⾏雪碧图 处理 多个图⽚只下载⼀个图⽚。
21. 采⽤微前端⼯程架构 只是对当前访问⻚⾯的静态资源进⾏下载 ⽽不是下载整站静态资源。
22. 使⽤服务端渲染技术 从服务端把⻚⾯⾸屏直接渲染好返回 就可以避免掉⾸屏需要的数据再做 额外加载和执⾏。 7. 设计⼀套全站请求耗时统计⼯具 ⾸先我们要知道有哪些⽅式可以统计前端请求耗时 从代码层⾯上统计全站所有请求的耗时⽅式主要有以下⼏种
23. Performance APIPerformance API 是浏览器提供的⼀组 API可以⽤于测量⽹⻚性能。通过 Performance API可以获取⻚⾯各个阶段的时间、资源加载时间等。其中Performance Timing API 可以获取到每个资源的加载时间从⽽计算出所有请求的耗时。
24. XMLHttpRequest 的 load 事件在发送 XMLHttpRequest 请求时可以为其添加 load 事件在请求完成时执⾏回调函数从⽽记录请求的耗时。
25. fetch 的 Performance API类似 XMLHttpRequestfetch 也提供了 Performance API可以通过 Performance API 获取请求耗时。
26. ⾃定义封装的请求函数可以⾃⼰封装⼀个请求函数在请求开始和结束时记录时间从⽽计算请求耗时。 设计⼀套前端全站请求耗时统计⼯具 可以遵循以下步骤
27. 实现⼀个性能监控模块⽤于记录每个请求的开始时间和结束时间并计算耗时。
28. 在应⽤⼊⼝处引⼊该模块将每个请求的开始时间记录下来。
29. 在每个请求的响应拦截器中记录响应结束时间并计算请求耗时。
30. 将每个请求的耗时信息发送到服务端以便进⾏进⼀步的统计和分析。
31. 在服务端实现数据存储和展⽰可以使⽤图表等⽅式展⽰请求耗时情况。
32. 对于请求耗时较⻓的接⼝可以进⾏优化和分析如使⽤缓存、使⽤异步加载、优化查询语句等。7. 在前端应⽤中可以提供开关允许⽤⼾⾃主开启和关闭全站请求耗时统计功能。 以下是⼀个简单的实现⽰例 在应⽤⼊⼝处引⼊该模块 在每个请求的响应拦截器中触发 fetchEnd 事件 在服务端实现数据存储和展⽰可以使⽤图表等⽅式展⽰请求耗 8. ⼤⽂件上传了解多少 ⼤⽂件分⽚上传 如果太⼤的⽂件⽐如⼀个视频1g 2g那么⼤直接采⽤上⾯的栗⼦中的⽅法上传可能会出链接现超时 的情况⽽且也会超过服务端允许上传⽂件的⼤⼩限制所以解决这个问题我们可以将⽂件进⾏分⽚ 上传每次只上传很⼩的⼀部分 ⽐如2M。 Blob 它表⽰原始数据, 也就是⼆进制数据同时提供了对数据截取的⽅法 slice ,⽽ File 继承 了 Blob 的功能所以可以直接使⽤此⽅法对数据进⾏分段截图。 过程如下 • 把⼤⽂件进⾏分段 ⽐如2M发送到服务器携带⼀个标志暂时⽤当前的时间戳⽤于标识⼀个完整的⽂件 • 服务端保存各段⽂件• 浏览器端所有分⽚上传完成发送给服务端⼀个合并⽂件的请求 • 服务端根据⽂件标识、类型、各分⽚顺序进⾏⽂件合并 • 删除分⽚⽂件 客⼾端 JS 代码实现如下 服务端 node 实现代码如下 合并⽂件这⾥使⽤ stream pipe 实现这样更节省内存边读边写⼊ 占⽤内存更⼩效率更⾼代码⻅fnMergeFile⽅法。 ⼤⽂件上传断点续传 在上⾯我们实现了⽂件分⽚上传和最终的合并现在要做的就是如何检测这些分⽚不再重新上传即 可。 这⾥我们可以在本地进⾏保存已上传成功的分⽚重新上传的时候使⽤ spark-md5 来⽣成⽂件 hash区分此⽂件是否已上传。 • 为每个分段⽣成 hash 值使⽤ spark-md5 库 • 将上传成功的分段信息保存到本地 • 重新上传时进⾏和本地分段 hash 值的对⽐如果相同的话则跳过继续下⼀个分段的上传 ⽅案⼀ 保存在本地 indexDB/localStorage 等地⽅ 推荐使⽤ localForage 这个库 npm install localforage 客⼾端 JS 代码 ⽅案2服务端⽤于保存分⽚坐标信息 返回给前端 需要服务端添加⼀个接⼝只是服务端需要增加⼀个接⼝。 基于上⾯⼀个栗⼦进⾏改进服务端已保存 了部分⽚段客⼾端上传前需要从服务端获取已上传的分⽚信息上⾯是保存在了本地浏览器本 地对⽐每个分⽚的 hash 值跳过已上传的部分只传未上传的分⽚。 ⽅法1是从本地获取分⽚信息,这⾥只需要将此⽅法的能⼒改为从服务端获取分⽚信息就⾏了。 14. 扫码登录实现⽅式【热度: 734】 扫码登录的实现原理核⼼是基于⼀个中转站该中转站通常由应⽤提供商提供⽤于维护⼿机和PC之 间的会话状态。 整个扫码登录的流程如下
33. ⽤⼾在PC端访问应⽤并选择使⽤扫码登录⽅式。此时应⽤⽣成⼀个随机的认证码并将该认证 码通过⼆维码的形式显⽰在PC端的⻚⾯上。
34. ⽤⼾打开⼿机上的应⽤并选择使⽤扫码登录⽅式。此时应⽤会打开⼿机端的相机⽤⼾可以对着PC端的⼆维码进⾏扫描。
35. ⼀旦⽤⼾扫描了⼆维码⼿机上的应⽤会向应⽤提供商的中转站发送⼀个请求请求包含之前⽣成的随机认证码和⼿机端的⼀个会话ID。
36. 中转站验证认证码和会话ID是否匹配如果匹配成功则该中转站将⽤⼾的⾝份信息发送给应⽤并创建⼀个PC端和⼿机端之间的会话状态。
37. 应⽤使⽤收到的⾝份信息对⽤⼾进⾏认证并创建⼀个与该⽤⼾关联的会话状态。同时应⽤返回 ⼀个通过认证的响应给中转站。6. 中转站将该响应返回给⼿机端的应⽤并携带⼀个⽤于表⽰该会话的令牌此时⼿机和PC之间的认 证流程就完成了。
38. 当⽤⼾在PC端进⾏其他操作时应⽤将会话令牌附加在请求中并通过中转站向⼿机端的应⽤发起 请求。⼿机端的应⽤使⽤会话令牌也就是之前⽣成的令牌来识别并验证会话状态从⽽允许⽤⼾在PC端进⾏需要登录的操作。 15. DNS 协议了解多少【热度: 712】 DNS 基本概念 DNSDomain Name System域名系统是因特⽹上⽤于将主机名转换为 IP 地址的协议。它是⼀个 分布式数据库系统通过将主机名映射到 IP 地址来实现主机名解析并使⽤⼾能够通过更容易识别的 主机名来访问互联⽹上的资源。 在使⽤ DNS 协议进⾏主机名解析时系统⾸先查询本地 DNS 缓存。如果缓存中不存在结果系统将 向本地 DNS 服务器发出请求并逐级向上查找直到找到权威 DNS 服务器并获得解析结果。在域名 解析的过程中DNS 协议采⽤了分级命名空间的结构不同的域名可以通过点分隔符分为多个级别 例如 http://www.example.com 可以分为三个级别 www 、 example 和 com 。 除了将域名映射到 IP 地址之外DNS 协议还⽀持多种其他功能
39. 逆向映射将 IP 地址解析为域名。
40. 邮件服务器设置⽀持邮件服务器的⾃动发现和设置。
41. 负载均衡DNS 还可以实现简单的负载均衡通过将相同 IP 地址的主机名映射到不同的 IP 地址来 分散负载。
42. 安全DNSSECDNS Security ExtensionsDNS 安全扩展可以提供对域名解析的认证和完整性。 如何加快 DNS 的解析 有以下⼏种⽅法可以加快 DNS 的解析
43. 使⽤⾼速 DNS 服务器默认情况下⽹络服务提供商ISP为其⽤⼾提供 DNS 服务器。但是这些服务器不⼀定是最快的有时会出现瓶颈。如果您想加快 DNS 解析请尝试使⽤其他⾼速 DNS 服务器例如 Google 的公共 DNS 服务器或 OpenDNS。
44. 缓存 DNS 记录在本地计算机上缓存 DNS 记录可以⼤⼤加快应⽤程序的响应。当您访问特定的⽹ 站时计算机会⾃动缓存该⽹站的 DNS 记录。如果您再次访问该⽹站则计算机将使⽤缓存的DNS 记录。
45. 减少 DNS 查找当您访问⼀个⽹站时您的计算机将会查找该域名的 IP 地址。如果⽹站有很多域 名则查找过程可能会变得⾮常缓慢。因此尽可能使⽤较少的域名可以减少 DNS 查找的数量 并提⾼响应速度。
46. 使⽤ CDNCDN内容分发⽹络是⼀种将内容存储在全球多个位置的系统。这些位置通常都有专⽤的 DNS 服务器可以⼤⼤加快站点的加载速度。
47. 使⽤ DNS 缓存⼯具⼀些辅助⼯具可以帮助您优化与 DNS 相关的设置例如免费的 DNS Jumper 软件和 Namebench ⼯具它们可以测试您的 DNS 响应时间并为您推荐最佳配置。 通过使⽤⾼速 DNS 服务器、缓存 DNS 记录、减少 DNS 查找、使⽤ CDN 和 DNS 缓存⼯具等⽅法可 以显著提⾼ DNS 解析速度从⽽加快应⽤程序响应时间。 16. 函数式编程了解多少【热度: 1,789】 函数式编程的核⼼概念 函数式编程是⼀种编程范式它将程序看做是⼀系列函数的组合函数是应⽤的基础单位。函数式编 程主要有以下核⼼概念
48. 纯函数函数的输出只取决于输⼊没有任何副作⽤不会修改外部变量或状态所以对于同样的 输⼊永远返回同样的输出值。因此纯函数可以有效地避免副作⽤和竞态条件等问题使得代码 更加可靠、易于调试和测试。
49. 不可变性在函数式编程中数据通常是不可变的即不允许在内部进⾏修改。这样可以避免副作 ⽤的发⽣提⾼代码可靠性。
50. 函数组合函数可以组合成复杂的函数从⽽减少重复代码的产⽣。
51. ⾼阶函数⾼阶函数是指可以接收其他函数作为参数也可以返回函数的函数。例如函数柯⾥化 和函数的组合就是⾼阶函数的应⽤场景。
52. 惰性计算指在必要的时候才计算执⾏函数⽽不是在每个可能的执⾏路径上都执⾏从⽽提 ⾼性能。 函数式编程的核⼼概念是将函数作为基本构建块来组合构建程序通过纯函数、不可变性、函数组 合、⾼阶函数和惰性计算等概念来实现代码的简洁性、可读性和可维护性以及⾼效的性能运⾏。 函数式编程的优势 函数式编程有以下优势
53. 易于理解和维护函数式编程强调数据不变性和纯函数概念可以提⾼代码的可读性和可维护性 因为它避免了按照顺序对变量进⾏修改并强调函数⾏为的确定性。
54. 更少的 bug由于函数式编程强调纯函数的概念它可以消除由于副作⽤引起的bug。因为纯函数 不会修改外部状态或数据结构只是将输⼊转换为输出。这么做有助于保持代码更加可靠。
55. 更好的可测试性由于纯函数不具有副作⽤它更容易测试因为测试数据是预测性的。
56. 更少的重构函数式编程使⽤函数组合和柯⾥化等⽅法来简化代码。它将⼤型问题分解为微⼩问题从⽽减少了代码重构的需要。5. 避免并发问题由于函数式编程强调不变性和纯函数的概念这使得并发问题变得更简单。纯函数 允许并⾏运⾏因此当程序在不同的线程上执⾏时它更容易保持同步。
57. 代码复⽤由于函数是基本构建块并且可以组合成更⾼级别的功能块使⽤函数式编程可以更⼤ 程度上推崇代码复⽤减少代码冗余。 函数式编程通过强调纯函数、不可变数据结构和函数组合等概念可以提⾼代码可读性和可维护性 降低程序bug出现的⻛险更容易测试并且更容易将问题分解为更容易处理的⼩部分更好地应对并发和可扩展性。 17. 前端⽔印了解多少【热度: 641】 明⽔印和暗⽔印的区别 前端⽔印可以分为明⽔印和暗⽔印两种类型。它们的区别如下
58. 明⽔印明⽔印是通过在⽂本或图像上覆盖另⼀层图像或⽂字来实现的。这种⽔印会明显地出现在 ⻚⾯上可以⽤来显⽰版权信息或其他相关信息。
59. 暗⽔印暗⽔印是指在⽂本或图像中隐藏相关信息的⼀种技术。这种⽔印不会直接出现在⻚⾯上 只有在特殊的程序或⼯具下才能被检测到。暗⽔印通常⽤于保护敏感信息以及追踪⽹⻚内容的来源和版本。 添加明⽔印⼿段有哪些 可以参考这个⽂档 https://zhuanlan.zhihu.com/p/374734095 总计⼀下
60. 重复的dom元素覆盖实现 在⻚⾯上覆盖⼀个position:fixed的div盒⼦盒⼦透明度设置较低设 置pointer-events: none;样式实现点击穿透在这个盒⼦内通过js循环⽣成⼩的⽔印div每个⽔印 div内展⽰⼀个要显⽰的⽔印内容
61. canvas输出背景图 绘制出⼀个⽔印区域将这个⽔印通过toDataURL⽅法输出为⼀个图⽚将 这个图⽚设置为盒⼦的背景图通过backgroud-repeatrepeat样式实现填满整个屏幕的效果。
62. svg实现背景图 与canvas⽣成背景图的⽅法类似只不过是⽣成背景图的⽅法换成了通过svg⽣ 成
63. 图⽚加⽔印 css 添加⽔印的⽅式 如何防⽌⽤⼾删除对应的 css 从⽽达到去除⽔印的⽬的 使⽤ CSS 添加⽔印的⽅式本⾝并不能完全防⽌⽤⼾删除对应的 CSS 样式从⽽删除⽔印。但是可以 采取⼀些措施来增加删除难度提⾼⽔印的防伪能⼒。以下是⼀些常⻅的⽅法
64. 调⽤外部CSS⽂件将⽔印样式单独设置在⼀个CSS⽂件内并通过外链的⽅式在⽹站中调⽤可 以避免⽤⼾通过编辑⻚⾯HTML⽂件或内嵌样式表的⽅式删除⽔印。2. 设置样式为 !important在CSS样式中使⽤ !important 标记可以避免被覆盖。但是这种⽅式会 影响⽹⻚的可读性需慎重考虑。
65. 添加⾃定义类名通过在CSS样式中加⼊⾃定义的class类名可以防⽌⽤⼾直接删掉该类名进⽽ 删除⽔印。但是⽤⼾也可以通过重新定义该类名样式来替换⽔印。
66. 将⽔印样式应⽤到多个元素上将⽔印样式应⽤到多个元素上可以使得⽤⼾删除⽔印较为困难。 例如在⽹站的多个位置都加上Power by XXX的⽔印样式。
67. 使⽤JavaScript动态⽣成CSS样式可以监听挂载⽔印样式的dom 节点 如果⽤⼾改变了该 dom , 重新⽣成 对应的⽔印挂载上去即可。 这种⽅法可通过JS动态⽣成CSS样式从⽽避免⽤⼾直接在 ⽹⻚源⽂件中删除CSS代码。但需要注意的是这种⽅案会稍稍加重⽹⻚的加载速度需要合理权 衡。
68. 混淆CSS代码通过多次重复使⽤同⼀样式或者采⽤CSS压缩等混淆⼿段可以使CSS样式表变得 复杂难懂增加⽔印被删除的难度。
69. 采⽤图⽚⽔印的⽅式将⽔印转化为⼀个透明的PNG图⽚然后将其作为⽹⻚的背景图⽚可以更 有效地防⽌⽔印被删除。
70. 使⽤SVG图形可以将⽔印作为SVG图形嵌⼊到⽹⻚中进⾏展⽰。由于SVG的⽮量性质这种⽅式 可以保证⽔印在缩放或旋转后的清晰度同时也增加了删除难度。 暗⽔印是如何把⽔印信息隐藏起来的 暗⽔印的基本原理是在原始数据如⽂本、图像等中嵌⼊信息从⽽实现版权保护和溯源追踪等功 能。暗⽔印把信息隐藏在源数据中使得⼈眼难以察觉同时对源数据的影响尽可能⼩保持其⾃⾝ 的特征。 ⼀般来说暗⽔印算法主要包括以下⼏个步骤
71. ⽔印信息处理将待嵌⼊的信息经过处理和加密后转化为⼆进制数据。
72. 源数据处理遍历源数据中的像素或⼆进制数据根据特定规则对其进⾏调整以此腾出空间插⼊ ⽔印⼆进制数据。
73. 嵌⼊⽔印将⽔印⼆进制数据插⼊到源数据中的指定位置以某种⽅式嵌⼊到源数据之中。
74. 提取⽔印在使⽤暗⽔印的过程中需要从带⽔印的数据中提取出隐藏的⽔印信息。提取⽔印需要使⽤特定的解密算法和提取密钥。 暗⽔印的⼀个关键问题是在嵌⼊⽔印的过程中要保证⽔印对源数据的伤害尽可能的⼩同时嵌⼊⽔印后数据的分布、统计性质等不应发⽣明显变化以更好地保持数据的质量和可视效果。 插入 很多朋友都在说前端技术更迭快很多新技术都需要学习之前的技术也没有掌握当然这些肯定要分经验我给大家准备了传送门希望能帮到大家 1.字节3-1大佬手把手教你面试中大厂 2.阿里专家手撕高频面试题 3.阿里P8模拟面试专场 4.字节大佬分享前端面试出彩及谈薪方式 5.字节专家分享中大厂前端常见题库 以上源码笔记或者本篇PDF都可以【点击此处】 95. [Webpack] 有哪些优化项⽬的⼿段【热度: 1,163】 围绕 webpack 做性能优化分为两个⽅⾯ 构建时间优化 、 构建体积优化 构建时间优化 • 缩⼩范围 • ⽂件后缀 • 别名 • 缓存 • 并⾏构建 • 定向查找第三⽅模块 • 构建结果优化 ◦ 压缩 js ◦ 压缩 css ◦ 压缩 html◦ 压缩图⽚ ◦ 按需加载 ◦ prload、prefetch ◦ 代码分割 ◦ tree shaking ◦ gzip ◦ 作⽤域提升 缩⼩范围 我们在使⽤ loader 时可以配置 include 、 exclude 缩⼩ loader 对⽂件的搜索范围以此来提 ⾼构建速率。 像 /node_moudles ⽬录下的体积辣么⼤⼜是第三⽅包的存储⽬录直接 exclude 掉可以节 省⼀定的时间的。 当然 exclude 和 include 可以⼀起配置⼤部分情况下都是只需要使⽤ loader 编译 src ⽬录下 的代码 还需注意⼀个点就是要确保 loader 的 准确性 ⽐如不要使⽤ less-loader 去解析 css ⽂件 ⽂件后缀 resolve.extensions 是我们常⽤的⼀个配置他可以在导⼊语句没有带⽂件后缀时可以按照 配置的列表⾃动补上后缀。我们应该根据我们项⽬中⽂件的实际使⽤情况设置后缀列表将使⽤频 率⾼的放在前⾯、同时后缀列表也要尽可能的少减少没有必要的匹配。同时我们在源码中写导⼊ 语句的时候尽量带上后缀避免查找匹配浪费时间。 别名 通过配置 resolve.alias 别名的⽅式减少引⽤⽂件的路径复杂度 缓存 在优化的⽅案中缓存也是其中重要的⼀环。在构建过程中开启缓存提升⼆次打包速度。 在项⽬中js ⽂件是占⼤头的当项⽬越来越⼤时如果每次都需要去编译 JS 代码那么构建的速度 肯定会很慢的所以我们可以配置 babel-loader 的缓存配置项 cacheDirectory 来缓存没有 变过的 js 代码 上⾯的缓存优化只是针对像 babel-loader 这样可以配置缓存的 loader那没有缓存配置的 loader 该怎么使⽤缓存呢此时需要 cache-loader 编译后同样多⼀个 /node_modules/.cache/cache-loader 缓存⽬录 当然还有⼀种⽅式 webpack5 直接提供了 cache 配置项开启后即可缓存 编译后会多出 /node_modules/.cache/webpack 缓存⽬录 并⾏构建 ⾸先运⾏在 Node ⾥的 webpack 是单线程的所以⼀次性只能⼲⼀件事那如果利⽤电脑的多核 优势也能提⾼构建速度 thread-loader可以开启多进程打包 由于内容很多暂时省略。。。。 97. 浏览器的存储有哪些【热度: 814】 在浏览器中有以下⼏种常⻅的存储⽅式
75. CookieCookie 是⼀种存储在⽤⼾浏览器中的⼩型⽂本⽂件。它可以⽤于存储少量的数据并在 浏览器与服务器之间进⾏传输。Cookie 可以设置过期时间可以⽤于维持⽤⼾会话、记录⽤⼾偏 好等功能。
76. Web StorageWeb Storage 是 HTML5 提供的⼀种在浏览器中进⾏本地存储的机制。它包括两种 存储⽅式sessionStorage 和 localStorage。 ◦ sessionStoragesessionStorage ⽤于在⼀个会话期间即在同⼀个浏览器窗⼝或标签⻚中 存储数据。当会话结束时存储的数据会被清除。 ◦ localStoragelocalStorage ⽤于持久化地存储数据即使关闭浏览器窗⼝或标签⻚数据仍 然存在。localStorage 中的数据需要⼿动删除或通过 JavaScript 代码清除。3. IndexedDBIndexedDB 是⼀种⽤于在浏览器中存储⼤量结构化数据的数据库。它提供了⼀个异步 的 API可以进⾏增删改查等数据库操作。IndexedDB 可以存储⼤量的数据并⽀持事务操作。
77. Cache StorageCache Storage 是浏览器缓存的⼀部分⽤于存储浏览器的缓存资源。它可以⽤ 来缓存⽹⻚、脚本、样式表、图像等静态资源以提⾼⽹⻚加载速度和离线访问能⼒。
78. Web SQL DatabaseWeb SQL Database 是⼀种已被废弃但仍被⼀些浏览器⽀持的关系型数据 库。它使⽤ SQL 语⾔来进⾏数据操作可以存储⼤量的结构化数据。 追问service worker 存储的内容是放在 哪⼉的 Service Worker 可以利⽤ Cache API 和 IndexedDB API 进⾏存储。具体来说
79. Cache APIService Worker 可以使⽤ Cache API 将请求的响应存储在浏览器的 Cache Storage 中。Cache Storage 是浏览器的⼀部分⽤于存储缓存的资源。通过 Cache APIService Worker 可以将⽹⻚、脚本、样式表、图像等静态资源缓存起来以提⾼⽹⻚加载速度和离线访问能⼒。
80. IndexedDB APIService Worker 还可以利⽤ IndexedDB API 在浏览器中创建和管理数据库。 IndexedDB 是⼀种⽤于存储⼤量结构化数据的数据库Service Worker 可以通过 IndexedDB API 进⾏数据的增删改查操作。通过 IndexedDBService Worker 可以将⼤量的数据进⾏持久化存 储以便在离线状态下仍然能够访问和操作数据。 Service Worker 存储的内容并不是放在普通的浏览器缓存或本地数据库中⽽是放在 Service Worker 的全局作⽤域中。Service Worker 运⾏在独⽴的线程中与浏览器主线程分离因此能够独⽴地处理 ⽹络请求和数据存储提供了⼀种强⼤的离线访问和缓存能⼒。
81. 全局样式命名冲突和样式覆盖问题怎么解决【热度: 772】 在前端开发过程中有⼏种常⻅的⽅法可以解决全局样式命名冲突和样式覆盖问题
82. 使⽤命名空间Namespacing给样式类名添加前缀或命名空间以确保每个组件的样式类名不 会冲突。例如在⼀个项⽬中可以为每个组件的样式类名都添加⼀个唯⼀的前缀例 如 .componentA-button 和 .componentB-button 这样可以避免命名冲突。
83. 使⽤BEM命名规范BEM块、元素、修饰符是⼀种常⽤的命名规范可以将样式类名分成块 block、元素element和修饰符modifier三个部分以确保样式的唯⼀性和可读性。 例如 .button 表⽰⼀个块 .button__icon 表⽰⼀个元素 .button–disabled 表 ⽰⼀个修饰符。
84. 使⽤CSS预处理器CSS预处理器如Sass、Less可以提供变量、嵌套规则和模块化等功能可 以更⽅便地管理样式并避免命名冲突。例如可以使⽤变量来定义颜⾊和尺⼨使⽤嵌套规则来组 织样式并将样式拆分成多个模块。
85. 使⽤CSS模块CSS模块提供了在组件级别上限定样式作⽤域的能⼒从⽽避免了全局样式的冲突 和覆盖。每个组件的样式定义在组件内部使⽤唯⼀的类名确保样式的隔离性和唯⼀性。
86. 使⽤CSS-in-JS解决⽅案CSS-in-JS是⼀种将CSS样式直接写⼊JavaScript代码中的⽅法通过将 样式与组件绑定可以避免全局样式的冲突问题。⼀些常⻅的CSS-in-JS解决⽅案包括Styled Components、Emotion和CSS Modules with React等。 结尾 今天就到此结束了由于整篇PDF很多只发了部分出来觉得有帮助可以【点击此处】