前端面试-性能优化篇

1. 怎么实现大文件的上传？

• 分片上传(Chunked Upload):将大文件拆分成小的文件块(chunk)，然后通过多个并行的请求依次上传这些文件块。服务器接收到每个文件块后进行存储，最后合并所有文件块以还原原始文件。这种方法可以降低单个请求的负载，并允许在网络中断或上传失败时可以从断点续传。
• 流式上传(Streaming Upload):客户端使用流方式逐步读取文件的内容，并将数据流通过 POST 请求发送给服务器。服务器端能够逐步接收并处理这些数据流，而无需等待完整的文件上传完成。这种方法适用于较大的文件，减少了内存占用和传输延迟。
• 使用专门的文件上传服务:有一些第三方服务可供使用，例如云存储服务(如 Amazon S3、Google cloud3.Storage)、文件传输协议(如 FTP、SFTP)等。这些服务通常提供了高可靠性、可扩展性和安全性，并且针对大文件上传进行了优化。
• 压缩文件上传:如果可能，可以在客户端先对文件进行压缩，然后再进行上传。压缩后的文件大小更小，可以减少上传时间和网络带宽消耗。
• 并发上传:通过多个并行的请求同时上传文件的不同部分，以加快整个上传过程。这需要服务器端支持并发上传并正确处理分片或部分文件的合并。
• 断点续传:记录上传进度和状态，以便在网络中断或上传失败后能够从上次中断的位置继续上传。可以使用客户端或服务器端的断点续传机制来实现。

2. 说说常规的前端性能优化手段？

• content 方面
  • 减少HTTP请求：合并文件、CSS精灵、inline Image
  • 减少DNS查询： DNS查询完成之前浏览器不能从这个主机下载任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS拆线呢
  • 避免重定向：多余的中间件访问
  • 使用Ajax可缓存
  • 非必须组件延迟加载
  • 未来所需组件预先加载
  • 减少DOM元素数量
  • 将资源放到不同域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  • 减少iframe数量
• Server 方面
  • 使用CDN
  • 添加Expires或者Cache-Conntrol响应头
  • 对组件使用Gzip压缩
  • 配置ETag
  • Flush Buffer Early
  • Ajax使用GET进行请求
  • 避免空链接
• Cookie方面
  • 减少cookie大小
  • 引入资源的域名不要包含cookie
• CSS 方面
  • 将样式表放到页面顶部
  • 不适用CSS表达式
  • 不使用IE的Filter
• JS 方面
  • 将脚本放到页面底部
  • 将JS和CSS外部引入
  • 压缩JS CSS
  • 删除不需要的脚本
  • 减少对DOM的访问
  • 合理设计事件监听器