文/李晶晶

前段时间官网优化,从而进一步的了解了 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 代码时,不能同时做其它事情即