如何对网站的文件和资源进行优化？

减少调用其他页面、文件的数量。

一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

1、文件最小化/文件压缩

即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。

js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

2、使用 CDN 托管

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

3、缓存的使用

Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

css文件放置在head，js放置在文档尾

在服务器端配置control-cache last-modify-date

在服务器配置Entity-Tag if-none-match

用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：

1.css sprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置

2.将资源放在多个域名下-----打开控制台，可以看到很多网站都是这么做的~

3.图片延迟加载-----很多电商网站、新闻网站，尤其是用到瀑布流展示图片的时候，很多都这么做了，这个技术已经很普遍~

书写代码的时候要注意优化：

1.css

将可以合并的样式合并起来，比如margin-top、margin-bottom等。

给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

2.js

少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……

3.img

优化图片，不失真的情况下尽量减少图片大小，使用iconfont等