HTML——性能优化

1. 优化 DOM

1.删除不必要的代码和注释包括空格,尽量做到最小化文件
2.可以利用 GZIP 压缩文件,前端生产环境中将js、css、图片等文件进行压缩的好处显而易见,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能
3.结合 HTTP 缓存文件
4.CSS文件引入要放在<head>头部,因为这是HTML渲染必备元素。为了避免阻塞加载,应把脚本放到文档的末尾,而CSS是需要放在头部的
5.减少文件数量,减少页面上引用的文件数量可以减少HTTP连接数
6.减少域名查询,DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
7.不要使用嵌套tables

2. 优化 CSSOM

1.减少关键 CSS 元素数量
2.当我们声明样式表时,请密切关注媒体查询的类型,它们极大地影响了 CRP 的性能

2. 优化 JavaScript

1.async: 当我们在 script 标记添加 async 属性以后,浏览器遇到这个 script 标记时会继续解析 DOM,同时脚本也不会被 CSSOM 阻止,即不会阻止 CRP
2.defer: 与 async 的区别在于,脚本需要等到文档解析后( DOMContentLoaded 事件前)执行,而 async 允许脚本在文档解析时位于后台运行(两者下载的过程不会阻塞 DOM,但执行会)
3.当我们的脚本不会修改 DOM 或 CSSOM 时,推荐使用 async
4.预加载 —— preload & prefetch
5.DNS 预解析 —— dns-prefetch

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值