专业前端开发必备:seo小知识

专业前端开发必备:seo小知识

ID:8815650

大小:670.93 KB

页数:14页

时间:2018-04-08

专业前端开发必备:seo小知识_第1页
专业前端开发必备:seo小知识_第2页
专业前端开发必备:seo小知识_第3页
专业前端开发必备:seo小知识_第4页
专业前端开发必备:seo小知识_第5页
资源描述:

《专业前端开发必备:seo小知识》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、专业前端开发必备:SEO小知识文/李晶晶前段时间官网优化,从而进一步的了解了SEO,正好总结一下SEO知识,对于以后写界面也是一个参考和标准。1.减少HTTP请求当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。解决:1.合并图片(csssprites)2.合并CSS和JS文件3.图片较多的页面也可以使用lazyLoad等技术进行优化。2.高效使用HTML标

2、签和css样式HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。CSS指层叠样式表(CascadingStyleSheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,不是说要你重构页面,只是希望在碰到这种情况的时候解决这些问题。如这样不合理的HTML:56或者这样的CSS:以上都是对HTML和C

3、SS非常糟糕的使用方法。正确理解:HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如FlowElements(流元素),MetadataElements(元数据元素),PhrasingElements(语法元素)。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。CSS是用来渲染页面的,也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的,这里对css选择符按照开销从小到大的顺序梳理一下:ID选择符#box类选择符.box标签div伪类和伪元素a:hover当页面被触发引起回流(reflow)的时候,低效的选择符依然

4、会引发更高的开销,所以请避免低效。3.将CSS和JS放到外部文件中引用,CSS放头部,JS放尾将CSS放在顶部能加快页面内容显示,并且能避免页面产生白屏将JS放在底部JS会阻塞对其后面内容的呈现JS会阻塞对其后面内容的下载维护、易扩展,方便管理和重复利用。正确理解:JavaScript是浏览器中的霸主,为什么这么说,为在浏览器在执行JavaScript代码时,不能同时做其它事情即