一般来说，Web 前端就是应用服务器处理之前的部分，包括浏览器渲染、加载，前端视图模型，图片视频资源，CDN 等，主要优化方法就是优化浏览器访问渲染过程，使用反向代理，使用 CDN 服务等。

浏览器访问优化

减少 http 请求数

HTTP 协议是无状态的应用层协议，每次 HTTP 请求都会建立新的通信链路，并且在服务端，每个 HTTP 连接都会开启一个单独的线程去处理请求，这都会产生额外的开销。

减少 HTTP 请求的方法是：合并 CSS、合并 JavaScript、合并图片。将 CSS、JavaScript 合并为一个文件，这样浏览器就只需要一次请求就可以获得这些资源啦。图片也可以合并，如果每张图片都有不同的超链接，可通过 CSS 偏移响应鼠标点击操作，构造不同的 URL。

同时使用 HTTP 的 keep-alive 来进行连接的复用，以此来减少建立的 HTTP 连接数，提高访问性能。

使用浏览器缓存

对网站而言，CSS、JavaScript、Logo、图标等静态资源文件的更新频率相对较低，而它们又是每次请求必须获取的资源，所以如果把这些文件缓存在浏览器中，就可以极好地改善性能。通过设置 HTTP 头中的 Cache-Control 和 Expires 的属性，就可以设定浏览器的缓存时间。

有时候，静态资源文件需要更新。这时可以通过改变文件名来实现，即更新 JavaScript 文件并不是更新 JavaScript 文件内容，而是生成一个新的 JS 文件并更新 HTML 文件中的引用。

更新静态资源时，应该采取批量更新的方式，一个文件一个文件地逐步更新，并留有一定的间隔时间。这样可以避免用户浏览器突然大量缓存失效，集中更新缓存，导致的负载骤增、网络堵塞。

启用压缩

在服务端进行文件的压缩，在浏览器端对文件解压缩，可有效减少通信传输过程中的数据量。

对于文本文件，压缩率能够达到 80% 以上，因此 HTML、CSS、JavaScript 文件启用 GZip 压缩，可以有效地减少通信传输的数据量。但启用压缩的同时也会给浏览器和服务器带来额外的开销，所以要具体情况具体分析。

CSS，JavaScript 代码优化

浏览器会下载完全部 CSS 之后才对整个页面进行渲染。而 JavaScript 则相反，浏览器在加载 JavaScript 后立即执行。

• CSS 代码优化：

  • 尽量使用外部样式，并且放在页面顶部加载，一方面能够及时渲染，另一方面能够避免因某些样式导致阻塞渲染
  • 压缩合并 CSS 文件，尽量精简文件，减少通信传输数据量和请求连接数

• JavaScript 代码优化：

  • 因为 JavaScript 代码边加载边解析，解析的过程会阻塞浏览器渲染，因此把 JavaScript 代码放在页面底部加载
  • 同样的压缩合并 JavaScript 文件，尽量精简文件，减少通信传输数据量和请求连接数
  • 写高性能的 JavaScript 代码

减少 Cookie 传输

Cookie 会包含在每次请求和响应中，所以太大的 Cookie 会严重影响数据的传输，应该尽量减少 Cookie 中传输的数据量。

另外，对于某些静态资源（CSS、Script 等）的访问，发送 Cookie 没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送 Cookie，这样就减少了 Cookie 传输的次数。

CDN 加速

CDN （Content Distribute Network，内容分发网络）的本质也属于缓存，把数据缓存在里用户最近的地方，使用户尽快的获取数据，即所谓网络访问第一跳。

因为 CDN 部署在网络运营商的机房，这些运营商又同时为用户提供网络服务，因此用户请求的路由会优先到达 CDN 服务器，如果 CDN 中存在浏览器请求的资源，就直接返回给浏览器，最短路径返回响应，加速用户访问速度，同时还能够为数据中心减轻负载压力。

利用 CDN 的网站架构

CDN 一般用来缓存静态资源，CSS，Script 脚本，静态页面，图片等，这些内容修改频率很低但是访问请求频率很高，因此放在 CDN 上能够很好的改善访问速度。

反向代理

传统代理服务器位于浏览器一侧，代理服务器将 HTTP 请求发送到互联网，而反向代理服务器位于网站机房一侧，代理网站 Web 服务器接收 HTTP 请求。

传统的代理服务器是当你请求不到所请求的资源时，由代理服务器帮你请求，你知道你请求的最终的服务器是谁，典型的例子就是 VPN，通过代理服务器来请求到墙外的世界。

而反向代理是当你请求一个地址时，你请求的是反向代理服务器，然后由反向代理服务器去请求其他服务器来获取内容，而你不知道最终是从哪一台服务器获取到的数据。

反向代理 Web 服务器接收 HTTP 请求，然后进行请求转发，获取到内容后返回给你，你只知道是由反向代理服务器给你的数据，而不知道数据源最终是从哪个服务器来的。

利用反向代理的网站架构

反向代理服务器具有保护作用，来自互联网的请求都需要经过反向代理服务器，相当于在 web 服务器之间建立起了一道屏障。

除了安全以外，可以在反向代理服务器上进行一些静态资源的缓存，以此来提高访问速度，减轻应用服务器的负载压力。当用户第一次访问静态内容时，静态内容就被缓存在反向代理服务器上，这样当其他用户访问该静态内容时，就可以直接从反向代理服务器返回。

当然，有些动态资源也可以缓存在代理服务器上面，比如说热门的词条，帖子，博客等，这些资源的请求量可能非常大，如果每次都走一遍流程的话会造成很大的压力，同时，当这些动态内容发生改变时，会通过内部通知机制通知反向代理服务器缓存失效，代理服务器会重新加载最新的动态资源再次缓存起来。

此外，反向代理服务器还可以用来做负载均衡，通过负载均衡来构建服务器集群，以此来提高系统的总体处理能力，进而应用提高服务器处理高并发的能力。

---

PS：使用 ajax 也是提高用户体验很好的方法，不过 ajax 对于 SEO 并不友好，所以需要用到 SEO 的地方还是要考虑好是否要用 ajax。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17380.html