性能优化的方法
2015-11-29 18:33
309 查看
1. 缓存是提高性能的一个手段,一个使用缓存Cache的站点会监听客户端向服务器端发出的请求，并保存服务器端的回应——比如HTML页面、图片等文件。接着，如果有另外一个使用相同URL发送请求，他能够使用之前已经保存下来的反馈文件，而不是再次向服务器发出请求。
- 缓存的优点:
- 减少延迟:因为所发出的网页请求是指向更接近客户端的缓存而不再是源服务器端，因此请求所花费时间更短，这让网站看上去反应更快。
- 降低网络负荷 — 因为缓存文件可以重复使用,节省了不少的带宽.这也给用户省了不少流量.
-缓存的缺点:数据更新的话,缓存不能自动更新,用户访问的还是更新前的数据,解决方式就是:用原有的文件名+更新生成的版本号作为新的文件名,实现缓存"更新".
2. YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
3.TCP/IP协议和http协议:
- 定义:Transmission Control Protocol/Internet Protocol的简写，中译名为传输控制协议/因特网互联协议，又名网络通讯协议，**是Internet最基本的协议**、**Internet国际互联网络的基础**，由网络层的IP协议和传输层的TCP协议组成。- - TCP/IP 定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。
- 协议采用了4层的层级结构，应用层\传输层\网络层\物理层,每一层都呼叫它的下一层所提供的协议来完成自己的需求。通俗而言：TCP负责发现传输的问题，一有问题就发出信号，要求重新传输，直到所有数据安全正确地传输到目的地。而IP是给因特网的每一台联网设备规定一个地址。
- HTTP是一个属于应用层的面向对象的协议,是浏览器或其他应用程序与服务器间通信的协议.
4.请求信息:
- 请求行:包含请求方法(get/post),url,如果是get方法传送,还包含参数
- 请求头:包含浏览器的版本信息,编码集,cookie,缓存时间等.
- 空行:
- 消息体:含有post方法的参数,以及发给服务器的请求内容
5.响应信息:
- 状态行:状态码200/304/404/500等,400~500之间的状态码是客户端的错误,500以上的是指服务器错误;
- 响应头:包含编码集,cookie,服务器发给浏览器的信息(这些并不显示在页面上);
- 空行:
- 响应消息体:发给浏览器的内容.
6.性能优化的14条规则:
- 减少http请求:使用css sprite技术,内联图片,或者将图片转换成Base 64 编码,合并脚本和样式表等.
- 使用内容发布网络CDN
- 添加expires头:在响应头里设置当前页面的过期时间,在http1.1中引入了cache-control:max-age=7200000,来克服expires头的限制.
- 压缩组件
- 将样式表放在顶部(加载css是异步加载的)
- 将脚本放在底部(加载js是同步加载的)
- 避免css表达式;
- 使用外部js,css文件;
- 减少DNS查找
- 精简js
- 避免重定向:重定向的状态码是301或302,是指从一个url重新路由到另一个url;
- 移除重复脚本;
- 配置ETag:随机字符串,是用于确认缓存是否要更新的机制
- 是ajax可以缓存,如果请求的data经常变化的话,不建议使用.
##重绘和回流:
- 浏览器对页面的呈现流程:
- 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常⽤用的
document对象(<html> tag)。
- 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，
- dom tree和样式结构体结合后构建呈现树(render tree),
- 一旦呈现树构建完毕后，浏览器就可以根据render tree来绘制⻚页⾯面了。
- 回流:当呈现树中的⼀一部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽而需要重新构建.每个页⾯面⾄至少需要⼀一次回流，就是在页⾯第一次加载的时候.
- 重绘:当呈现树中的⼀一些元素需要更新属性，⽽而这些属性只是影响元素的外观，风格，而不会影响布局的,如color,backgroundColor等
- 回流必将引起重绘，⽽而重绘不⼀一定会引起回流;
- 如果要提高性能,尽量减少回流和重绘的次数:不要1个1个改变元素的样式属性，最好直接改变className;让要操作的元素进⾏行"离线处理"，处理完后⼀起更新;不要经常访问会引起浏览器flush队列的属性，如果要访问，就先读取到变量中进行缓存，以后⽤的时候直接读取变量;一些动画可以用css3代替js.
- 缓存的优点:
- 减少延迟:因为所发出的网页请求是指向更接近客户端的缓存而不再是源服务器端，因此请求所花费时间更短，这让网站看上去反应更快。
- 降低网络负荷 — 因为缓存文件可以重复使用,节省了不少的带宽.这也给用户省了不少流量.
-缓存的缺点:数据更新的话,缓存不能自动更新,用户访问的还是更新前的数据,解决方式就是:用原有的文件名+更新生成的版本号作为新的文件名,实现缓存"更新".
2. YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
3.TCP/IP协议和http协议:
- 定义:Transmission Control Protocol/Internet Protocol的简写，中译名为传输控制协议/因特网互联协议，又名网络通讯协议，**是Internet最基本的协议**、**Internet国际互联网络的基础**，由网络层的IP协议和传输层的TCP协议组成。- - TCP/IP 定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准。
- 协议采用了4层的层级结构，应用层\传输层\网络层\物理层,每一层都呼叫它的下一层所提供的协议来完成自己的需求。通俗而言：TCP负责发现传输的问题，一有问题就发出信号，要求重新传输，直到所有数据安全正确地传输到目的地。而IP是给因特网的每一台联网设备规定一个地址。
- HTTP是一个属于应用层的面向对象的协议,是浏览器或其他应用程序与服务器间通信的协议.
4.请求信息:
- 请求行:包含请求方法(get/post),url,如果是get方法传送,还包含参数
- 请求头:包含浏览器的版本信息,编码集,cookie,缓存时间等.
- 空行:
- 消息体:含有post方法的参数,以及发给服务器的请求内容
5.响应信息:
- 状态行:状态码200/304/404/500等,400~500之间的状态码是客户端的错误,500以上的是指服务器错误;
- 响应头:包含编码集,cookie,服务器发给浏览器的信息(这些并不显示在页面上);
- 空行:
- 响应消息体:发给浏览器的内容.
6.性能优化的14条规则:
- 减少http请求:使用css sprite技术,内联图片,或者将图片转换成Base 64 编码,合并脚本和样式表等.
- 使用内容发布网络CDN
- 添加expires头:在响应头里设置当前页面的过期时间,在http1.1中引入了cache-control:max-age=7200000,来克服expires头的限制.
- 压缩组件
- 将样式表放在顶部(加载css是异步加载的)
- 将脚本放在底部(加载js是同步加载的)
- 避免css表达式;
- 使用外部js,css文件;
- 减少DNS查找
- 精简js
- 避免重定向:重定向的状态码是301或302,是指从一个url重新路由到另一个url;
- 移除重复脚本;
- 配置ETag:随机字符串,是用于确认缓存是否要更新的机制
- 是ajax可以缓存,如果请求的data经常变化的话,不建议使用.
##重绘和回流:
- 浏览器对页面的呈现流程:
- 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常⽤用的
document对象(<html> tag)。
- 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，
- dom tree和样式结构体结合后构建呈现树(render tree),
- 一旦呈现树构建完毕后，浏览器就可以根据render tree来绘制⻚页⾯面了。
- 回流:当呈现树中的⼀一部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽而需要重新构建.每个页⾯面⾄至少需要⼀一次回流，就是在页⾯第一次加载的时候.
- 重绘:当呈现树中的⼀一些元素需要更新属性，⽽而这些属性只是影响元素的外观，风格，而不会影响布局的,如color,backgroundColor等
- 回流必将引起重绘，⽽而重绘不⼀一定会引起回流;
- 如果要提高性能,尽量减少回流和重绘的次数:不要1个1个改变元素的样式属性，最好直接改变className;让要操作的元素进⾏行"离线处理"，处理完后⼀起更新;不要经常访问会引起浏览器flush队列的属性，如果要访问，就先读取到变量中进行缓存，以后⽤的时候直接读取变量;一些动画可以用css3代替js.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android之screenOrientation属性
- 南大软院大神养成计划--jquery
- 如何使用github？github简单使用教程（转自http://blog.sina.com.cn/dashanliu）
- Android Camera数据流分析全程记录（overlay方式二）
- Git的使用小结
- Linux软件包管理详解
- Android setColorFilter 滤镜效果
- 图——最小生成树的克鲁斯卡尔算法
- C++实现的简单日期类
- 让MySql支持Emoji表情（MySQL中4字节utf8字符保存方法）
- SQL与数据挖掘（—）
- 在eclipse下是的编写HTML/CSS/JS/JSP代码时可以自动提示的解决办法
- Swift 数组、字典
- VMware设置共享文件夹
- 利用ShareSDK集成发送短信验证码
- How-To Install ELK Stack（Elasticsearch, Logstash, and Kibana ) Success Version
- 30个解决浏览器兼容性问题大全
- IOS二维码扫描,局部识别
- HDU-计算机学院大学生程序设计竞赛（2015’11）1005 ACM组队安排（排列组合）
- 导入某些特殊Jar包中的类