前端性能优化--网页内容优化

网页内容优化：

减少http请求次数

原因：

• 谈到前端性能优化首先想到的就是减少http请求次数，因为80%的响应时间花费在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。首先，一个正常的HTTP请求流程为：在浏览器中输入“www.xxx.com”并按下回车键，浏览器（客户端）再与这个URL所指向的服务器建立连接，然后浏览器才能向服务器发送请求，服务器在接收到请求的信息后再返回相应的信息，浏览器自接收到来自服务器的信息后，然后对这些数据进行解析执行。而我们请求的网页文件中有很多图片，CSS，JS等文件，将会频繁的与服务器建立连接，释放连接，这势必会浪费资源，并且每个HTTP请求都会对浏览器和服务器产生性能负担。

解决办法：

• 合并图片（CSS Sprite），图片较多时可以采用Lazyload等技术进行优化。
• 在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。
• 如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

减少DNS查询

• DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

重绘与重排

原因

• 重绘（Repaint）：在元素的外观被改变，而布局（宽高）没有发生变化的情况下发生，如改变visibility,颜色等。
• 重排（Reflow）：就是DOM的变化影响到了元素的几何属性，浏览器会重新计算元素的集合属性，会使渲染树中受到影响的部分失效。浏览器会验证DOM树上其他所有节点的visibility属性，这也是重排低效的原因，如改变窗口的大小，改变文字大小，style属性的改变等等。如果重排过度，将导致CPU蹭蹭的往上涨。

解决办法：

• 上面提到通过style属性改变节点样式，每改变一次将导致一次重排，所以最好通过设置class的方式。
•  对display：none的元素操作不会引发重排和重绘，因此需要多次操作的元素可改变其display属性再进行操作，完成操作后再将其显示，这样只需要两次重排和重绘；另外，visibility：hidden的元素操作只重绘；
• 脱离文档流的元素重排开销较小【如：position为absolute或fixed，float元素】，因为对文档流中元素无影响；

避免页面跳转

• 当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，例如以下跳转回复。

  HTTP/1.1 301 Moved Permanently
        Location: http://example.com/newuri
        Content-Type: text/html

• 当客户端遇到这种回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。

缓存Ajax

原理：

• Ajax缓存是Ajax处理数据时对一些相同的，重复的数据进行缓存操作，可以帮助我们异步的下载网页内容，这种处理对客户端请求一些静态资源（HTML,CSS,JS图片等），变得更加高效，提高页面响应速度，也节省了网络通信资源。

解决办法：

• 添加Expires:应该被应用在你知道内容何时被修改的情况下。 例如，如果是消息您可能会设置一个在10秒后过期的数值。对于照片，你可以设置一个更长时间的Expires头，因为你指望它永远不改变。Expires头允许浏览器在一段时间内可以重复使用缓存内容，并避免任何不需要的同服务器的交互过程。
• 设置Last-Modified: 设置这个标记会通知浏览器可以使用If-Modified-Since头来产生一个条件GET请求以便检查其本地缓存。如果数据不需要更新，服务器将使用HTTP 304状态码来响应此请求
• 设置Cache-Control: 如果允许，这应该被设置为’public’，使其他用户可以在中间代理和缓存服务器上存储和共享数据，在Firefox上，这还将启用针对HTTPS的缓存。

但有时候如果通过Ajax对一些后台数据进行更改的时候，虽然数据在后台已经发生改变，但是页面缓存中并没有改变，对于相同的URL，Ajax提交过去以后，浏览器还只是简单的从缓存中拿数据。

解决Ajax缓存问题：

• URL参数添加随机数或时间戳。【会在客户端产生大量缓存文件】
• 修改文件最后更改时间：setRequestHeader(“If-Modified-Since”,”0”);。这致使服务器上文件的最后修改时间与其不同，因此不会访问缓存文件，而是重新访问服务器。【只在客户端产生一个缓存文件】

延迟加载

原理：

• 这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
• Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

方法：

• 将图片的src属性值存放在一个非src的自定义属性中，判断图片进入可视区域后将路径赋值给src属性。

提前加载

• 与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型
• 无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。

• 有条件加载：根据用户的输入推断需要加载的内容，雅虎的示例是search.yahoo.com，
• 有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。

减少DOM元素数量：网页中元素过多对网页的加载和脚本的执行都是沉重的负担

根据域名划分内容

• 浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询也是个问题。
• 一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。后面我们会在cookie的规则中提到。   

减少iframe数量

使用iframe要注意理解iframe的优缺点

• 优点
• 可以用来加载速度较慢的内容，例如广告。
• 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
• 脚本可以并行下载

• 缺点

• 即使iframe内容为空也消耗加载时间
• 会阻止页面加载
• 没有语义

避免404

• 404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。

  更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析

使用预先获取

预先获取可以在真正需要之前通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:

• 链接预先获取
• DNS 预先获取
• 预先渲染

在你离开当前 web 页面之前，使用预先获取方式，对应每个链接的 URL 地址，CSS，图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。

幸运的是，预先获取很容易实现。根据你想要使用的预先获取形式，你只需在网站 HTML 中的链接属性上增加 rel=”prefetch”,rel=”dns-prefetch”，或者 rel=”prerender” 标记。