前端高频面试题 – 我的笔记本

如何优化前端性能

  • 减少请求数量。 合理规划利用请求,合理利用缓存技术减少不必要的频繁请求。
  • 缩短请求时间
  • 优化资源加载方式。 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 渲染可视区域

Related Posts

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注