注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】如何优化你的页面  

2014-04-14 22:42:59|  分类: HTML小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自独行冰海《如何优化你的页面》
如何从HTML、CSS、JS的角度优化你的页面?
本文转自-独行冰海大神

如何优化你的页面?
回答的主要角度:HTML、CSS、JS、SEO、PS
具体如下:
  1. 在书写HTML代码的时候,遵循标签语义化的要求,根据标签的语义性进行选择,如布局使用div、标题使用h系列标签、段落使用p标签等。
  2. HTML代码要合理嵌套,一般情况下,行元素当中不能包含块元素,除了段落、标题类型的块元素当中,既能够包含块元素,也能够包含行元素,而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素;ul/ol元素只能直接包含li元素;dl元素当中只能直接包含dt和dd元素;form表单当中只能直接包含filedset和legend,不能直接包含input元素。
  3. 使用外部引入样式表和JS行为代码,实现结构、样式和行为的相分离,降低模块间的耦合度。
  4. CSS规则命名中,一律采用小写加中划线的方式,不使用下划线或大写字母,命名采用更简明有语义的英文单词进行组合,进行合理的缩写
  5. CSS代码的书写顺序遵循CSS样式的渲染顺序:显示属性-自身属性-文本属性-其他
  6. 在上线之前进行CSS文件压缩
  7. 在CSS代码当中,尽量的规避掉不同浏览器的兼容问题,如果实在避免不了,也需要进行合理解决,同时尽可能的少使用hack
  8. 尽量不在代码中出现没有意义的空标签,对于可以采用空标签清除浮动的代码,可以用其他方法解决,如after伪元素
  9. 使用背景图合并技术,将多张背景图合并到一张图片上,从而降低页面与服务器之间的请求次数。
  10. 权衡嵌套层级以及扩展性等多个方面后,在适当位置使用三层嵌套技术。
  11. 合理的填写html文件中的title、meta等内容,合理书写a标签的title、img标签的title和alt,提升网站的SEO
  12. 制作网站中的404页面
  13. 合理控制JS文件的引入位置,提升网站的加载速度。
  14. 避免class与id重名,对于id名遵循小驼峰命名法。
  15. 利用对象命名空间、匿名函数、协同命名等方法,尽量避免团队合作时产生的命名冲突。
  16. 合理利用window.onload或jquery中的$(document).ready,尽量避免全局作用域被污染。
  17. 合理书写代码注释
  18. 对于功能类似的代码,进行函数的封装,可以使用面向对象的书写方法,提升代码的复用性和扩展性。
  19. 合理利用图片预加载和图片懒加载。
  20. 在DOM节点相关操作上进行优化,如利用变量存储查找到的元素,从而防止每次查找时进行页面重绘、利用文档碎片等。
  21. jQuery等插件的合理引用,处理常见的浏览器兼容问题,在标签查找方式上,采用更快的查找方法,如id>标签名>类名的查找。
  22. 对于AJAX的异步加载,提供加载的相关提醒。
  23. 在js代码上线之前,后台人员进行相应的JS代码压缩。
就写到这里吧,欢迎大家相互交流——独行冰海
  评论这张
 
阅读(20)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018