网络性能优化常用方法

提升网页性能

http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html

网页卡顿的调试方法

都可以啊,timeline 比较直接,一般先看这个。
profile,可以详细的看具体的调用信息。

页面只要不低于30帧 就都是流畅
一般到26都看不出来

flash 是多少帧?
gif一般8-12帧吧

大部分都用24帧……

帧率要求高的一般都是3d 
转动视角 对帧率要求很高

Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。
包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ,七部分。

一、内容部分

  • 尽量减少 HTTP请求
  • 减少 DNS查找
  • 避免跳转
  • 缓存 Ajxa
  • 推迟加载
  • 提前加载
  • 减少 DOM元素数量
  • 用域名划分页面内容
  • 使 frame数量最少
  • 避免 404错误

二、服务器部分

  • 使用内容分发网络
  • 为文件头指定Expires或Cache-Control
  • gzip压缩文件内容
  • 配置ETag
  • 尽早刷新输出缓冲
  • 使用GET来完成AJAX请求
  • 避免空的图像来

三、CSS部分

  • 把样式表置于顶部
  • 避免使用CSS表达式(Expression)
  • 用<link>代替@import
  • 避免使用滤镜

四、 JavaScript部分

  • 把脚本置于页面底部
  • 使用外部JavaScript和CSS
  • 削减JavaScript和CSS
  • 剔除重复脚本
  • 减少DOM访问
  • 开发智能事件处理程序

五、Coockie部分

  • 减小Cookie体积
  • 对于页面内容使用无coockie域名

六、Image 部分

  • 优化图像
  • 优化CSS Spirite
  • 不要在HTML中缩放图像
  • favicon.ico要小而且可缓存

七、 Mobile部分

  • 保持单个内容小于25K
  • 打包组件成复合文本

https://segmentfault.com/a/1190000004139275

代码级优化

关于图片

  1. 页面内的大图,特别是banner图,登录页背景图等,使用第三方的cdn加速。同时做一遍压缩,如果压缩之后还超过200kb,则和设计师沟通是否取消或者更换图片。
  2. 精灵图必备,各种小图标,小icon,做到一张图片里面去。
  3. 尽量使用icon font代替小图标,icon font的优点可以甩普通的icon图标几条街,随意调整大小,改变颜色,太cool!!
  4. 如果项目很大,公司不差钱,最佳方案是把图片资源放在单独的服务器上,配置独立的域名,图片资源的加载由图片域名加载,很多大公司的静态资源都是由独立的服务器来存放和分发的

我一般和设计师讨价还价的底线就是图片必须加载流畅,如果用户打开网页图片加载半天出不来,就算我们的图片做的再漂亮,又有什么卵用!

关于js

  1. 第三方的js库,必须使用min版。站点内部的lib,每次发布上线之前必须使用gulp压缩合并。
  2. 移动端使用zepto库,不允许使用jquery
  3. 给js代码一个全局命名空间,举个例子,我们的项目是某个自行车官网,全局命名空间就叫bike,和本项目有关的所有js方法,函数,变量,全部挂在bike的下面
var bike={};
bike.name=‘cookee‘;
bike.getOrderDetail=functtion(id){.....}

关于css

  1. 提炼项目的公共样式,按钮、表单。
  2. 命名。面向属性命名,通用模块可以面向模块命名,比如头部header,尾部footer等,其他请尽量使用面向属性的命名方式,这样可以给css最大程度的复用自由,关于什么是面向属性的命名方式,请参考推荐
  3. 样式分离再分离,在css里面不要使用id属性,留着id给js使用
  4. 减少css的层级嵌套,由于css的渲染是从右向左的,关于网页的渲染,这个细说起来又可以写一篇文章了。如果你的层级标签嵌套多层,想想要浪费多少渲染时间,对于移动端毫秒必争的加载时间,你还有什么理由不改进你的代码
  5. 优雅的名字可以让人一目了然,放一张前人总结的图,没事的时候多看看,潜移默化的记住这些名字

关于html

  1. 精简dom结构,减少冗余html
  2. 语义化标签,要学会用
  3. 移动端,使用svg绘图代替canvas绘图,canvas会有严重的锯齿(如果有同学有实践过的解决锯齿的方案,我愿恭听)
时间: 2024-11-08 15:57:28

网络性能优化常用方法的相关文章

Linux网络性能优化方法简析

Linux网络性能优化方法简析 2010-12-20 10:56 赵军 IBMDW 字号:T | T 性能问题永远是永恒的主题之一,而Linux在网络性能方面的优势则显而易见,这篇文章是对于Linux内核中提升网络性能的一些优化方法的简析,以让我们去后台看看魔术师表演用的盒子,同时也看看内核极客们是怎样灵活的,渐进的去解决这些实际的问题. AD:2014WOT全球软件技术峰会北京站 课程视频发布 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性

转:携程App的网络性能优化实践

http://kb.cnblogs.com/page/519824/ 携程App的网络性能优化实践 受益匪浅的一篇文章,让我知道网络交互并不是简单的传输和接受数据.真正的难点在于后面的性能优化 下面对文章中的几点进行总结和整理,作为个人的笔记 常见的网络性能问题: 1.DNS问题 DNS被劫持或失效 DNS解析慢或者失败 2.TCP连接问题 TCP的连接端口被封 TCP连接超时 3.write/Read问题 设置合理的读写超时时长 客户端所处环境的常用端口被限制 网络切换(即当用户的网络在WIF

Linux 下网络性能优化方法简析

概述 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性能的优化则可基于这 3 条路径来考虑.由于数据包的转发一般是具备路由功能的设备所关注,在本文中没有叙述,读者如果有兴趣,可以自行学习(在 Linux 内核中,分别使用了基于哈希的路由查找和基于动态 Trie 的路由查找算法).本文集中于发送路径和接收路径上的优化方法分析,其中的 NAPI 本质上是接收路径上的优化,但因为它在 Linux 的内核出现时间较早,而它也是后续出现的各种优化方法的基

携程App的网络性能优化实践

本文转载至 http://kb.cnblogs.com/page/519824/ 作者: 陈浩然  来源: InfoQ  发布时间: 2015-04-29 23:42  阅读: 4018 次  推荐: 16   原文链接   [收藏] 摘要:在4月23日~25日举行的QCon全球软件开发大会(北京站)上,携程无线开发总监陈浩然分享了<移动开发网络性能优化实践>,总结了携程在App网络性能优化方面的一些实践经验.在2014年接手携程无线App的框架和基础研发工作之后,陈浩然面对的首要工作就是Ap

思考:网络性能优化:网络 -- cpu -- 线程数 -- 单个任务耗时 --- qps --- 并发

思考:网络性能优化:网络 -- cpu -- 线程数 -- 单个任务耗时 --- qps --- 并发如果没有理清楚上述概念和它们之间的关系,那么优化会毫无章法:线程越多,利用上的线程越多,cpu的idle会约低,只到cpu低得不能再低,一般情况下,可以可劲用(idle为10%你遇到过吗?),但是要注意你的下游能否能扛得住你转嫁给他们的并发压力呢:单个任务处理越快,qps和并发会越高:两个线程的并发一定是一个线程的两倍,10个线程的并发一定是2个线程的5倍:qps是一秒处理的任务数,这个换算逻辑

AIX网络性能优化简介

在AIX 中,网络性能的优化可从以下几方面进行: 网络内存(network memory)的调整 socket 缓冲区 (socket buffer) 的调整 网络接口(network interface)参数的调整 网络适配器 (network adapter) 上发送/接收队列的调整 名字解析(name resolution) 的查找顺序. 1.网络内存的调整 AIX中参数 thewall 的值限定了系统中最多有多少物理内存可被网络缓冲区使用.但在AIX5L中 thewall 的值是无法修改

App的网络环境测试和性能优化

1. 网络环境测试一般是先用网络损伤模拟仪或mock工具模拟常见的七种损伤和5种网络环境,然后再国内外城市采样的方式(带宽和延时)组合测试生成报告, 下面是一些统计图 2. 采样点的选择一般都是根据自己server收集的用户信息.如果新app就要参考近品/竞品或第三方的统计数据拍脑袋 3. 从测试的角度,应该建立实时监控的web portal.其实测试的目的除了保证产品发布的质量.更重要的是为优化提供依据,所以report最后一部分都是issue list 和optmize advice,当然测

常用CSS优化总结&mdash;&mdash;网络性能与语法性能建议

关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些  合并压缩css文件等 语法性能:优化语法  合并css语句 CSS压缩 就是把我们CSS中没用的空白符等删去,达到缩减字符个数的目的 .test{ background-color:#ffffff; background-image:url(a.jpg); } 经过压缩后会变成这样 .test{ background-color:#fff; background-image:u

[js] 前端性能优化

原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 链接:http://www.zhihu.com/question/21658448/answer/18903129 网络性能优化,加快访问速度,浏览器并行加载数量,怎样实现原生JS异步载入,CDN加速的原理,如何将不同静态资源发布到多个域名服务器上,发布后这些静态字段的url路径改怎么批量改写,用什么工具进行项目打包,css打包后的相对路径怎么转换为绝对路径,用什么工具进行项目模块依赖管理,