美文网首页让前端飞Web前端之路
前端极限性能优化合集

前端极限性能优化合集

作者: MrException | 来源:发表于2017-10-06 22:08 被阅读50次

Back-End

  1. 使用Nignx做转发
  • 负载均衡
  • 限制对于资源路径的访问
  • 对静态资源自启动开启GZip压缩
  • 配合分布式服务器架构
  1. Redis,Vamish做缓存
  • 减少对数据库层面的读写操作
  • 缓存静态数据,配置,资源
  • 并发量大时,减少服务器压力
  1. 字段加密,字段压缩
  2. 静态资源分离,发布自动化

Front-End

  1. JS CSS文件极简化,减少文件大小
  2. 真正意义上将样式,配置逻辑embed到页面中,从而减少http请求
  3. 图片的压缩,静态资源CDN化
  • WebP格式(Web图片格式的未来趋势)
  1. 视图层使用js模板,或者完整的View框架(React),以Lazyload的形式分块加载
  2. CSS JS选择器ID化
  3. PC站点和移动端完全分开,拒绝响应式
  • 基本没有大公司选择用响应式
  • 多余的HTML结构和CSS样式
  • 同样的图片需要两套
  • 没人闲的蛋疼去缩放屏幕
  • 两套事件绑定
  • 资源体积文件过大,不利于优化
  1. 使用LocalStorage,存储用户状态,组件状态,非JS或者模板
  2. 给视图根本元素定义固定的Height和Width
  3. DNS网络解析加速,利用好站长工具

相关文章

  • 前端极限性能优化合集

    前端极限性能优化合集 性能优化是老生常谈了,从雅虎的N条军规,前端各种优化准则,到2010年Google IO上S...

  • 前端极限性能优化合集

    Back-End 使用Nignx做转发 负载均衡 限制对于资源路径的访问 对静态资源自启动开启GZip压缩 配合分...

  • 前端性能优化(中)

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

  • 前端性能优化(下)

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

  • 前端性能优化(上)

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

  • vue性能优化详解(三)

    前端路漫漫,优化无极限。本文主要从Web 技术方向讲述vue性能优化。 1.开启 gzip 压缩 即GNUzip,...

  • vue性能优化详解(二)

    前端路漫漫,优化无极限。本文主要从Webpack角度讲述vue性能优化。 1.Webpack 对图片进行压缩 如果...

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

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

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • vue 性能优化详解(一)

    前端路漫漫,优化无极限。本文主要从代码层面对vue项目性能优化进行总结, 1.v-if 和 v-show 区分场景...

网友评论

    本文标题:前端极限性能优化合集

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