前端性能优化

ps：面试的时候常常会问道前端性能优化有哪些方面？作为前端，我们最直观的接触用户，即用户第一眼看到的是前端的网站界面，所以作为前端我们一定要站在用户角度去优化网站，让用户有个完美的初体验，做好第一棒交接。

Content

1. 减少http页面请求

80%的用户最终响应时间花费在前端上，大部分时间花在下载页面组件上包括图片、样式、js、flash等等，所以基于以上减少页面组件数量是减少http请求数量加快页面下载的有效方式
但是减少组件意味着就要简化页面设计？

1. 合并文件：包括js文件和css文件，但是这种更类似于算法上的以空间换时间。
2. 图片精灵：合并你的背景图片到一张图片上，利用background-image和background-position属性去展示以此减少http请求。图片尽可能横向排列、不要留有太多的空隙，在精灵中组合相似的颜色有助于保持较低的颜色计数，理想情况下可以低于256色，以便适合PNG8。
3. 图像地图：需要精确定义图像坐标，可用于导航但易出错，此处不建议
4. data url图像数据：将图片转成data Url，这样会增加文档的大小，但是可以通过css样式缓存减少http的请求
5. 减少http的请求数量

2. 减少(Domain Name System)DNS查找

1. 域名系统（DNS）将主机名映射到IP地址,就像电话簿将联系人映射到电话号码。当你在浏览器中输入www.yahoo.com时，浏览器通过DNS解析程序将返回该服务器的IP地址，DNS通常从一个域名到查找ip地址需要20-120毫秒，在此期间网页不会下载任何资源知道域名查找完成
2. 大多数浏览器都有自己的缓存，独立于操作系统的缓存。只要浏览器将DNS记录保存在自己的缓存中，它就不会向操作系统请求记录。
3. 减少主机名的数量会减少DNS查找的数量。但这也可能减少并行下载增加响应时间

3. 避免重定向

1. 301和302响应都不会被缓存，除非Expires或Cache Control等附加头指示应该缓存。
2. 重定向会降低用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容，因为页面中的任何内容都无法呈现，并且在HTML文档到达之前，任何组件都无法开始下载。
3. url尾随斜杠的修复（apache），将旧网站连接到新网站是重定向的另一个常见用途

4. ajax缓存

1. Add an Expires or a Cache-Control Header.
2. Gzip Components
3. Reduce DNS Lookups
4. Minify JavaScript
5. Avoid Redirects
6. Configure ETags

5. 组件后加载

1. 当性能目标与其他web开发最佳实践保持一致时，这是很好的。在这种情况下，渐进式增强的思想告诉我们，当支持JavaScript时，它可以改善用户体验，但是即使没有JavaScript，也必须确保页面工作正常。因此，在确保页面正常工作之后，可以使用一些加载后的脚本来增强它，这些脚本可以为您提供更多的提示，如拖放和动画。
2. 有条件预加载-根据用户操作，您可以有根据地猜测用户下一步的去向，并相应地预加载

6.预加载组件

预加载看起来可能与后加载相反，但它实际上有一个不同的目标。通过预加载组件，您可以利用浏览器空闲的时间，请求将来需要的组件（如图像、样式和脚本）。这样，当用户访问下一个页面时，您可以将大多数组件都放在缓存中，并且您的页面将为用户加载得更快。

7. 减少Dom元素的数量

1. 复杂的页面意味着需要下载更多的字节，同时也意味着JavaScript中的DOM访问速度较慢。例如，当您想添加事件处理程序时，如果您在页面上循环500或5000个DOM元素，这会有区别。
2. 多层tag嵌套可能是为了某种布局，可以尝试grid实现总体布局
3. 日常开发中需要有极简思想

8. 减少iframe数量

9. 减少无用的404

可以为用户增加引导性的方案，eg：’Did you mean X?‘

10. 事件委派

通过事件委派减少元素循环添加事件处理程序

Server

1. CDN服务

2 .设置响应头expires或者cache-control

用户首次访问可能需要发出几个http请求，通过设置Expires头信息，web服务器使用HTTP响应中的Expires头来告诉客户端组件可以缓存多长时间，下一次访问从而减少不必要的http请求加快访问速度

注意：expires设置后，如果文件改变，可以通过文件名+版本号的方式更新文件

HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1
httpResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
httpResponse.setDateHeader("Expires", 0); // Proxies.

3. 压缩HTTP响应的大小来减少响应时间

从HTTP/1.1开始，web客户端指示支持HTTP请求中的Accept Encoding头进行压缩。

 Accept-Encoding: gzip, deflate

服务器接收到Accept-Encoding，通过响应中的Content-Encoding通知web客户端

 Content-Encoding: gzip

服务器根据文件类型选择gzip，但是服务器决定的压缩内容有限，通常会压缩Html文件，其实js文件样式文件xml、json都可以压缩，但是pdf类文件已压缩处理，再去操作他们只会浪费CPU和增加文件大小

4. Configure ETags

实体标记（etag）是web服务器和浏览器用来确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。添加etag是为了提供一种比 last-modified更灵活的实体验证机制。ETag是唯一标识组件特定版本的字符串。唯一的格式约束是要引用字符串。源服务器使用ETag响应头指定组件的ETag。

 HTTP/1.1 200 OK
 Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
 ETag: "10c24bc-4ab-457e1c1f"
 Content-Length: 12195

之后，如果浏览器必须验证组件，它将使用if None Match头将ETag传递回源服务器。如果etag匹配，则返回一个304状态代码，将此示例的响应减少12195字节。（如果etag不匹配，返回200重新下载所有组件及资源）

 GET /i/yahoo.gif HTTP/1.1
 Host: us.yimg.com
 If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
 If-None-Match: "10c24bc-4ab-457e1c1f"
 HTTP/1.1 304 Not Modified

如果您不需要ETag提供的灵活验证模型，那么最好将ETag完全删除。最后一个修改的头根据组件的时间戳进行验证。删除ETag可以减少响应和后续请求中HTTP头的大小。在Apache中，只需在Apache配置文件中添加以下行即可：

  FileETag none

5. 避免空的Image src

// <img src="">
// var img = new Image();img.src = "";

这两种方式都会使浏览器对服务器产生其他的请求

1. Internet Explorer向此页所在的目录发出请求。
2. Safari和Chrome会对实际页面本身提出请求。
3. Firefox3和早期版本的行为与Safari和Chrome相同，但3.5版本解决了这个问题[Bug444931]，不再发送请求。
   当遇到空图像src时，Opera不会执行任何操作。

Css

1. stylesheet文件置于文档头部

将样式表放在文档底部的问题是，它禁止在许多浏览器（包括Internet Explorer）中进行渐进式呈现。这些浏览器会阻止呈现，以避免在样式更改时重新绘制页面元素。因此用户无法查看空白白页。

2. 避免css表达式

1. ie5开始支持表达式，ie8开始不建议使用它，其他浏览器会忽略expression，所有此属性可用于跨浏览器开发
2. expression比我们预想的计算频率要多得多，不管是页面重新渲染、缩放、滚动甚至是鼠标移动都会触发计算从而影响网站性能
3. 内联是首选的唯一例外是主页，比如百度首页。每个会话只有很少（可能只有一个）页面视图的主页可能会发现，内联JavaScript和CSS会导致更快的最终用户响应时间。
4. 对于通常是许多页面视图中的第一个页面，有一些技术可以利用内联提供的HTTP请求的减少，以及通过使用外部文件实现的缓存好处。其中一种技术是在首页内联JavaScript和CSS，但在页面加载完成后动态下载外部文件。随后的页面将引用应该已经在浏览器缓存中的外部文件。

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

3. 外部调用javascript和css

1. 在现实中使用外部文件通常页面会加载更快，因为JavaScript和CSS文件可以由浏览器缓存。
2. 关键因素是外部JavaScript和CSS组件相对于请求的HTML文档数量的缓存频率。这个因素虽然很难量化，但可以用各种指标来衡量。如果站点上的用户在每个会话中有多个页面视图，并且许多页面重复使用相同的脚本和样式表，则缓存的外部文件会带来更大的潜在好处。

4. 选择link > @import

实践表明，CSS应该位于顶部，以便允许渐进式渲染。但是在IE@import中，行为与在页面底部使用相同，因此最好不要使用它。

5. 避免filter

IE专有AlphaImageLoader过滤器旨在解决IE版本<7的半透明真彩色png的问题。此过滤器的问题在于，它会阻止渲染，并在下载图像时冻结浏览器。它还增加了内存消耗，并应用于每个元素，而不是每个图像，因此问题成倍增加。
最好的方法是完全避免使用AlphaImageLoader，而是使用优雅地降级PNG8，这在IE中很好。如果您绝对需要AlphaImageLoader，请使用下划线hack_过滤器，以免对IE7+用户不友好。

Javascript

1. js置于文档底部

js阻止并行下载
另一种解决方法：defer属性，此属性表明script中不包含document.write并告知浏览器可以继续渲染，但是firefox不支持，ie执行也并不会是你预想的那样。有defer属性的script也可置于文档底部网页加载更快

2. 缩小javascript和css

1. 删除不必要的空格、缩进、注释、换行等减小js和css的大小，减少下载时间，提高响应性能
2. 压缩工具：JSMin and YUI Compressor

Image

1. Html中不要缩放图片

尽可能使用和需求一样的尺寸图片

2. 控制favicon.ico小且可缓存

mobile

1. 组件保持在25K以下

此限制与iPhone不会缓存大于25K的组件有关

不夸张地说，前端工程师的决策可以大大减少通过网络传输HTTP请求和响应所需的时间。