如何优化前端性能
- 减少请求数量。 合理规划利用请求，合理利用缓存技术减少不必要的频繁请求。
- 缩短请求时间
- 优化资源加载方式。 script 加载。考虑异步请求资源，合理利用 script 加载方式，script 脚本的执行只在默认的情况下是同步和阻塞的。
- 减少重排（reflow）重绘（repaint）。减少不必要的 DOM 深度。
HTML全局属性有哪些
- id: 元素 id，同一文档内 id 不能重复，具有唯一性。
- dir: 设置元素文本方向。
- lang: 使用的语言
- style: 行内 css 样式
- class: 元素的样式类名。
- title: 元素的提示文本，鼠标移到元素上时显示的一段提示文本
- data-*: 自定义元素属性。html5 规范提供的 data- 格式来写 html 元素的非标准属性。
- hidden: 是否显示元素。
- tabindex: 设置元素的tab键次序
- dropzone: 设置元素拖放类型（copy, move, link）。
disabled和readonly的区别
readonly：元素的只读属性，可以防止用户对值进行修改。
但用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
在表单组件 input 中使用 readonly，内容会随着表单提交。
disabled：禁用属性，使元素无法使用和无法操作，无法被选中。
在表单组件 input 中使用 disabled，内容不会再随着表单提交。
二者都可以通过 js 修改其值，从而恢复编辑状态和被选中能力。
如何处理10万条数据
用虚拟列表技术，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。
虚拟列表的好处：一是性能优，二是体验丝滑。渲染生成过多的节点，可能会造成页面卡顿，甚至卡死浏览器。
而常规分页的展示效果可能不是想要的，尤其在移动端，用户习惯和偏好，更倾向于上下滑动。
虚拟列表的实现思路：
- 可视区域固定高度，设置纵向 Y 轴滚动
- 计算可显示的列表项数量：根据可视区域和列表项高度（rowHeight），计算出可显示的列表项的数目 limit
- 当滚动条上滑时，计算出滚动的距离 scrollTop
- 计算出当前起始索引：currentIndex = Math.floor(scrollTop/rowHeight)
- 计算出最后可显示的索引：endIndex = Math.min(currentIndex+limit, total-1)
- 渲染可视区域：根据开始位置 startIndex 和 结束位置 endIndex 渲染可视区域