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

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"/>

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