[专业前端开发必备：SEO小知识.docxVIP

专业前端开发必备：SEO 小知识 文/李晶晶 前段时间官网优化,从而进一步的了解了 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: 56 或者这样的 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 变量储存内容,考虑大 量