如何能让用户更快地打开自己的网站?
1.尽可能减少HTTP请求
http请求的定义:从客户端到服务器端的请求消息。包括消息首行中,对资源的请求方法,资源的标识符及使用的协议。 http请求的菜鸟概论:当你在网页中看到的文字,图片都是你从服务器获取的。每一个内容(如文字、图片、js、css)的获取,就是一个http请求;如何优化请求:文字,图片合并,js合并,css合并。
2.使用CDN内容分发网络
CDN内容分发网络:意思是尽可能避开互联网上有可能影像数据传输和稳定性的瓶颈和环节,使内容传输的更快,更稳定。 更好地理解:在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。 使用CDN(内容分发网络)前后对比 1.在没有使用CDN时,需要经过较多的节点才能访问到目的地。 2.使用了CDN时,CDN服务器复制多个副本在你附近,这时候你访问时经过CDN服务器找到最佳节点访问目的地,当然这要购买CDN服务器,用金钱买性能。 CDN:通过在网络放置节点服务器,他是一个智能虚拟网络,会根据数据流量,速度,负载量,访问最近的节点。 作用:解决网络拥挤,提高网络相应速度。
3.添加Expire/Cache-Control头 期满/缓存-控制头 expire-control头:它的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送 HTTP 请求。 cache-control:是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。
4.启用Gzip压缩 将资源在服务端口先进行压缩处理减小体积,然后在浏览器上在解压缩解释执行。 ·把文件先压缩,再传输 ·流程:原始79--本地压缩--服务器端对已经压缩的再压缩 ·优点:提升文件传输速度(在服务器端配置)
5.将CSS放在页面最上面
CSS(层叠样式表):后面的样式会覆盖前面的,级别高的样式会覆盖级别低的样式。 先加载CSS,放在头部<head>提高渲染性能,避免页面空白或者重绘。 IE:CSS放body底部,IE禁止了网页内容的顺序显示,低网速情况下导致空白。 FF:不阻止显示,但会导致闪烁重绘。
6.将script放在页面最下面 可以让页面内容优先呈现出来,而非先暴露script的bug。将页面内容先展示,逻辑功能后加载,提供用户体验。 将Script放在页面的最下面,因为浏览器加载和解释网页的顺序是从左到右从上到下的,如果JavaScript代码有死循环的问题,网页可能是空白一片的,如果放在页面的最下面即使如此,页面也能展现出来,当然这个问题最好避免!
7.避免在CSS中使用Expressions#表达式 因为CSS表达式在页面显示、缩放、滚动或鼠标移动等情况时,都会进行大量的运算,严重影响浏览器性能,且这并非是必须的。
8.把JS和CSS放在外部文件中
单独提取的好处 1:提高了JS和CSS的复用性 2:减少了页面的体积 3:提高了JS和CSS的可维护性 放在内部的优点 1:减少了页面的请求数 2:提升了页面的渲染速度 CSS和JS写在页面的情况: 1.只应用于一个页面 2.不经常被访问 3.脚本和样式很少(少于20行)
9.减少DNS查询 定义:访问网址,打开之前,转换机制(ip地址),对应网址;时间:最少20ms。 如果同时很多查找过程,会影响速度;因此需要浏览器的缓存;IE30m,ff60s,chrome60s。 缓存长:减少dns重复查找,节省时间;缓存短:及时检测服务器的变化,保证正确性。 多域:不同资源放在不同的ip 单域:所有资源放在一个IP 10.压缩 JavaScript 和 CSS 1、去除不必要的空白符、格式符、注释符。 2、简写方法名、参数名,压缩JS脚本。 建议小伙伴们在正式上线项目前,将 JavaScript 和 CSS 都进行压缩,使线上版本是最轻量级的,大幅提升网站性能。
11.避免重定向 定义:原始请求被重新转到了其他请求。 301状态码:被移动到另外位置(永久重定向)使搜索引擎智能,不需要从旧地址到新地址,删除旧地址,直接到新地址。 302状态码:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址。 重定向:重新请求下载资源,增加了http请求。
12.移除重复的脚本 可以减少文件的大小,另外,就是可以避免出现未知的问题!
13.配置实体标签Etag Etag属于HTTP协议,受web服务支持。 使用一种标志表示一种资源是否做了修改,可以减少服务器的响应,并且如果在服务器端的也没有变化的话,浏览器可以使用他自身就有的网页,这样浏览器和服务器之间会有对话,就不用服务器再重复给浏览器资源了,配置实体标签Etag帮助服务器减轻负担。
14.使用AJAX缓存
AJAX:异步的JavaScript和XML。能够在不重新加载页面的情况下,使客户端和服务器进行交换数据。可以分批下载、局部更新。 post:每次都执行,不被缓存。 get:同一地址不重复执行,可以被缓存。
 posted on 2017-12-01 13:16  pearl8  阅读(96)  评论(0编辑  收藏  举报