这种方法，恰好与上面的方法相反，也就是说先提前加载一些网页中的资源，它又分三类：
1.无条件提前加载
该方法就是当网页加载完成后，马上去加载一些其他内容，如淘宝会在加载完成功后会去加载一些图片拼合后的图片
2.有条件加载CSS即层叠样式表, CSS与HTML的区别主要在于后者属于一种语言, 而CSS是由一系列的属性组成的, 在这些不同属性的作用之下, 网页中对应的页面元素将被格式化, 进而依照不同格式来显示出网页内容。在实际应用过程中, CSS代码既可以直接添加到标记之中, 也可以在STYLE标记中添加或在外部样式表文件中添加。
网页内容
减少ÊttÆ请求次数
大部分网站响应时间都花费在了下载网页资源上，这里的资源指的是：图片、CSS、JS、和FlÎsÊ等。我们这里讲的减少请求次数是缩短响应时间的关键点。
一般情况下，可以分为两种：
一是通过简化页面设计来减少请求次数。
二是网页比较复杂的脚本或CSS文件可以采用多个脚本或打包放在一个文件里面，图片采用CSS SÆrÍtes(图象拼合技术)，把多个图拼成一副图片，然后通过CSS来控制在什么地方显示这张图的什么位置，从而来减少请求次数，这一块的内容，大家可以参照京东下面这一块的CSS定位来实现。
避免页面跳转
避免页面跳转是什么呢？就是当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的lÈÉÎtÍÈÏ指定的地址再次发送请求，也是就说，SEO上常用的301重定向
比如说：
我现在要让访问源码时代的同学，进到源码论坛，这就就是服务器端301重定向的实现方法
RewrÍteEÏgÍÏe OÏ
RewrÍteCÈÏd %{HTTP_HOST} !^www.ÍtsÈurÉe.ÉÏ$ [NC]//这是客户端请求的地址
RewrÍteRule ^(.*)$ ÊttÆ://bbs.ÍtsÈurÉe.ÉÏ/$1 [R=301,L]//这是客户端实际看到的网页
延迟加载
我们这里讲的延迟加载需要我们先知道网页最初加载最小的内容是什么，剩下的内容就可以使用延迟加载的实现。
最典型的是JÎvÎsÉrÍÆt可以延迟加载内容，这个做法是开发网页的时候先确保网页在没有ÌÎvÎsÉrÍÆt的时候也可以很好的显示正常的页面效果，然后通过延迟加载脚本来完成一些高级的功能效果的做法。
提前加载
根据用户输入的信息来推断需要加载的内容，比如说百度搜索。
有预期的加载
这个就比较高大上一些了，这个情况一般是在网页重新设计的时候，由于用户的访问行为，本地有旧网页的缓存，而新设计的网站没有，设计者可以通过在旧网页中预先加入一些新网站中可能会用到内容，这样的话，新网页就会先下载一些资源到本地。
减少DOM元素数量
如果网页中的元素过多也对网页的性能有影响，同时也会加重网页加载和脚本的执行，大家可以想一下，平时在使用JS的时候，我们要实现一些效果，是不是得先找到相关DOM元素，然后再执行相关操作。 如果我们网页中的元素过多，是不是就会有一个非常明显的时差呢！所以减少DOM元素数量，仍然影响网页性能。
根据域名划分内容
很多时候，我们在查看其它大型的网站的时候，图片的地址和网站的主域名还不一样，会采用多个域名来存放相关资源的，那为什么要这样使用呢？其实，浏览器一般对同一个域名的下载连接数有所限制，根据域名划分下载内容，可以间接的增大浏览器并行下载连接。大大提高了网站整体的下载资源能力。从而达到优化性能的作用。
减少ÍfrÎÅe数量
之前，我们讲过怎么使用ÍfrÎÅe，但是在实际的项目中，我们在使用的时候请先注意它的优缺点。
优点：
可以用来加载速度较慢的内容，脚本可以并行下载
缺点：
使用ÍfrÎÅe内容为空时也会消耗加载时间并会阻止页面加载
避免404
404就是常见的没有找到服务器资源，一是：影响用户体验，打开一个返回无用信息的页面。二是网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成JÎvÎsÉrÍÆt去解析。
CSS
将样式表置顶
由于网页内容从上往下的加载方式，我们尽可能的将CSS样式放在网页的ÊeÎd中会让网页显得加载速度更快，对于内容比较多的网页非常重要，至少不会让用户一直等待一个白屏上，这样的用户体验也是相当好的。
假如我们把样式表放在底部的话，就是出现一种情况，浏览器会拒绝渲染已经下载的网页，因为多数浏览器在实现时都努力避免重新绘制。所以这一样也是一个重点。
避免CSS表达式
尽量避免使用空的图片srÉ，因为空的图片srÉ仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。
有一些基础CSS3的小伙伴们一直很仰慕它强大的二开能力，喜欢用一些CSS表达式来动态的设置CSS属性，在IE5~IE8中支持，其他浏览器中表达式会被忽略。
其它CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，所以我们还是尽量避免使用它来防止使用不当造成的性能开消过多。
用lÍÏk标签代替@ÍÅÆÈrt
在网页的设计中，请尽量使用lÍÏk标签来引用CSS，避免使用@ÍÅÆÈrt来引用，原因很简单，您可以理解为就是将CSS样式放在网页中的内容底部就可以了。
图片
优化图像
。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。
缩放来适应页面，如果你需要小图片，就直接使用小图片吧。原因很简单，
在网页的制作中，我们会发现，bÎÏÏer这一类的图片加载起来非常的慢，同时也影响网站的速度，少者几百K，大者几M。那么究竟这样的图片还有没有优化的空间呢！？
避免空的图片srÉ
我们在使用ÍÅg标签的时候，尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略
优化CSS SÆrÍte
SÆÍrÍte中水平排列图片，垂直排列会增加文件大小；
SÆÍrÍte中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在SÆÍrÍte的图像中间留有较大空隙
不要在HTML中缩放图片
避免使用大图实现图片大小针对不同的设备可以做到最好的效果，而不是加载就大的图，来整体实现效果，如果是手机端用户，这个开消还是挺大的，毕竟这是一个讲流量的时代。
使用小且可缓存的fÎvÍÉÈÏ.ÍÉÈ
一般企业网站或站长都喜欢加一个图标文件fÎvÍÉÈÏ.ÍÉÈ，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标存在并且文件尽量小，最好小于1k 设置一个长的过期时间
本文地址：http://aohukeji.com/xinwenzixun/zhishitang/201905303.html
