文/李晶晶
前段时间官网优化,从而进一步的了解了 SEO,正好总结一下 SEO 知识,对于以后写界面也是一个参考和标准。
1.减少HTTP请求
当我们请求的网页文件中有很多图片、CSS、JS 甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个 HTTP 请求都会对服务器和浏览器产生性能负担。
网速相同的条件下,下载一个 100KB 的图片比下载两个 50KB 的图片要快。
解决: 1.合并图片(css sprites)
2.合并 CSS 和 JS 文件
3.图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2.高效使用HTML标签和css样式
HTML 是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS 指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人, HTML 就是人的骨架,CSS 就是人的衣装,一个人的品味从他的衣装就能一目了然。
一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的 CSS 样式,不是说要你重构页面,只是希望在碰到这种情况的时候解决这些问题。如这样不合理的 HTML:
或者这样的 CSS:
以上都是对 HTML 和 CSS 非常糟糕的使用方法。
正确理解:HTML 是一门标记语言,使用合理的 HTML 标签前你必须了解其属性,比如 Flow Elements(流元素),Metadata Elements(元数据元素),Phrasing Elements(语法元素)。比较基础的就是得知道块级元素和内联元素、盒模型、 SEO 方面的知识。
CSS 是用来渲染页面的,也是存在渲染效率的问题。CSS 选择符是从右向左进行匹配的,这里对 css 选择符按照开销从小到大的顺序梳理一下:
ID 选择符 #box
类选择符 .box
标签 div
伪类和伪元素 a:hover 当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的
开销,所以请避免低效。
3.将CSS和JS放到外部文件中引用,CSS放头部,JS放尾
将 CSS 放在顶部能加快页面内容显示,并且能避免页面产生白屏
将 JS 放在底部
JS 会阻塞对其后面内容的呈现
JS 会阻塞对其后面内容的下载
维护、易扩展,方便管理和重复利用。
正确理解:JavaScript 是浏览器中的霸主,为什么这么说,为在浏览器在执行 JavaScript 代码时,不能同时做其它事情即<script>每次出现都会让页面等待脚本的解析和执行(不论 JavaScript 是内嵌的还是外链的,JavaScript 代码执行完成后才继续渲染页面。这个也就是 JavaScript 的阻塞特性。
因为这个阻塞的特点,建议把 JavaScript 代码放到</body>标签以前,这样既能有效的防止 JavaScript 的阻塞,又能使得页面的 HTML 结构能更快的释放。
4.压缩图片和使用图片Sprite技术
其实压缩图片和图片精灵是两个方面的技术
现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:
1.缩小图片分辨率;
2.改变图片格式;
3.降低图片保存质量;
关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在 CSS 中的图片还是在 HTML 结构中的图片都会产生 HTTP 请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite)。图片精灵就是把许多图片放到一张大图片里面,通过 CSS 来显示图片的一部分。在背景整合的时候,也需要考虑图片质量同时也需要考虑图片的大小,注意控制 Cookie 大小技术,Cookie 是有生命周期的,所以请注意设置合理的过期时间,合理地 Expire 时间和不要过早去清除 coockie,都会改善用户的响应时间。
5.减少对DOM的操作
在《高性能 JavaScript》中这么比喻:“把 DOM 看成一个岛屿,把 JavaScript(ECMAScript)看成另一个岛屿,者之间以一座收费桥连接”。所以每次访问 DOM 都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
解决办法:修改和访问 DOM 元素会造成页面的 Repaint 和 Reflow,循环对 DOM 操作更是罪恶的行为。所以请合理的使用 JavaScript 变量储存内容,考虑大量 DOM 元素中循环的性能开销,在循环结束时一次性写入。
减少对 DOM 元素的查询和修改,查询时可将其赋值给局部变量。注:在 IE 中:hover 会降低响应速度。
6.代码性能优化
(1)display:none;优于 visibility:hidden;前者隐藏不占用物理空间,后者会占用。
(2)合并 margin,padding,border 的-top,-left,-right,-bottom 的设置,简短简洁。
(3)选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗。
(4)如若值为 0,则去掉单位,如 border-right:0px;可以写为 border-right:0; (5)没有边框,用 border:none;优于 border;0;
(6)如果可以,颜色值尽量用三位字符表示,如 color:#336699;写为:color:#369;
(7)在保持代码解耦的前提下,尽量合并重复的代码。
(8)background,font 的多个属性尽可能缩写。
如: 背景颜色,背景图片,背景图片的重复次数及背景图片处于左右上下的位置,背景图片的大小,都可以合在一起写。
(9)用 href="javascript：vold(0)"代替原来的 href="#",避免空链接点击后重置到页面首端。
(10)所有内页指向首页的链接写成<a href="/">不必写全。
(11)在 body 中,尽量少用图片 repeat,且若用,图片宽和高不少于 8px,否则加载背景图片时候需要重复的次数会影响性能。
(12)图片若小,尽可能使用 sprite 技术,减少 http 请求次数。《=200KB 图片所需的加载时间基本是差不多的。客户端每显示一张图片都会向服务器请求一次。所以图片越多,请求次数越多,造成的延迟的可能性就越大。
(13)作为大型网站来说,首页使用内联式样式表,这样可以减少 http 请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以:
把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式(Expression)
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减少 DOM 访问
开发智能事件处理程序
最好的方案就是按照 HTML 规范在文档 <head></head> 内加载你的
样式表。
7.提高HTML加载速度
1页面减肥页面的肥瘦是影响加载速度最重要的因素;
删除不必要的空格、注释;
将 inline 的 script 和 css 移到外部文件;
可以使用 HTML Tidy 来给 HTML 减肥,还可以使用一些压缩工具来给
JavaScript 减肥;
2减少文件数量
减少页面上引用的文件数量可以减少 HTTP 连接数;
许多 JavaScript、CSS 文件可以合并最好合并;
3减少域名查询
DNS 查询和解析域名也是消耗时间的,所以要减少对外部 JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好;
4缓存重用数据使用缓存;
5优化页面元素加载顺序首先加载页面最初显示的内容和与之相关的 JavaScript 和 CSS; 然后加载 DHTML 相关的东西;
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载;
6减少 inline JavaScript 的数量
浏览器 parser 会假设 inline JavaScript 会改变页面结构,所以使用 inline JavaScript 开销较大;
不要使用 document.write()这种输出内容的方法,使用现代 W3C DOM 方法来为现代浏览器处理页面内容;
7使用现代 CSS 和合法的标签
使用现代 CSS 来减少标签和图像,例如使用现代 CSS+文字完全可以替代一些只有文字的图片;
使用合法的标签避免浏览器解析 HTML 时做“error correction”等操作,还可以被HTML Tidy(是用来清理 HTML 代码的免费工具)来给 HTML 减肥;
8不要使用嵌套 tables 9指定图像和 tables 的大小
如果浏览器可以立即决定图像或 tables 的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作,这不仅加快了页面的显示也预防了页面完成加载后布局的一些不当的改变 image 使用 height 和 width;
table 使用 table-layout: fixed 并使用 col 和 colgroup 标签指定 columns 的 width;
8.正确理解Repaint和Reflow
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变 visibility、outline、背景色等等。
Reflow(重排)就是 DOM 的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证 DOM 树上的所有其它结点的 visibility 属性,这也是 Reflow 低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style 属性的改变等等。如果 Reflow 的过于频繁,CPU 使用率就会噌噌的往上涨。解决办法:上面提到通过设置 style 属性改变结点样式的话,每设置一次都会导致一次 reflow,所以最好通过设置 class 的方式;有动画效果的元素,它的 position 属性应当设为 fixed 或 absolute,这样不会影响其它元素的布局;如果功能需求上不能设置 position 为 fixed 或 absolute,那么就权衡速度的平滑性。
总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制 Reflow 的影响范围。
9.书写html的时候做到结构语义化
结构中主要包括了 head 和 body 两个部分,但是我们经常说的是结构语义化主要是 body 中的标签,但是我在这里还是简单的说一下 head,head 中其实包括了一些对于我们 seo 很有用的一些东西,比如 title,Description,Keywords,这些东西在爬虫抓取的时候都是有帮助的,当然,还有其他的一些,比如设置缓存等一些其他的信息。
那么 body 中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如 div,span,h,ul,ol,dl,p 等等这类的标签的使用。应该非常合理,还有就是注意 h 标签的断层,及 h1 标签的使用,这些都是非常重要的。
同时在我们的结构中不要出现 style 和 onclick 这样的内联的样式和事件。能够注意结构与表现、行为的分离。
标签语义化的好处:
(1)有利于搜索引擎;
(2)结构清晰的 HTML 在团队合作中的作用 (3)有利于盲人屏幕阅读器
10.使用JSON格式来进行数据交换
基本原理:
JSON 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
与 XML 序列化相比,JSON 序列化后产生的数据一般要比 XML 序列化后数据体积小,所以在 Facebook 等知名网站中都采用了 JSON 作为数据交换方式。
JS 操作 JSON:
在 JSON 中,有两种结构:对象和数组。
-
一个对象以 “ { ” 开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/ 值对”之间使用 “ , ”(逗号)分隔。名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:
2. 数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:
对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道 JSON 结构的情况下,使用 JSON 进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码。
11.注意控制Cookie大小和污染
基本原理和使用方法:
有关 Cookie 的基础和高级知识可以去看一篇文章《JavaScript 操作 Cookie》; 因为 Cookie 是本地的磁盘文件,每次浏览器都会去读取相应的 Cookie,所以建议去除不必要的 Cookie,使 Coockie 体积尽量小以减少对用户响应的影响;
使用 Cookie 跨域操作时注意在适应级别的域名上设置 cookie 以便使子域名不受其影响;
Cookie 是有生命周期的,所以请注意设置合理的过期时间,合理地 Expire时间和不要过早去清除 cookie,都会改善用户的响应时间。
12.使用CDN加速(内容分发网络)
CDN 的全称是 Content Delivery Network,即内容分发网络。
当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN 系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
不足之处:实时性不太好是 CDN 的致命缺陷。随着对 CDN 需求的逐渐升温, 这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。
解决方法:是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。
13.添加http Expires头
为图片视频之类很少改变的资源设置长的 Expires 时间将直接减少 http 请求; 如果资源设置了 Expires 头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生 http 请求
14.压缩组件
在 Server 端对 Response 资源进行压缩再传给浏览器,一般使用 GZIP。
15.确保Ajax请求遵守性能,必要时候应具备长久的expires头
简化要点:
(1)语义化 html 标签,用合适的标签嵌套合适的内容,不可过分依赖 div,对浏览器更友善就能更容易被抓取
(2)重要的内容 html 代码放在前面,放在左边。搜索引擎爬虫是从左往右,从上到下进行抓取的,利用布局来实现重要的代码在上面
(3)重要内容要写在 html 架构里面,蜘蛛不会抓取 js 的内容
(4)尽量减少使用 iframe,因为蜘蛛不会抓取 iframe 的内容
(5)为图片 img 加上 alt 属性,加了 alt 就不必加 title 了,避免搜索引擎认为我们恶意优化。alt 能让图片没加载时都能有文字提示
(6)需要强调的地方加上 title,本页面内跳转 a 标签内也要加 title (7)重要的地方可以保留文字,有些地方必须用图,但是蜘蛛不会爬 img,这时应该设置文本,再用缩进隐藏的方法去掉文字,例如 logo 的优化就是这样做的。注意隐藏不能用 display:none,蜘蛛不会检索 display:none 的内容,应用这个方法的标签一般是 logo,标题等重要信息
(8)尽量做到 js、css、html 的分离,不要在 html 中写样式代码 (9)注释的东西能去掉应该去掉,对搜索引擎更加友好
(10)css 放在头部,js 放在尾部,尽量使用外链或者工具对 css 和 js 进行压缩 (11)减少 http 的请求,使页面更快加载 (12)使用本地缓存更快地访问网站,使用 cdn 网络,加快用户访问速度
(13)使用 G-ZIP 压缩,浏览速度更快,搜索引擎抓取信息量更大
(14)Robots.txt 文件
(15)链接可根据实际需求添加 tilte 属性以及 nofllow 值;非特殊性链接,链接地址一定要写入 herf 属性,有些前端开发人员为了省事,直接用 div 加个 click 事件当链接, 在视觉上和使用上确实是实现了链接效果,但是做过 SEO 优化的人员都知道,蜘蛛目前对于 js 的支持很差,基本无法读取里面的链接地址。所以说用 click 事件是绝对不允许的,特别是一些重要的导航链接。
(16)关键一点是头部的 title,description,keyword 的设置。
1.title 设置不宜过长,要简短,网站的名字与相关的小内容,一般为 10-20 个字。不能重复
2.keywords 设置 10 个关键词,没个词不能太长,简短且符合你网站的特点,
不能重复
3.description,50 个字内描述你的网站。注:description 写原创的话,并包含 2-3 个关键词比较好;
皖公网安备 34010202600669
