2024-01-15 22:23:10 +08:00

6.7 KiB

Raw Blame History

nav

group

title	path
面试	/interview

title	order
💊 面试题库	2

性能

1. 不要用 Eval

eval 的作用是将用户输入的字符串转化为可执行的代码，类似欺骗的效果，这样的坏处是会受到 XSS 攻击。

2. 使用 strict 模式

严格模式下的变量 重复声明 等操作会抛出一些隐藏的错误。

'use strict';
var obj = {
  a: '1',
  a: '2',
};
// 抛出错误 syntax error

3. 使用 Eslint 测试代码规范

可以使我们早期捕获一些 bug，并及时修正。

4. 全面测试

测试很重要，不但单元要测试，还要全面测试，例如用 mocha 测试代码覆盖率。使用 jest 进行单元测试

5. Unix 下不要直接使用 sudo node app.js

这样如果产生错误，会让整个系统宕机，可以使用 nginx 反向代理。

6. 避免 shell command 注入

child_process.exec('ls', function (err, data) {
    console.log(data);
});

上面的 child_process.exec 调用的是 /bin/sh ,也就是执行了一个解释器。

为了避免这个问题，我们可以使用：child_process.execFile。

7. 临时文件

创建文件时，处理上传的文件要注意，这些文件可能会吃掉你的磁盘所有空间。

使用 Streams。

8. 加密 Web 应用

用 https 代替 http，请求的过程可以添加签名头。

9. Reflected Cross Site Scripting

也就是跨站脚本攻击，就是但用户发送一段数据，如果在未做任何处理的情况下直接插入 DOM，这可能会出现安全问题，例如：

//用户输入的数据中带脚本，如果不做处理，会被执行。
Im human <script>alert('I‘m hacker')<script>

处理方式：1. 对插入的数据进行验证，除去 HTML。

默认情况下，cookie 可以通过 js 在同一个域中读取，这就有可能会被跨站点脚本攻击，而且可能被第三方库读取。为了处理这种情况，我们可以在 cookies 上使用 HTTPOnly，这个标签可以让 js 无法读取。

11. 内容安全策略（CSP）

附加的安全层，可以检测和缓解某类攻击，例如：XSS、数据注入。启用方法如下：

Content-Security-Policy: default-src 'self' *.mydomain.com

12. Cross-Site Request Forgery

跨站请求伪造是一种迫使终端用户在他目前已验证授权的 Web 应用程序中执行其它的 actions。node 社区已实现，可以使用同步令牌模式处理。

react 性能提升的几个方式

如果是 18 之前可以将版本提升，挂载改成 createRoot，优化后的算法会比之前的强。
prerender 预加载首屏页面，提升网页的收录
给页面添加 loading，增加用户体验，可以通过 webpack 配置
通过请求头的时间限制来达到缓存的效果，协商缓存和强制缓存，节省浏览器的支出
动态引入 polyfill：我们市面上 90%以上的设备，其实都能支持最新的 API，但是如果我们为了这 10%的不支持用户从而去放弃 90%的人的用户体验不值得，让它通过 UA 请求头来判断是否需要加载 polyfill.
使用 splitChunkPlugin 分离公共方法和独立的页面代码，提升复用率和加载速度
使用 DllPlugin，抽离一些公共包提升打包时间，这个包只有在版本变化的时候才会去重新打包
tree shaking，webpack4.0 是默认打开的
code splitting 按需加载页面的某个模块，提升页面加载速度
使用 placeholder 和 lazy-load 提升页面性能

遇到性能问题，页面加载速度慢，如何解决？

通过使用工具（比如 Lighthouse）进行性能分析，找出性能瓶颈。压缩和合并文件，减少 HTTP 请求。使用懒加载技术，仅在需要时加载图片和其他资源。优化图片大小和格式，以减小文件大小。引入缓存机制，减少不必要的重复请求。使用 CDN（内容分发网络）加速资源加载。问题：在跨浏览器兼容性方面遇到了什么问题？

我在一个项目中经历了跨浏览器兼容性的挑战。解决方法包括：

使用 CSS 前缀来处理不同浏览器的样式。使用特性检测（feature detection）而非浏览器检测，以确保代码在不同浏览器中正常运行。使用 Polyfills 填充 JavaScript 功能缺失。定期检查并更新代码，以适应新版本的浏览器。问题：遇到了一个难以调试的问题，是如何找到并解决的？

对于组件库开发的一些注意事项

明确定义组件的用途和功能：在开始开发之前，确保清晰地定义组件的用途和功能。考虑到组件库的可重用性，设计组件时应该尽量使其通用，同时提供足够的配置选项。
选择开发工具：选择适当的开发工具，例如构建工具（如 Webpack、Rollup）、版本控制工具（如 Git）、代码编辑器等。这些工具能够提高开发效率，并帮助你管理项目的复杂性。
制定组件 API：定义清晰的组件 API，包括组件的属性、方法、事件等。良好设计的 API 可以提高组件的易用性，并使用户更容易理解如何使用你的组件。
组件的独立性：确保组件是相互独立的，不依赖于外部环境的状态。这有助于提高组件的可移植性和可维护性。
文档编写：编写清晰、详细的文档，包括组件的使用方法、配置选项、API 文档、示例代码等。文档是用户了解和使用组件的关键，因此需要投入足够的时间和精力。
测试：编写单元测试和集成测试，确保组件的稳定性和可靠性。测试有助于捕捉潜在的问题，减少 bug，并提高代码质量。
可定制性：考虑组件的可定制性，通过提供配置选项或插槽（slot）等机制，使用户能够根据自己的需求调整组件的外观和行为。

8.主题化：如果可能，考虑支持主题化，使用户能够轻松地更改组件的外观，以适应其应用的整体设计。

版本管理：使用语义化版本控制（Semantic Versioning）规范来管理组件库的版本，以确保用户能够明确了解每个版本的变化。
发布和分发：配置发布流程，将组件库发布到合适的包管理器（如 npm）。确保发布的组件库能够方便地被用户引入和使用。
社区参与：如果你希望你的组件库成为一个开放的社区项目，考虑设立一个开发者社区，接受用户的反馈、贡献和建议。
持续维护：组件库的维护是一个长期的过程。及时响应用户反馈，修复 bug，保持文档的更新，适应新的技术和标准。

参考文章

源码分析https://react.iamkasong.com/#%E7%AB%A0%E8%8A%82%E8%AF%B4%E6%98%8E

6.7 KiB Raw Blame History Unescape Escape

性能