关于前端优化技术之电脑端兼容性调试介绍

SEOER可以通过对网页性能的速度测量和分析来获取网页上的大部分性能数据。如何根据这些数据采取适当的方法和手段来优化SEO的性能？  

基于SEO优化的PC浏览器前端优化技术  

前端优化策略很多，可以概括为网络加载类、页面呈现类、CSS优化类、javascript执行类、缓存类、图像类、体系结构协议类等。  

网络加载类  

1、减少HTTP资源请求的数量  

百度和谷歌官员在他们的搜索优化指南中反复强调尽可能多地合并HTTP请求。在前端页面中，通常建议尽量合并静态资源图片、javascript或css代码，以减少页面请求数量和资源请求消耗，从而缩短首次访问页面的用户的等待时间。通过构建工具合并图像、CSS、javascript和其他文件可以减少HTTP资源请求的数量。此外，我们应该尽最大努力避免重复资源和增加冗余请求。  

2、减小HTTP请求大小  

除了减少HTTP资源请求的数量，我们还应该最小化每个HTTP请求的大小。例如，可以使用减少不必要的图片、javascript、css和html代码、优化文件压缩或使用gzip压缩传输内容来减少文件大小和缩短网络传输等待时间。特别是百度闪电算法之后，对网站的访问速度也有要求。  

3、将css或javascript放在外部文件中，避免直接使用<style>或<script>标记。  

在HTML文件中引用外部资源可以有效地利用浏览器的静态资源缓存，但有时在简单的移动页面css或javascript的情况下，为了减少请求，css或javascript会直接写入HTML，具体根据css或javascript文件的大小和业务场景而定。如果css或javascript文件的内容更多，业务逻辑更复杂，建议将其引入外部文件。  

<linkrel=“stylesheet”href=“//cdn.domain.com/path/main.css”><scriptsrc=“//cdn.domain.com/path/main.js”><script>  

4、避免空心Href和SRC  

当<link>标记的href属性为空或<script>、<img>和<iframe>标记的src属性为空时，浏览器在渲染过程中仍会加载href属性或src属性的空内容，直到加载失败，从而阻止页面中其他资源的下载过程，加载的内容。是无效的，所以应该尽量避免。  

<imgsrc=“”alt=“photo”>ahref=“>单击链接</a>  

5、为HTML指定Cache-Control或Expires  

为HTML内容设置Cache-Control或Expires可以将HTML内容缓存起来，避免频繁向服务器端发送请求。在页面Cache-Control或Expires头部有效时，浏览器将直接从缓存中读取内容，不向服务器端发送请求。  

<metahttp-equiv="Cache-Control"content="max-age=7200"/><metahttp-equiv="Expires"content="Mon,20Jul201623:00:00GMT"/>  

6、合理设置Etag和Last-Modified  

合理设置Etag和Last-Modified使用浏览器缓存，对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少Web资源下载的带宽消耗并降低服务器负载。  

<metahttp-equiv="last-modified"content="Mon,03Oct201714:45:57GMT"/>  

7、减少页面重定向  

页面每次重定向都会延长页面内容返回的等待延时，一次重定向大约需要600毫秒的时间开销，为了保证用户尽快看到页面内容，要尽量避免页面重定向。  

8、使用静态资源分域存放来增加下载并行数  

浏览器在同一时间向同一个域名请求文件的并行下载数是有限的，因此可以利用多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数，缩短页面资源加载的时间。通常根据多个域名来分别存储JavaScript、CSS和图片文件。  

<linkrel="stylesheet"href="//cdn1.domain.com/path/main.css"><scriptsrc="//cdn2.domain.com/path/main.js"></script>  

9、使用静态资源CDN来存储文件  

如果条件允许，可以利用CDN网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间。  

10、使用CDNCombo下载传输内容  

CDNCombo是在CDN服务器端将多个文件请求打包成一个文件的形式来返回的技术，这样可以实现HTTP连接传输的一次性复用，减少浏览器的HTTP请求数，加快资源下载速度。例如同一个域名CDN服务器上的a.js，b.js，c.js就可以按如下方式在一个请求中下载。  

<scriptsrc="//cdn.domain.com/path/a.js,b.js,c.js"></script>