web页面性能优化与SEO

最新推荐文章于 2019-03-09 16:34:03 发布

y向日葵

最新推荐文章于 2019-03-09 16:34:03 发布

阅读量318

点赞数

分类专栏： web页面性能优化与SEO 文章标签： web页面性能优化与SEO

web页面性能优化与SEO 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

web页面性能优化

	前端包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化针对
不同的资源有不同的方式。

前端优化的目的

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

常见的优化

网页内容	服务器	cookie	css	JavaScript	图片	移动客户端
减少HTTP请求次数	使用CDN	减少Cookie大小	将样式表置顶	将脚本置底	优化图像	保持单个内容小于25kb
减少DNS查询次数	添加Expires或Cache-Control报文头	页面内容使用无cookie域名	避免css表达式	使用外部JavaScript和CSS文件	优化CSS Sprite	打包组建成复合文档
避免页面跳转	Gzip压缩传输文件		用代替@import	精简JavaScript和CSS	不要再HTML中缩放图片
缓存ajax	配置ETags		避免使用Filters	去除重复脚本	使用小且可缓存的favicon.ico
延迟加载	尽早flush输出			减少DOM访问
提前加载	使用GET Ajax请求			使用智能事件处理
减少DOM元素数量	避免空的图片 src
根据域名加载内容
减少iframe数量
避免404

一.、页面级优化
例如：减少HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等。

减少HTTP请求数
1). 从设计实现层面简化页面
2). 合理设置 HTTP缓存
3). 资源合并与压缩
* 尽可能的将外部的脚本、样式进行合并，多个合为一个。另外，CSS、Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
4). CSS Sprites（css精灵）
* 合并css图片，减少请求次数
5). Inline Images
6). Lazy Load Image
* 图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽。
将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
异步执行inline脚本
Lazy Load Javascript
将CSS放在HEAD中
异步请求Callback
减少不必要的HTTP跳转
避免重复的资源请求
精简Javascript和CSS（将Javascript或CSS中的空格和注释全去掉）

二、代码级别的优化

例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。

(1). DOM

a. HTML Collection（HTML收集器，返回的是一个数组内容信息）
　　在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。
　　因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
b. Reflow & Repaint

(2). 慎用with
　　with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
　　因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。

(3). 避免使用 eval和 Function
　　每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
　　eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
　　Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。
　　
(4). 减少作用域链查找
　　前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
低效率的写法：

<span style="font-size:14px;">// 全局变量 
var count = 1; 
function myCallback(info){ 
    for( var i = 100000; i--;){ 
        //每次访问 count 都需要查找到作用域链最顶端，本例中需要访问 100000 次 
        count += i; 
    }
}

更高效的写法：

<span style="font-size:14px;">// 全局变量 
var count = 1; 
function myCallback(info){ 
    //局部变量缓存全局变量 
    var localVar =count; 
    for( var i = 100000; i--;){ 
    //访问局部变量是最快的 
    localVar += i; 
    } 
    //本例中只需要访问 2次全局变量
    在函数中只需要将 globalVar中内容的值赋给localVar 中
    count = localVar; 
}
</span>

此外，要减少作用域链查找还应该减少闭包的使用。

(5). 数据访问
　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽可能的减少对对象以及数组深度查找。

(6). 字符串拼接
　　在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

(7). CSS选择符优化
　　在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如
#toc A { color: #444; }这样一个选择符，如果是从右往左解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有兴趣的童鞋可以去了解一下。

SEO

(1) 网站结构布局优化：尽量简单，提倡扁平化结构。
　　一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

控制首页链接数量
　　网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构。
导航优化
　　导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加‘alt’和‘title’属性，告知搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
　　其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
网站的结构布局–不可忽略的细节
　　1）页面头部：logo及主导航，以及用户的信息。
　　2）页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
　　3）页面底部：版权信息和友情链接。
　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页下一页尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
控制页面的大小，减少http请求，提高网站的加载速度。
　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

(2) 网页代码优化

<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。
<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6是用于标题类的，

标签是用来设置页面主导航的等。
<a>标签：页内链接，要加“title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上el="nofollow"属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
<br>标签：只用于文本内容的换行，比如:

　　第一行文字内容
第二行文字内容
第三行文字内容
表格应该使用<caption>表格标题标签
<img>应使用 “alt” 属性加以说明
<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
　　<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
重要内容不要用JS输出，因为“蜘蛛”不认识
尽量少使用 iframe 框架,因为“蜘蛛”一般不会读取其中的内容
谨慎使用display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
不断精简代码
js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

y向日葵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web页面性能优化与SEO

web页面性能优化前端包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化针对不同的资源有不同的方式。前端优化的目的从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。常见的优化一.、页面级优化...
复制链接

扫一扫

专栏目录