前端文件流、切片下载和上传：优化文件传输效率与用户体验
大文件直接整包传，容易卡死、超时、断了重来。前端可用 文件流（Blob / ArrayBuffer / FileReader）处理二进制，再用 切片上传 / 切片下载 提高吞吐和断点续传体验。 文件传输是常见需求。大文件用传统方式会碰到性能和体验问题。下面按文件流、切片下载、大文件上传与断点续传、应…
大文件直接整包传，容易卡死、超时、断了重来。前端可用 文件流（Blob / ArrayBuffer / FileReader）处理二进制，再用 切片上传 / 切片下载 提高吞吐和断点续传体验。 文件传输是常见需求。大文件用传统方式会碰到性能和体验问题。下面按文件流、切片下载、大文件上传与断点续传、应…
面试里常被问：后端 API 一次返回 10 万条，前端怎么处理？这题考的是渲染性能：主线程别卡死、首屏别空白 12 秒、用户屏上其实一次也看不了那么多。 下面用 Node 造 10 万条数据，从一次性渲染、setTimeout 分页、requestAnimationFrame、文档片段，到按滚动懒加…
《笑傲江湖》里封不平剑招再快，没有内力也撑不住。前端同样：React、Vue、Redux、RN、Weex 像各门招式，真正能选型和扛复杂度的，是招式背后的工程思想。 文档还没看完又出新框架，先别慌。框架是手段；开闭原则、函数式编程、消息机制这三套「内功」在后端很常见，前端框架里也在用。下面结合例子把…
英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e。CSS 看起来很难写错：加几条规则就能改外观。小站点几个文件确实如此；大应用里样式会迅速失控。如何让它可管理…
长列表和无限下拉是前端老生常谈。本文介绍一种简洁、巧妙、高效的做法：只渲染可视区域附近的 DOM，滚动时主要改外层容器的 padding。两个要素是 Intersection Observer 和 padding。 从图里能看出两点：只渲染可视区域的部分 DOM；滚动过程中外层 padding 在变…
基于 webpack 4.41.2 和 Node 10.15.3。招聘里工程化出现得越来越勤，不能只会 vue-cli / create-react-app，要把常用配置吃透。 从初始化小例子讲到 CSS/图片/Babel、Vue 环境、开发生产拆分、打包速度与体积优化，再到手写 loader / …
事件委托也叫事件代理。《JavaScript 高级程序设计》的说法是：利用事件冒泡，只指定一个处理程序，就能管理某一类型的所有事件。网上常用“代收快递”来讲，这个比方确实贴切。 有三个同事周一会收到快递。签收有两种办法：三人站门口等，或委托前台代签。公司不会容忍一堆人堵门口，所以通常选委托。前台判断…
SPA 已成主流，Angular、React、Vue 三分天下。单页应用首屏慢、不利于 SEO，所以 vue / react 全家桶都会把服务端渲染当成路由落地的选项之一。 服务端渲染的意思是：用户第一次请求时，服务器把组件渲染成 HTML 字符串再返回。客户端拿到的就是可直接呈现的 HTML，不必…
今天的兼容性问题主要发生在“前端三毒”身上：IE 6、IE 7、IE 8。 下文按宽度计算、浮动、双边距等问题逐条给出案例代码、截图对比和解决办法，原图一张不落。 今天的兼容性问题主要发生在“前端三毒”身上，它们分别是： IE 6 IE 7 IE 8 2.问题一：宽度计算问题 案例代码： <!…
浏览器渲染一页有两条工作：跑 JS、算 CSS。它们是互斥的。面试里「回流 / 重绘」问的就是：改样式时，浏览器要不要重算几何，要不要重画像素。 回流（reflow）：render tree 一部分或全部因为宽高、布局、显示隐藏、或内部文字结构变了，需要重新构建页面。重绘（repaint）：宽高、布…
