1、对网站的文件和资源进行优化

假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？

• 文件合并

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

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

• 文件最小化/文件压缩

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

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

• 使用 CDN 托管

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

• 缓存的使用

  • Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

• 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等

2、前端开发优化

• 前端开发的优化问题：

  • (1) 减少http请求次数：css spirit,data uri

  • (2) JS，CSS源码压缩

  • (3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

  • (4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

  • (5) 用setTimeout来避免页面失去响应

  • (6) 用hash-table来优化查找

  • (7) 当需要设置的样式很多时设置className而不是直接操作style

  • (8) 少用全局变量

  • (9) 缓存DOM节点查找的结果

  • (10) 避免使用CSS Expression

  • (11) 图片预载

  • (12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

• 如何控制网页在网络传输过程中的数据量

  • （1）启用GZIP压缩

  • （2）保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性