❬前端❭ 优化实战（性能、安全、架构、算法、面试）

在不同项目的开发过程中，会用到许多通用的工具方法，然而每次都要来回的拷贝，不仅浪费时间，还不利于维护。

在产品的快速迭代中，往往追求的是开发速度，甚至是忽略了代码的可读性与扩展性，不合理的大量使用 if/else 条件判断，使我们的程序复杂度大大提升。后续代码的扩展和维护就会变得非常困难且容易出错

在日常的项目开发中，我们需要和不同的后端同学进行接口的本地联调，此时就需要频繁的去切换不同的 IP 地址，这样不仅浪费时间还效率低下 然而我们更希望和哪位后端同学进行联调，就执行 scripts 中的

随着大前端概念的提出，让前端开发工程师在互联网产品中的地位也越来越重要。在企业产品的多样化的开发过程中，大前端为企业大大节约开发成本，提高开发效率。因此前端对数据的处理能力也尤为重要

有时候，我们登录某个应用程序，但又不想注册该应用程序的账号，这时我们可以使用第三方账号登录，比如 微信授权登录、支付宝授权登录、微博授权登录、Github授权登录、QQ授权登录 等

单点登录 （Single Sign On），简称为 SSO，是指在同一账号平台下的多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统 举个例子，系统A 和 系统B 都属于某公司下的两个

在 Chrome 浏览器版本 85 中，新增了 content-visibility 属性，可以跳过非可视区域内的内容布局和渲染，直到用户需要它为止。目的是为了提升页面的加载性能，使得初始用户的页面加

Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制。目的是为了解决本不应该 Cookie 做的事情，却不得不用 Cookie 的本地存储

由于 HTTP 协议具有无状态的特点，对于事物的处理没有记忆能力，每一次请求都是独立的，这样就无法保持客户端与服务端的会话状态

应用的性能好坏直接影响到用户的体验，SEO 做的再好，脱离了性能优化一切也都是空谈，所以 SEO 和性能优化是相辅相成的。响应速度也是搜索引擎排序的一个重要指标

图片是页面上重要的组成部分，在页面加载的过程中，应当优先让图片和文字最快的展示，提高页面的加载速度。

在页面上展示视频时，如果给视频设置一个封面图，既可以强化视觉体验，也可以增加视频的吸引力，这是非常棒的用户体验

服务器发送事件（Server-Sent Events，简称 SSE）其实就是浏览器向服务器发送一个 HTTP 请求，然后服务器不断单向地向浏览器推送消息。所谓的消息，其实就是一定格式的文本事件流

如果把任意的垃圾文件后缀名修改成允许上传的类型，不仅会造成程序崩溃，还有可能会浪费不必要的资源。这种恶意上传的操作，不仅带来安全隐患，还会造成不必要的性能开销

事件处理和屏幕更新是用户关注性能最明显的两种方式，防止事件队列中出现卡顿是很重要的。可以充分利用浏览器渲染帧的空余时间，既不会导致系统延迟，也有助于浏览器的事件循环平稳运行

什么是FPS 每秒绘制的帧数，也可以理解为每秒画面的更新次数 目前大多数设备的屏幕刷新率为 60次/秒，也就是说每 1000 / 60 ≈ 16.67ms 浏览器绘制一次 卡顿原理

在一个长内容的页面中，当滚动到一定的距离时，会出现一个 "返回顶部" 的图标，点击会平滑的返回到页面顶部，有助于提升用户体验

性能分析 当页面中包含大量元素和复杂布局的时候，页面会有明显的卡顿感，会严重影响用户体验 常见场景：大数据量的列表渲染，如 无限滚动的列表 或 表格 卡顿根源：一次性渲染的 DOM 元素太多，导致性能

性能分析 当服务端返回的选择项数据达到一定量级的时候，加载渲染时会异常的卡顿，甚至会引发整个页面的卡顿 此时的用户体验是及差的 优化方案 对数据进行处理，只展示前 n 百条数据，通过自定义检索可以检索

什么是盗链 未经第三方授权或同意，就把其资源引用到了自己的应用上，比如图片、视频、文件下载等等，可以通过消耗第三方应用的流量来达到自己的目的 浏览器在页面呈现的过程中，拉取非当前应用的资源，就称为是盗