前端基础优化记录手册

a标签的SEO优化细节

如果需要在新窗口中打开链接,我们使用的方法是在a上加上taget=“_blank”,但很多人不知道这是不符合w3c的规范的,在使用严格的DOCTYPE(xhtml1-strict.dtd)校验时,会提示“there is no attribute target for this element(in this HTML version)”的错误信息。

  所以很多老外写的东西基本上就不会出现taget=“_blank”。他们替换的方案是使用HTML4.0新增的标签rel来表示,rel是用来表明链接和包含此链接页面的关系,以及链接打开的目标。rel有许多的属性值,比如next、previous,、chapter、section等等,还有我们用来拒绝搜索引擎蜘蛛向下爬行的nofollow(这一点很重要,在wordpress中,几乎所有的评论中的用户名的链接都是加了rel=nofollow的,所以想通过在博客中添加评论来增加外链都是徒劳的)。而我们现在要使用的就是rel=”external”属性,用来表示链接将在新窗口中打开。当然,这只是符合strict标准的方法,而并没有真正实现在新窗口开打链接,还需要javasscript的支持。

  思路,在页面载入以后,将rel含有external的a标签,通过js加上target=”_blank“。下面提供jquery方法,代码如下:

1
2
3
4
5
6
<script>
jQuery(function($){
//external加上target="_blank"
$("a[rel*=external]").attr("target","_blank");
});
</script>

以上只是jquery的实现方式,也是本博使用的方法,js原生方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<ANCHORS.LENGTH; i++) {
var anchor = anchors;
if (anchor.getAttribute(“href”) &&
anchor.getAttribute(“rel”) == “external”)
anchor.target = "_blank";
}
}
window.onload = externalLinks;
</script>

性能调优

大约 80%-90% 的终端响应时间是花费在前端,其中包含下载页面中的图片,样式表,脚本,flash等。Yahoo 为此总结了 14 条规则,成为网站性能优化的事实标准。

雅虎网站性能优化的 14 条规则:

  1. 尽可能减少 HTTP 请求数
  2. 使用 CDN(内容分发网络)
  3. 为文件头指定 Expires 或 Cache-Control,使内容具有缓存性
  4. 使用 Gzip 压缩内容
  5. 把 CSS 放到顶部
  6. 把 JavaScript 放在底部
  7. 避免在 CSS 中使用 Expressions
  8. 把 JavaScript 和 CSS 都放到外部文件中
  9. 减少 DNS 查找次数
  10. 压缩 JavaScript 和 CSS
  11. 避免重定向
  12. 剔除重复的 JavaScript 和 CSS
  13. 配置 Etags
  14. 使 AJAX 缓存

对规则的分析:

  • 代码编写方面的规则:
    把 CSS 放到顶部
    把 JavaScript 放在底部
    把 JavaScript 和 CSS 都放到外部文件中
    避免在 CSS 中使用 Expressions
    使 AJAX 缓存
  • 打包方面的规则:
    尽可能减少 HTTP 请求数
    压缩 JavaScript 和 CSS
    剔除重复的 JavaScript 和 CSS
  • 部署方面的规则:
    使用 CDN(内容分发网络)
    为文件头指定 Expires 或 Cache-Control,使内容具有缓存性
    使用 Gzip 压缩内容
    减少 DNS 查找次数
    避免重定向
    配置 Etags
    对规则的实践

部署方面的规则,应用 Nginx 为静态文件添加 Expires 跟 Cache-Control 头, 配置 Etags,并启用 Gzip 压缩。并且避免在 Nginx 中做重定向,有条件的话可以 启用 CDN,并优化网络配置以减少 DNS 查找次数。
代码编写方面的规则,需要在编写代码种形成规范。默认使用类似 jQuery 这样的库 便可以对 AJAX 进行缓存。
打包方面 Linner 可以合并 JavaScript 与 CSS 文件, 并且支持小图片的合并, 用以减少 HTTP 请求数。同时 Linner 的仓库管理可以避免重复的 JavaScript 与 CSS 文件的出现。在 build 过后所有的文件将会被压缩。

优化网站加载速度的14个技巧

1.服务器响应时间
  即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果。当涉及到提高网站的速度,服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的小贴士。

有独立的服务器,而不是选择共享/托管服务器。
提高Web服务器的质量。
移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。
2.浏览器缓存
  浏览器缓存可以减少HTTP请求,从而反过来提高网站的加载速度。
  注意:如果过期时间与文件挂钩,而此时文件中的内容需要更改的话,那必须先重命名文件,以便浏览器可以获取新添加的代码。

3.gzip压缩
  gzip压缩是一个压缩实用程序,我们可以用它来快速加载网站。它的工作原理是在发送HTML和CSS文件到互联网浏览器之前,先压缩文件大小。允许mod_defalte模块启用Gzip压缩

4.异步脚本
  还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本,网站访问者也不再需要不得不按捺下性子,等待所有的脚本加载完之后才能呈现页面。在异步模式中,脚本是在后台下载的。通常,我们会将第三方脚本作为异步脚本,因为下载这些脚本时常会让网站速度变得非常慢。

<script async src="http://www.yoursite.com/script.js"></script>
5.内容分发网络(CDN)
  内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。要是有网站访问者请求文件和网页时,就可以直接从就近的网站服务器发送过来(也可以是从负载最小的服务器)。

6.优化JavaScript、HTML和CSS
  优化JavaScript和CSS也可以提高一个网站的网页速度,而且这个方法非常简单。优化JavaScript、HTML和CSS就是删除所有不必要的空格和注释,从而减小文件大小。下面是一些最小化JavaScript和CSS的流行工具,非常有用。

CSS Minifier
Avivo
HTML Compressor

7.置于顶部的样式表和底部的脚本
  将样式表放在顶部有助网站的迅速加载,因为这样可以使得网页渐进式呈现。一般地,所有的互联网浏览器都支持在给定时间内并行下载两个组件(图像、样式和脚本)。但是通常而言,霸道的脚本会在并行下载时会阻止其他的下载,直到脚本下载完毕。

8.避免阻塞型的JavaScript和CSS
  在浏览器呈现网页之前,它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中,如果遇到了脚本,此过程就会中止,转而先执行脚本,完了才会继续原先的活动。因此建议避免阻塞型的JavaScript,尤其是外部脚本。

  阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript,或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上,同时需要确保CSS的优化。

9.JavaScript的延迟解析
  为了加载网页,浏览器必须解析所有的<script>标记内容,从而增加了网站的加载时间。通过延迟解析脚本,那么就可以减少初始网站的加载时间了。

10.启用Keep Alive
  当用户通过浏览器请求网页时,浏览器首先需要访问HTML文件。然后它才能读取这些文件,并请求与其他资料相关联(此处的资料可以是CSS,JavaScript,也可以是任何相关的图像)。

  如果“Keep Alive”选项被禁止,那么下载网站的进程通常就会增加,从而拖累了网站速度。启用KeepAlive的另一个好处是,它可以减少CPU的使用。

语法: KeepAlive On
11.图像和文件格式
  图像对于任何网站都非常有价值,因为它能传达一些强有力的信息给网站的访问者。最常见的图像格式是GIF、JPEG、PNG等。每种格式都有其长处和局限。建议使用JPEG格式,而不是GIF和PNG图像,除非图像包含Alpha因子或者是透明的。

12.优化代码:不使用内联CSS
  内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作,给网站管理员带来各种不便,还会进一步增加网页的大小。

13.文件分离
  网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是,这么做可以提高服务器的稳定性,特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件,这样可以增加并行下载的数量。

14.尽量减少HTTP请求
  还有一种简单的优化网页速度的方法是,减少HTTP请求。当一个网站一下子收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间。那么,又该如何减少HTTP请求?请见以下步骤。

减少网站上的对象数量。
最小化网站上的重定向数量。
使用CSS Sprites技术(只要你需要的那部分图片内容)。
结合JavaScripts和CSS。

0%