前端应该关注哪些问题｜ 青训营笔记

Canivores
108 阅读5分钟

前端应该关注哪些问题｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

什么是前端

简而言之，就是使用web技术栈解决多端的人机交互问题。

前端应该关注哪些问题

安全

网络安全：保护用户数据和网站免受攻击。

举几个栗子：

  1. 加密通信：使用 HTTPS 加密通信，保护用户数据免受窃听和篡改。

    对于一些安全性需求比较高的项目，只是防止越权，sql，cookie等攻击发生的安全问题外，还需要注意的是请求被窃取。

    HTTP请求是明文传输，这样容易被黑客抓住漏洞进行攻击，如何攻击呢？

    使用 HTTPS 加密通信！！

  2. 验证用户身份：使用身份验证机制，确保只有授权用户能访问敏感信息。

    • 用户名和密码
    • 令牌认证: 用户登录后，服务器返回一个令牌，前端将其存储在本地，并在每次请求中带上令牌，服务器验证令牌是否有效。
    • OAuth: 一种开放的授权协议，允许用户授权第三方应用访问他们的数据，而无需将用户名和密码提供给第三方应用。
    • JSON Web Token (JWT) : 一种基于 JSON 的开放标准，用于在各方之间安全地传输信息。

    前端使用这些机制时，应该确保使用HTTPS协议，避免密码和令牌被截获，并且注意令牌的有效期。

  3. 防止跨站脚本攻击（XSS）：使用输入验证和输出编码来防止 XSS 攻击。

  4. 防止跨站请求伪造（CSRF）：使用验证机制，确保请求来自可信任来源。

  5. 使用安全的第三方库和框架：使用经过安全审查的第三方库和框架，并及时修补漏洞。

  6. 监控网站：监控网站日志，及时发现和修复安全问题。

性能

性能优化：针对页面加载速度、渲染性能等问题进行优化。

举几个栗子：

  1. 优化图像：使用合适的图片格式和压缩工具减少图片大小。

    推荐两个：

  2. 减少 HTTP 请求：使用 CSS sprites（精灵图）, inline images（内联图片）…

  3. 使用 CDN：使用内容分发网络 (CDN) 加速静态资源的加载。

  4. 缓存：使用浏览器缓存和服务器端缓存减少重复加载。

  5. 使用合理的JavaScript和CSS: 减少不必要的代码，确保只在需要时加载

  6. 懒加载: 延迟加载不必要的资源

  7. 优化DOM操作: 尽量减少DOM操作，如果必须尽量批量操作

  8. 使用预渲染和预加载: 通过预渲染和预加载技术来降低页面加载时间

  9. 使用性能监测工具: 使用性能监测工具如 Google Analytics, Lighthouse 来评估页面性能。

兼容性

浏览器兼容性：保证网站在不同浏览器和设备上正常显示。

举几个栗子：

  1. 使用标准语法和标准库：避免使用非标准语法和库。推荐参考MDN和W3C。
  2. 测试不同浏览器：在不同浏览器和版本中测试网站，及时修复兼容性问题。
  3. 使用兼容性库：如 Modernizr、Normalize.css 等，帮助解决兼容性问题。
  4. 避免使用私有 API：避免使用不同浏览器之间不同的私有 API
  5. 使用浏览器兼容性工具：如 BrowserStack、 Sauce Labs 等来模拟不同浏览器的环境来进行测试
  6. 移动端考虑：考虑移动端的限制，如触摸事件、加速度传感器等
  7. 使用标准化框架：如 Bootstrap, Foundation等能更好的兼容不同浏览器

体验（美观、无障碍…）

用户体验 (UX)：开发出符合用户需求和期望的界面和交互。

举几个栗子：

  1. 简化导航：确保用户能轻松找到所需内容。
  2. 优化加载速度：减少页面加载时间，提升用户体验。
  3. 优化视觉布局：使用恰当的字体、颜色和空间来提升页面可读性。
  4. 提供实用工具：提供搜索、过滤和排序等功能。
  5. 支持响应式设计：确保网站在不同设备上都能正常显示。
  6. 关注 Accessibility：让页面对所有人包括残障人都友好。
  7. 简洁美观的动画设计：增加页面交互性和可玩性。

维护

代码管理和维护：确保代码可维护性和可重用性。

举几个栗子：

  1. 强制代码规范: 使用统一的代码风格和规范，确保代码可读性和可维护性。
  2. 使用版本控制: 使用版本控制工具如 Git, SVN 来管理代码变更。
  3. 单元测试: 使用单元测试来确保代码正确性。
  4. 文档维护: 维护文档来记录代码的设计思路和使用方法。
  5. 代码重构: 不断重构代码来确保代码可维护性。
  6. 代码复用: 设计可重用的代码组件，提高代码复用率。
  7. 适时升级：及时更新框架和库，保证系统安全性。

技术

新技术和标准：保持对前端领域最新技术和标准的了解和掌握。

举几个栗子：

  1. 阅读业界新闻和博客: 跟进业界新闻和技术博客来了解最新技术和标准。比如掘金（doge）

  2. 参与开源项目: 参与开源项目，了解最新技术实践。

  3. 主动学习: 主动学习新技术和标准，不断提升自己。

  4. 注意安全性: 注意新技术和标准对网站安全性的影响, 避免出现安全漏洞。

  5. 适当应用新技术: 新技术和标准不一定适用于所有情况, 应该适当选择和使用新技术。

avatar
文章
阅读
粉丝