课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
提高页面加载速度和服务器响应速度,我们就需要从各种角度来给网页做优化,今天,我们就来了解一下,从代码角度分析,html和css在网页优化方面都有哪些改进方案。
HTML
一.避免内链/嵌入式代码:
1) 内联式: 在HTML标签的style属性中定义样式,在onclick这样的属性中定义Javascript代码;
2) 嵌入式: 在页面中使用style标签定义样式,使用script标签定义Javascript代码;
3) 引用外部文件: 在style标签中定义href属性引用CSS文件,在script标签中定义src属性引入Javascript文件.
1,2虽然减少了http请求数,但是增加了html的大小,相比3的总体大小甚小,便于分工操作,便于维护。
二.样式在上,脚本在下:
1)样式在head里面,页面渲染很快,会使用户感觉页面加载很快。反之,会先看到错乱的页面布局,给人感觉不好。
2)脚本在上会影响html的渲染或并行加载,并且屏加载,用户一般不需要看到功能,所以脚本在下为好。
三.压缩html
为了保持代码的可读性,好的方法是在代码中添加注释和使用缩进。
但是对于浏览器来说,这些都是不重要的。正因为如此,通过自动化工具压缩你的HTML是非常有用的。
通过移除多余的空白符、注释和一些与内容结构无关的的不需要的字符,能够节省一些字节。尝试用gzip压缩方式。
四.减少dom结点
用语义化的标签来代替万能的div。
CSS
一.压缩css
通过自动化工具压缩css,同压缩html。重复性的代码学会提炼。
二.合并多个css
普遍通过cdn合并或公司的合并工具进行合并,有效减少http请求数量。
三.合理使用css表达式
不是所有人都能合理使用css表达式的。所以把功能都交给javascript。css我们要休息一下喽。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。