前端性能优化的目的

　　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

web性能优化的一些方法相关推荐

前端开发：Web性能优化有哪些方法？
Web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了Web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和Web易用性等情况,所以前端性能与用户体验是有着极大的关联的. ...
Web性能优化方法总结
web性能优化一.页面优化 1.减少HTTP请求数量 1.从设计实现层面简化页面:尽量将页面设置成百度首页那样,保持页面简洁.减少资源的使用. 2.合理设置HTTP缓存:合理设置缓存可以大大地减少H ...
[译]Web 性能优化：图片优化让网站大小减少 62%
这是 Web 性能优化的第二篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据的正确方法图像是web上提供的最基本的内容类型之一.他们说一张图片胜过千言万语.但是如果你 ...
移动web性能优化笔记
移动web性能优化最近看了一些文章,对移动web性能优化方法,做一个简单笔记笔记内容主要出自移动H5前端性能优化指南和移动前端系列--移动页面性能优化转载于:https://www.cnblo ...
如何重新认知性能优化及其度量方法
正文如下本文是第十八届 - 前端早早聊性能优化专场,也是早早聊第 123 场,来自阿里 UC-海愚的分享. 我是来自 UC 内核团队的林洁伟,海愚是我的花名.今天我将分享的主题是如何重新认识性能 ...
web性能优化以及SEO
web性能优化 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数 ...
网站性能优化有哪些方法
网站性能优化有哪些方法一.总结一句话总结: web前端性能优化:浏览器访问优化.CDN加速.反向代理应用服务器性能优化:分布式缓存.异步操作.使用集群.代码优化 web前端性能优化方法有哪些 1 ...
web性能优化及seo
web性能优化为什么要做性能优化? 提高用户体验,加速页面的相应速度提高用户交互性,操作体验更好为搜索引擎服务常用的技术 css精灵图片压缩图片大小合并css js文件减少http请求的 ...
web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
Web 性能优化：图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...

web性能优化的一些方法