-
让品牌有温度、有情感
专注品牌策划15年
减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
页面性能优化
发布时间：2023-04-14 01:50:13
稿源：
创意岭 阅读：
56
大家好！今天让创意岭的小编来大家介绍下关于页面性能优化的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、如何对前端性能进行优化
前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。
前端性能进行优化都有哪些规则
2. 使用CDN
网站上静态资源即css、js全都使用cdn分发，包括图片
3. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
4. 为文件头指定Expires
Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：
新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.
5. 使用gzip压缩内容
gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。
6. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
7. 把JS放到底部
加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。
8. 避免使用CSS表达式
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。
9. 将CSS和JS放到外部文件中
目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。
10. 权衡DNS查找次数
减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
11. 精简CSS和JS
这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。
12. 避免跳转
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http:// baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
另一种是不用域名之间的跳转， 比如访问 http:// baidu.com/bbs 跳转到 http:// bbs.baidu.com/ 。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。
13. 删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。
14. 配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载
15. 可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。
18. 避免404
比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。
19. 减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑。
20. 使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
21. 不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50
那就不用用一张500*500的大尺寸图片，影响加载
23. 缩小favicon.ico并缓存
二、网站性能优化有哪些
一、提高服务器并发处理能力
我们总是希望一台服务器在单位时间内能处理的请求越多越好，这也成了web服务器的能力高低的关键所在。服务器之所以可以同时处理多个请求，在于操作系统通过多执行流体系设计，使得多个任务可以轮流使用系统资源，这些资源包括CPU、内存以及I/O等。这就需要选择一个合适的并发策略来合理利用这些资源，从而提高服务器的并发处理能力。这些并发策略更多的应用在apache、nginx、lighttpd等底层web server软件中。
二、Web组件分离
这里所说的web组件是指web服务器提供的所有基于URL访问的资源，包括动态内容，静态网页，图片，样式表，脚本，视频等等。这些资源在文件大小，文件数量，内容更新频率，预计并发用户数，是否需要脚本解释器等方面有着很大的差异，对不同特性资源采用能充分发挥其潜力的优化策略，能极大的提高web站点的性能。例如：将图片部署在独立的服务器上并为其分配独立的新域名，对静态网页使用epoll模型可以在大并发数情况下吞吐率保持稳定。
三、数据库性能优化和扩展。
Web服务器软件在数据库方面做的优化主要是减少访问数据库的次数，具体做法就是使用各种缓存方法。也可以从数据库本身入手提高其查询性能，这涉及到数据库性能优化方面的知识本文不作讨论。另外也可以通过主从复制，读写分离，使用反向代理，写操作分离等方式来扩展数据库规模，提升数据库服务能力。
四、Web负载均衡及相关技术
负载均衡是web站点规模水平扩展的一种手段，实现负载均衡的方法有好几种包括基于HTTP重定向的负载均衡，DNS负载均衡，反向代理负载均衡，四层负载均衡等等。
对这些负载均衡方法做简单的介绍：基于HTTP重定向的负载均衡利用了HTTP重定向的请求转移和自动跳转功能来实现负载均衡，我们熟悉的镜像下载就使用这种负载均衡。DNS负载均衡是指在一个DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时返回不同的解析结果将客户端的访问引到不同的机器上，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。反向代理负载均衡也叫七层负载均衡，这是因为反向代理服务器工作在TCP七层结构的第七层(应用层)，它通过检查流经的HTTP报头，根据报头内的信息来执行负载均衡任务。四层负载均衡是基于NAT技术的负载均衡，它将一个Internet上合法注册的IP地址映射为多个内部服务器的IP地址，对每次TCP连接请求动态使用其中一个内部IP地址，达到负载均衡的目的。此外，还有工作在数据链路层(第二层)的直接路由方式下的负载均衡，它通过修改数据包目标MAC地址来实现。以及，基于IP隧道的负载均衡，在这种方式下可以将实际服务器根据需要部署在不同的地域，并根据就近访问的原则来转移请求，CDN服务便是基于IP隧道技术来实现的。
Web负载均衡在扩展web服务器规模的同时也给web站点性能优化提供了一个更大更复杂也更灵活自由的平台，基于该平台性能优化的策略包括共享文件系统，内容分发与同步，分布式文件系统，分布式计算，分布式缓存等等。
五、web缓存技术
web缓存技术被认为是减轻服务器负载、降低网络拥塞、增强万维网可扩展性的有效途径，其基本思想是利用客户访问的时间局部性(Temporal Locality)原理，将客户访问过的内容在Cache中存放一个副本，当该内容下次被访问时，不必连接到驻留网站或重新计算生成，而是由Cache中保留的副本提供。Web缓存可以带来如下的好处：
(1) 减少网络流量，从而减轻网络拥塞;这是因为缓存避免了一部分HTTP请求。
(2) 降低客户访问延迟，其主要原因有：①已缓存的内容，客户可以缓存获取而不是从服务器获取或重新计算生成，从而减小了传输延迟缩短了响应时间;②没有被缓存的内容由于网络拥塞及服务器负载的减轻而可以较快地被客户获取;
(3) 由于客户的部分或者全部请求内容可以从通过缓存获取，从而减轻了远程服务器负载。
(4) 如果由于服务器故障或网络故障造成服务器无法响应客户请求，客户可以从缓存中获取缓存的内容副本，使得web站点服务的鲁棒性(Robustness)得到了加强。
可以看出web缓存能给web站点带可观的性能提升。其实在用户发出请求到一幅完整的网页呈现在用户面前这一过程中缓存无处不在，下面是web性能优化时常用的缓存技术，你会发现缓存被广泛应用在各个环节。
浏览器缓存：浏览器一般会在用户文件系统中创建一个目录，用于存放缓存文件，并给每个缓存文件打上必要的标记，比如过期时间等。这些标记主要用于浏览器和服务器之间的缓存协商。
Web服务器缓存：一个URL在一段较长时间内对应一个唯一的响应内容，比如静态内容或者更新不太频繁的动态内容，web服务器可将响应内容缓存起来，下次web服务器便可以在收到请求后立即拿出事先缓存好的响应内容并返回给浏览器。
代理服务器缓存：暴露在互联网中与后端的web服务器通过内部网络相连的前端服务器称为反向代理服务器，建立在反向代理服务器上的缓存称为反向代理缓存。暴露在互联网中与后端的web客户端通过内部网络相连的前端服务器称为正向代理服务器，建立在正向代理服务器上的缓存称为正向代理缓存。代理服务器缓存位于客户端和web服务器之间，可以将它看做二者之间的一个中继站。它的存在可以改善客户端的访问速度、提升web server的服务能力、安全性等等。
总共分析总结了五种技术，主要希望能够对web server性能优化这块提供一个整体的认识。后续会专门就web缓存技术发表一些自己的看法。
三、如何提高网站页面速度？
网页的加在一半就是代码的加载，各种文件，以及一些因素，那么就从这些因素去考虑就可以：
1、合并Js文件和CSS
将JS代码和CSS样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行JS文件的时候，如果JS文件比较多，就需要进行多次“Get”请求，延长加载速度，将JS文件合并在一起后，自然就减少了Get请求次数，提高了加载速度。
2、Sprites图片技术
Spriting是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵，很早就有了，在很多大型网站都有用到，特别是一些所有页面都存在的图标用得比较多，很好的提升加载速度。
3、压缩文本和图片
压缩技术如gzip可以有效减少页面加载的时间。包括HTML，XML，JSON(JavaScript对象符号)，JavaScript和CSS等，压缩率都可以在大小70%左右。文本压缩用得比较多，一般直接在空间开启就行，而图片的压缩就比较随意，很多都是直接上传，其实还有很大的压缩空间。
4、延迟显示可见区域外的内容
为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。
5、确保功能图片优先加载
网站主要考虑可用性的重要性，一个功能按钮要提前加载出来，用户进入下载页，一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片，谁能忍受?
6、重新布置Call-to-Action按钮
其实这个和上面一条是差不多的，都是从用户体验速度着手，跳过了网页的整体加载速度。速度没变，只是让一些行为按钮提前，Call-to-Action按钮一般习惯设计在页面底部，这样的习惯对于用户来说并不总是好的，购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。
7、图片格式优化
不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍，如果保存为最佳格式。可以节省大量带宽，减少处理时间时间，大大加快页面加载速度，这是一种很常见的做法。
8、使用 Progressive JPEGs
ProgressiveJPEGs图片是JPEG格式的一个特殊变种，名为“高级JPEG”。在创建高级JPEG文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户，这无疑有很好的体验。
9、精简代码
这个可以说是最直接的一个方法，也是用得比较多的，对网页代码进行瘦身，删除不必要的沉冗代码，比如不必要的空格、换行符、注释等，包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区，甚至有的在里面堆砌关键词。
10、延迟加载和执行非必要脚本
网页中有很多脚本是在页面完全加载完前都不需要执行的，可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本可能是自己网页的甲苯，往往更多的是一些第三方脚本，这样的有很多，比如评论、广告、智能推荐、百度云图、分享等等，这些完全可以等主体内容加载完后再执行。
11、使用AJAX
AJAX即“Asynchronous Javascript +XML“，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页面。
12、自动化的页面性能优化
自动化的页面性能优化也就是借助工具了，网站提速工具有很多，这里Radware推荐了自家的RadwareFastView，也算Radware给自家做了一个广告，这里不多说了。
四、为什么帧率达到60fps页面就流畅？
我们平时在做性能优化的时候，经常会提到一个指标就是页面帧率达到60fps，但是这个判断值60是怎么来的呢?为什么不是50或者70fps？
带着这个问题查阅了一些网络资料，并整理成下文：
有人说可能是人眼的感知极限就是60fps，60hz对人眼识别来说已经具备较高的平滑度，但是通过查阅百科得知85hz是人类大脑处理视频的极限，人眼无法分辨更高频率的差异。
人眼在看画面时，画面帧率高于每秒10-12帧的时候，就会认为是连贯的。
一般电影的拍摄及播放帧数是每秒24帧。
有人会说：既然你说画面帧率越高，用户体验越好，那为什么页面性能优化做到60fps就可以了？ 这是由于我们使用的设备引起的。
从机器的构造来说，生成图像的设备（如显卡）和显示图像的设备（显示器）是分离的。
目前， 大多数显示器根据其设定按 30Hz、 60Hz、 120Hz 或者 144Hz 的频率进行刷新。 而其中最常见的刷新频率是 60 Hz。 这样做是为了继承以前电视机刷新频率为 60Hz 的设定。
显卡内图片的真正提供者是GPU，而这导致了另一个问题，由于 GPU 生成图像的频率与显示器刷新的频率是不相关的，那么在显示器刷新时，GPU 没有准备好需要显示的图像怎么办；或者 GPU 的渲染速度过快，显示器来不及刷新，GPU 就已经开始渲染下一帧图像又该如何处理？
如果解决不了这两个问题，就会出现上图中的屏幕撕裂（Screen Tearing）现象，屏幕中一部分显示的是上一帧的内容，另一部分显示的是下一帧的内容。
我们用两个例子来说明可能出现屏幕撕裂的两种情况：
如果显示器的刷新频率为 75 Hz，GPU 的渲染速度为 100 Hz，那么在两次屏幕刷新的间隔中，GPU 会渲染 4/3 个帧，后面的 1/3 帧会覆盖已经渲染好的帧栈，最终会导致屏幕在 1/3 或者 2/3 的位置出现屏幕撕裂效果；
那么 GPU 的渲染速度小于显示器呢，比如说 50 Hz，那么在两次屏幕刷新的间隔中，GPU 只会渲染 2/3 帧，剩下的 1/3 会来自上一帧，与上面的结果完全相同，在同样的位置出现撕裂效果。
到这里，有人会说，如果显示器的刷新频率与 GPU 的渲染速度完全相同，应该就会解决屏幕撕裂的问题了吧？其实并不是。显示器从 GPU 拷贝帧的过程依然需要消耗一定的时间，如果屏幕在拷贝图像时刷新，仍然会导致屏幕撕裂问题。
如何解决屏幕撕裂问题？
解决屏幕撕裂中最知名可能也是最古老的解决方案就是 V-Sync 技术。
V-Sync 的原理简单而直观：产生屏幕撕裂的原因是显卡在屏幕刷新时进行了渲染，而 V-Sync 通过同步渲染/刷新时间的方式来解决这个问题。显示器的刷新频率为 60 Hz，若此时开启 V-Sync，将控制显卡渲染速度在 60 Hz 以内以匹配显示器刷新频率。这也意味着，在 V-Sync 的限制下，显卡显示性能的极限就限制为 60 Hz 以内。
因此在屏幕的刷新频率基本固定的情况下，我们只能控制GPU的渲染速度往60fps上靠拢。
以上就是关于页面性能优化相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
