性能优化

作者: 一只重拾梦想的小水 | 来源:发表于2019-07-02 16:10 被阅读0次
  • React:
    react:
    key-diff
    shouldComponentUpdate-避免无意义state渲染
    服务端渲染 renderToString(); markUp()、nodeStream() 更快、

  • 网络、
    懒加载、
    webpack多入口、
    编译treeshaking

  • content方面:
    减少HTTP请求:合并文件、CSS精灵、inline Image
    减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
    避免重定向:多余的中间访问
    使Ajax可缓存
    非必须组件延迟加载
    未来所需组件预加载
    减少DOM元素数量
    将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
    减少iframe数量
    不要404

  • Server方面:
    使用CDN
    添加Expires或者Cache-Control响应头
    对组件使用Gzip压缩
    配置ETag
    Flush Buffer Early
    Ajax使用GET进行请求
    避免空src的img标签

  • Cookie方面:
    减小cookie大小
    引入资源的域名不要包含cookie

  • css方面:
    将样式表放到页面顶部
    不使用CSS表达式
    使用不使用@import
    不使用IE的Filter

  • Javascript方面:
    将脚本放到页面底部
    将javascript和css从外部引入
    压缩javascript和css
    删除不需要的脚本
    减少DOM访问
    合理设计事件监听器

  • 图片方面:
    优化图片:根据实际颜色需要选择色深、压缩
    优化css精灵
    不要在HTML中拉伸图片
    保证favicon.ico小并且可缓存

  • 移动方面:
    保证组件小于25k
    Pack Components into a Multipart Document

相关文章

  • Android性能优化 - 消除卡顿

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化 - 内存优化 性能分析工具 - Tra...

  • Android性能优化 - 内存优化

    性能优化系列阅读 Android性能优化 性能优化 - 消除卡顿 性能优化- 内存优化 性能分析工具 - Trac...

  • 前端性能优化(中)

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

  • 前端性能优化(下)

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

  • Awesome Extra

    性能优化 性能优化模式 常见性能优化策略的总结 Spark 性能优化指南——基础篇 Spark 性能优化指南——高...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • webpack 性能优化

    webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 优化调试功能 生产...

  • iOS性能优化 - 整理

    本文主要包含: 性能优化 - 卡顿性能优化 - 耗电优化性能优化 - APP启动优化安装包瘦身 一  性能优化 -...

  • 【React.js 20】React性能优化

    React性能优化 React性能优化主要分三块: React 组件性能优化 属性传递优化针对单组件性能优化,很多...

  • Android性能优化(下)

    Android性能优化 内存泄漏和性能优化方式Android性能优化(上)数据库优化和网络优化Android性能优...

网友评论

    本文标题:性能优化

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