web前端代码的优化

web前端代码优化：一、html页面优化1.css文件放在head，js文件放在html尾部（的前面即可）。因为：下载某一个js时其他任务是暂停的，需要等这个JS下载并执行完毕后再下载其他的。　　2.尽量减少标签，不多用一个标签　　比如:clear清除浮动用:after　　web前端seo怎么优化　　3.减少dns查询　　每引用一个来自外部的文件，就会有一个dns查询，一般对首次访问网站的速度会有影响。　　4.避免出现空的src，如 data-original=""　　5.减少http请求　　比如:(1)使用CSS Sprite技术(css精灵)　　(2)css和js代码，能尽量合并就合并。(外部链接)　　6.js的延迟加载，异步加载，使用defer标签 、 async="true"　　二、代码优化　　1.项目最后使用压缩工具压缩css，js　　因为这样，可以减少页面的体积加快打开速度。　　2.css的class不要太长，要有清楚的层级关系　　3.js操作样式时使用class，html里不使用内联css和js代码　　三、JS优化　　1.字符串的拼接：使用 += 是较低效的，可使用数组的 join() 方法　　2.使用循环时尤其不要使用 for(in),while比for的效率要高一点。（循环次数很大的时候）　　3.局部变量的访问速度比全局变量更快，而且要尽量避免全局变量　　4.对DOM元素的每一次操作代价都比较高，所以尽量少得操作。　　比如：for循环中有对字符串的拼接，然后使用innerHTML操作,就应该把innerHTML放在for循环外面。　　5.对某个dom节点进行操作时，将这个dom节点存在一个局部变量中。　　6.关于字符串遍历，优先使用正则表达式　　7.使用直接量 var a = [] 比var a = new Array()快　　8.创建dom节点 最好不要直接写字符串，而应该调用creatElement()方法　　四、服务器方面优化　　1.提高自己服务器质量，带宽等方面　　2.开启浏览器缓存，减少http请求　　3.开启gzip压缩　　从前端角度出发有哪些注意事项有利于SEO?　　1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。　　2、 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。　　3、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。　　4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。　　5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。　　6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。　　7、 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。　　8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。