HTML——性能优化

69 阅读 0 评论 46 点赞

我是靠谱客的博主酷酷哈密瓜，最近开发中收集的这篇文章主要介绍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