美文网首页
性能优化

性能优化

作者: GarenWang | 来源:发表于2017-01-03 00:36 被阅读0次

1.常见性能优化方法有哪些?给出不少于5条实际可行的方案?

  • 为什么要性能优化?如果只是一个js,css,html你根本没必要进行性能优化,但是现实告诉我们这个几乎不可能,随便一个网页就要加载多个css,js,img资源,这加载总是要耗时间把,所以性能优化就是必要,采取一些方法来使文件的加载速度更快,或是减少HTTP的请求来达到提高用户体验的终极目的。
  • 方法1:减少HTTP请求
    1.使用前端工具r.js,gulp,webpack 将css,js的代码合并
    2.就网页的小icon图片压缩合并雪碧图,同时大图也要压缩
    3.当页面的图片很多,使用懒加载
  • 方法2:放好css和js文件的位置
    1.css文件放在html的头部,因为CSS 下载、执行时可能阻塞渲染,但不阻塞其他CSS的下载,多个CSS文件会合并下载,让网页能显示在用户面前,不会出现白屏的现象
    2.JS 文件放在html的尾部,因为JS 下载、执行时肯定阻塞渲染,会导致页面的其他部分无法加载,出现白屏的现象
  • 方法3: 使用CDN(Content Delivery Network)内容分发网络进行静态加载
    1.将一些不经常改动的静态资源放到CDN里面,这样当用户访问的时候就会去查找最近的CDN服务器去加载资源,可以提高访问速度。
  • 方法4:使用浏览器的本地储存缓存
    1.在响应头中添加Cache-control:max-age=60000(秒),这样你在60000秒内再次请求同一个资源,服务器不会发送,会告诉浏览器继续使用本地缓存的文件
    2.使用expires,设置页面过期的时间,浏览器在规定的时间内使用本地缓存的文件
  • 方法5:尽量减少DOM操作
    1.使用变量将频繁的使用的DOM操作保存起来,这是因为DOM操作会导致页面的重绘和渲染,非常消耗性能
    2.绑定事件的时候使用事件代理
  • 方法6:避免出现重定向和404的错误
  • 方法7:优化算法
    1.在js的处理中优化查找,排序算法,尽量少使用嵌套循环
  • 方法8:服务器开启Gzip压缩数据,可以大量减少数据的大小,提高加载速度
    -方法9:减少DNS查找次数,节省响应时间
  • 方法10:静态资源使用多个域名
    对于图片、CSS、JS,可使用几个域名,可以并发加载。

相关文章

  • 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/znjgvttx.html