美文网首页
前端性能优化汇总

前端性能优化汇总

作者: One_Hund | 来源:发表于2018-10-15 19:12 被阅读0次
网络优化
  • 减少请求文件数,资源合并(雪碧图、SVG(Iconfont)、JS/CSS文件合并)
  • 减少资源体积,资源压缩(精简代码;压缩JS/CSS、图片WebP格式、开启Gzip)
  • 提高网络传输(缓存、PWA、CDN、HTTP2多路复用)
  • DNS优化:使用浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存,防止DNS迭代查询;使用Keep-Alive特性来减少DNS查找频率;使用较少的域名(服务器主机)来减少DNS查找的数量;DNS预解析

图片相关
  • 懒加载、预加载、渐进式加载、精灵图、iconfont、WebP

重排与重绘 / 浏览器渲染优化
  • CSS引入放<body>前面,提前生成CSS rule
  • JS引入放<body>后面,不堵塞渲染
  • 对于复杂的动画:display: none;position: absolute; 减少对Render Tree的干扰,提升painting速度


框架优化
  • 使用路由实现单页应用
  • 前端路由使用路由懒加载,减小文件体积,提高首屏渲染速度
  • 状态管理,redux/vuex
  • 服务端渲染(SSR),提高首屏渲染速度
  • 线上环境使用引用线上专用js文件
体验优化
  • 先显示框架再异步请求加载数据
  • 加载或跳转时使用loading动画

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 重点掌握

    【前端性能优化汇总】【Webpack原理+React原理+Redux+React Router】【输入URL后发生...

  • 前端性能优化汇总

    前端性能优化汇总(尽量干货一些):1.减少事件注册,尽量利用事件冒泡原理进行事件代理,注册到父级元素上,减少内存开...

  • 前端性能优化汇总

    网络优化 减少请求文件数,资源合并(雪碧图、SVG(Iconfont)、JS/CSS文件合并) 减少资源体积,资源...

  • 前端性能优化汇总

    前端优化一直是前端开发人员要掌握的内容目前汇总一下实践中优化的手段 目录结构 样式文件放在头部,js文件放在底部,...

  • 前端性能优化汇总

    一、减少请求资源大小或者次数 1、尽量和并和压缩css和js文件。(将css文件和并为一个。将js合并为一个)原因...

  • 前端性能优化汇总

    性能优化: 一、减少请求资源大小或者次数 1、尽量和并和压缩css和js文件。(将css文件和并为一个。将js合并...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

网友评论

      本文标题:前端性能优化汇总

      本文链接:https://www.haomeiwen.com/subject/fzyroftx.html