美文网首页
HTML性能优化

HTML性能优化

作者: 我不叫奇奇 | 来源:发表于2017-03-10 15:58 被阅读18次

转载http://www.cnblogs.com/xiyangbaixue/p/4029372.html

页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的主题,提高页面的相关性。下面是我总结出来的编写html代码时需要注意的,仅供参考。

1、HTML标签有始终。 减少浏览器的判断时间

2、把script标签移到HTML文件末尾,因为JS会阻塞后面的页面的显示。

3、减少iframe的使用,因为iframe会增加一条http请求,阻止页面加载,即使内容为空,加载也需要时间

4、id和class,在能看明白的基础上,简化命名,在含有关键字的连接词中连接符号用'-',不要用'_'

5、保持统一大小写,统一大小写有利于浏览器缓存,虽然浏览器不区分大小写,但是w3c标准为小写

6、清除空格,虽然空格有助于我们查看代码,但是每个空格相当于一个字符,空格越多,页面体积越大,像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符,这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格,sublime text中ctrl+a,然后长按shift+tab全部左对齐,清除行开头的空格

7、减少不必要的嵌套,尽量扁平化,因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签,直到它匹配上才能显示它的内容,所以当嵌套很多时打开页面就会特别慢。

8、减少注释,因为过多注释不光占用空间,如果里面有大量关键词会影响搜索引擎的搜索

9、使用css+div代替table布局,去掉格式化控制标签如:strong,b,i等,使用css控制

10、代码要结构化、语义化

11、css和javascript尽量全部分离到单独的文件中

12、除去无用的标签和空标签

13、尽量少使用废弃的标签,如b、i等,尽管高版本浏览器是向后兼容的

相关文章

  • H5性能优化

    移动端HTML5页面前端性能优化。如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:1、PC优化...

  • web前端开发编码规范及性能优化

    代码优化 这个部分仅仅将代码优化本身,不考虑性能,关于代码部分的性能优化在 页面渲染 部分 代码优化 中 HTML...

  • HTML性能优化

    转载http://www.cnblogs.com/xiyangbaixue/p/4029372.html 页面优化...

  • 性能测试-前端

    参考文档:[http://www.androidchina.net/8612.html] 性能问题分类 性能优化指...

  • Android知识点总结

    面试会被问到;性能优化往哪些方面考虑?内存优化?布局优化?Listview优化?webview与html5 js...

  • 大型网站技术架构-瞬时响应高性能架构-网站性能测试

    1、不同视角下的网站性能 1)用户视角的网站性能: 使用前端架构优化手段:优化页面HTML样式、利用浏览器端的并发...

  • iOS 性能优化

    性能监控及优化http://www.cocoachina.com/ios/20180911/24861.html ...

  • 性能优化

    +WEB前端性能优化:HTML,CSS,JS和服务器端优化对前端开发工程师来说,前端性能优化的重要性是不言而喻的,...

  • 前端性能优化

    前端性能优化,无非是html,css,js三方面的优化。 html\css\js首先要分开,拒绝内联等方式,运用文...

  • 前端优化(Font-end Optimization)

    一、性能优化原则及分类 二、图片处理 三、雅虎军规 四、代码优化 html 代码优化 避免空的图片src 协议自适...

网友评论

      本文标题:HTML性能优化

      本文链接:https://www.haomeiwen.com/subject/oefogttx.html