web性能优化的一些方法

前端性能优化的目的

　　1.从用户角度，优化时候能够让页面加载更快，对用户的操作响应更及时，能够给用户提供更为友好的体验

　　2.从服务商角度，优化能够减少页面请求，或者减少请求所占宽带，能够节省可观的资源

性能优化的一些方法

一.减少http的请求次数

　　网页加载的时间与http请求密不可分，而外部资源的加载的速度则与主机服务提供商服务器架构和分布地点有关。我们可以通过检查自己的网站上多余的图片、css、JavaScript和一些组件，然后对应的去逐个完善，就可以减少一些http请求. 

　　尽量减少网页的重定向  

1.在定义连接地址的href属性的时候，尽量使用最完整的，最直接的地址

2.后台可以去设置，Response.Redirect第二个参数设置为false

3.如果涉及到从测试环境到生产环境的迁移，建议通过DNS中的CNAME的机制来定义别名，而不是强制地重定向

二.资源的压缩

压缩HTML、CSS和JavaScript

　　在编写代码时候会有一些多余的空格，这会占用字节，使用一些压缩工具可以有效解决这个问题。值得注意的是，压缩后的文件，其可读性就会变差，后期想维护就会变得困难了。一般在无需要大修改之后再进行压缩资源

三.使用CDN

CDN（内容分发网络）部署在各大运营商机房，当用户通过浏览器请求资源时可以直接反馈给用户，极大的减轻了服务器数据中心的压力。本质上CDN也是一种缓存，如果你的所在地距离某个CDN节点很近，那么网站响应的速度提升也是非常明显的。另外CDN所缓存的资源主要为静态资源，如静态页面、图片、css和js文件等。CDN加速对于一些遍布范围较大的网站来说效果最为明显，使用的话像阿里云CDN产品，其节点多达280多个，覆盖运营商也比较全面。

四.优化图片  雪碧图（css sprite）

一张高清的图片大概几兆左右，而很多时候我们并不需要这样的画质，一般我们都会选择将其保存为高画质的就可以了，这样会有效减小加载图片带来的压力。像JPEG图片那样包含了时间、地点、相机型号的格式，更不是我们所需要的。

五.AJAX 请求的缓存

POST请求是不能再客户端缓存的,每次都需要发送给服务器处理,每次都会返回状态码200.

GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。

所以在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。

六.减少DNS查询次数

DNS查询也消耗响应时间，如果我们网页内容来自各个不同的domain（例如嵌入了开放广告或者引入了外部图片或者脚本），首次解析这些domain也需要消耗一定时间，DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问速度有影响

 

七.用<link>代替@import

避免使用@import，因为这个相当于将css放在网页内容底部

八.将js置于底部

脚本在下载时，即使是来自不同的浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行，可以考虑下面方式来脚本提速

　　HTML5中新加了async关键字，可以让脚本异步执行

　　将脚本置地，优先css渲染，呈现给用户

　　主流浏览器支持defer关键字，可以指定脚本在文档加载后执行

以上是我对于性能优化的一些发法整理,仅是便于我记忆理解,无其他作用

 

转载于:https://www.cnblogs.com/xcyzkh/p/11279328.html