博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
性能优化浅谈
阅读量:6358 次
发布时间:2019-06-23

本文共 932 字,大约阅读时间需要 3 分钟。

 

  项目上线后,遇到性能优化的问题,影响性能的因素有:前端,后端,网络等。具体到前端,就是加载,渲染快慢的问题。以下是我用到的一些方法。

  Chrome调试之network,可以看出加载文件各种信息,如的来源,状态,时间等。这是基本功。

  

  

  上面的例子是,bootstrap中文网: 。其他的网站也类似,首先加载当前页面的文档,然后加载当前页面中引用的外部文件:css,js,图像等。

  1. 采用压缩版的css和js文件。开发的时候用非压缩的好调试。上线后用没有压缩的太浪费资源了。如果是移动端网页,加载速度差别比较明显。
  2. 首页是个很重要的页面,应用的入口。如果首页跟其他的页面共用相同的css,js尾部文件,势必会减慢加载速度。所以为首页写一套js,css供首页使用,很有必要。最好是在项目开始的时候,如果没有,那只好,项目结束了分离出首页需要的js,css也可以。
  3. 固定的图标文件合并在1个图片上,利用background-position选取图片的某个部分,可以减少请求次数。为什么要减少请求次数?可以减少服务器的压力,减少总请求时间。因为每次请求都是1个来回(环路),即使是空请求,这个来回就要消耗时间,跟带宽无关。
  4. 前面两点都是很直观,这样做会加快页面加载速度。合并请求也会加快页面加载速度,css,js外部太多,会拖慢速度。
  5. 图片懒加载。图片用css3替代,比如:箭头等。
  6. div的display为none。里面包含的图片在第一次请求时会加载,这个优化的方法类似于与图片懒加载。
  7. 域名不相同,浏览器请求资源的时候。同一个域名的请求数量有限,不同的域名请求并发量会很高。如果外部文件和图片的域名相同的话,会比较慢。
  8. 前面4点都是浏览器请求服务器资源的过程。请求到资源后(并不一定全部请求完),浏览器开始绘制图像,首先解析文档生成DOM树。reflow和repaint就是这时候产生的。关于reflow和repaint的优化主要指js控制元素展现的优化,主要有合并样式再添加给元素,添加元素的时候利用文档碎片,用变量储存某个属性等。

转载于:https://www.cnblogs.com/xiaochongchong/p/5578143.html

你可能感兴趣的文章
《淘宝店铺设计装修一册通》一2.5 抠图工具的简单运用
查看>>
《音乐达人秀:Adobe Audition实战200例》——实例4 收音机音乐节目转录到电脑里...
查看>>
《JavaScript应用程序设计》一一3.1 过时的类继承
查看>>
Amazon 推出 API 网关使用计划
查看>>
互联网流量超出路由器上限 或致全球断网
查看>>
《基于ArcGIS的Python编程秘笈(第2版)》——2.5 限制图层列表
查看>>
GNOME 地图 3.20 加入更多新特性 可用性得到加强
查看>>
《代码整洁之道:程序员的职业素养》导读
查看>>
《计算复杂性:现代方法》——习题
查看>>
Mozilla 释出更新修复中间人攻击漏洞
查看>>
思科表态反对网络中立
查看>>
《HTML5+CSS3网页设计入门必读》——1.5 利用多种Web浏览器执行测试
查看>>
Velocity官方指南-容器
查看>>
国家为何如此重视石墨烯?
查看>>
《Python和Pygame游戏开发指南》——1.14 配套网站上的更多信息
查看>>
利用mybatis查询两级树形菜单
查看>>
《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 <一>
查看>>
Spring声明式事务管理之二:核心接口API
查看>>
LNMP环境安装(二)
查看>>
MFC对话框编程-图片控件
查看>>