---
nav:
  title: 面试
  path: /interview
group:
  title: 💊 面试题库
  order: 2
---

# 性能

## 1. 不要用 Eval

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

## 2. 使用 strict 模式

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

```javascript
'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 注入

```-t
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，这可能会出现安全问题，例如：

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

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

## 10. 看好你的 cookie

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

## 11. 内容安全策略（CSP）

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

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

## 12. Cross-Site Request Forgery

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

## react 性能提升的几个方式

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

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

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

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

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

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

1. 明确定义组件的用途和功能： 在开始开发之前，确保清晰地定义组件的用途和功能。考虑到组件库的可重用性，设计组件时应该尽量使其通用，同时提供足够的配置选项。

2. 选择开发工具： 选择适当的开发工具，例如构建工具（如 Webpack、Rollup）、版本控制工具（如 Git）、代码编辑器等。这些工具能够提高开发效率，并帮助你管理项目的复杂性。

3. 制定组件 API： 定义清晰的组件 API，包括组件的属性、方法、事件等。良好设计的 API 可以提高组件的易用性，并使用户更容易理解如何使用你的组件。

4. 组件的独立性： 确保组件是相互独立的，不依赖于外部环境的状态。这有助于提高组件的可移植性和可维护性。

5. 文档编写： 编写清晰、详细的文档，包括组件的使用方法、配置选项、API 文档、示例代码等。文档是用户了解和使用组件的关键，因此需要投入足够的时间和精力。

6. 测试： 编写单元测试和集成测试，确保组件的稳定性和可靠性。测试有助于捕捉潜在的问题，减少 bug，并提高代码质量。

7. 可定制性： 考虑组件的可定制性，通过提供配置选项或插槽（slot）等机制，使用户能够根据自己的需求调整组件的外观和行为。

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

9. 版本管理： 使用语义化版本控制（Semantic Versioning）规范来管理组件库的版本，以确保用户能够明确了解每个版本的变化。

10. 发布和分发： 配置发布流程，将组件库发布到合适的包管理器（如 npm）。确保发布的组件库能够方便地被用户引入和使用。

11. 社区参与： 如果你希望你的组件库成为一个开放的社区项目，考虑设立一个开发者社区，接受用户的反馈、贡献和建议。

12. 持续维护： 组件库的维护是一个长期的过程。及时响应用户反馈，修复 bug，保持文档的更新，适应新的技术和标准。

## 参考文章

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