如何对HTML性能优化,有哪些技巧
Admin 2022-08-25 群英技术资讯 499 次浏览
页面优化是对网页中的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等,尽管高版本浏览器是向后兼容的
转载http://www.cnblogs.com/xiyangbaixue/p/4029372.html
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
使用CSS怎样实现图片百叶窗的效果?图片百叶窗的展示效果还是比较比较常见的,那么这一效果是怎样做的呢?这篇文章给大家分享用CSS实现图片百叶窗的效果的方法,实现效果及代码如下:
block块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度
这篇文章主要介绍了利用CSS3 动画 绘画 圆形动态时钟的相关资料,需要的朋友可以参考下
这篇文章主要介绍了html2canvas生成的图片偏移不完整的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文通过三种方法给大家介绍css实现流程导航效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008