前端面试题优化网页性能、怎么优化前端网页性能
发布于 7 个月前 作者 webdashen 537 次浏览 来自 分享

前端网页性能优化

减少HTTP请求

CSS Sprites

CSS 精灵雪碧图,将许多图片合并到一张图片上,达到减少HTTP请求的目的,从而优化性能

合并 CSS 和 JS 文件

利用打包工具合并文件

采用 lazyLoad

懒加载

控制资源文件加载优先级

css在上,js在下(许多现代浏览器优化做的非常好,不会阻止流程)

利用浏览器缓存

  • 强缓存和弱缓存
  • 协商缓存

减少重排(Reflow)

重排是 DOM 的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的 visibility 属性,这也是 Reflow 低效的原因。如果 Reflow 的过于频繁,CPU 使用率就会急剧上升

减少 Reflow

减少 Reflow,如果需要在 DOM 操作时添加样式,尽量使用 增加 class 属性,而不是通过 style 操作样式

减少 DOM 操作

图标使用 IconFont 替换

回到顶部