今天小编跟大家讲解下有关网站性能优化实战 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关网站性能优化实战 的相关资料，希望小伙伴们看了有所帮助。
一.网络传输性能优化读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理html元素→加载完成。
1.资源打包压缩
目的：减少请求数、减小请求资源体积、提升网络传输速率
工具：webpack（js压缩，html压缩，css提取压缩，依赖关系分析等）
3.图片资源优化
1）使用精灵图(雪碧图css sprite)，就是很多张图标合并到一起，通过背景位置来控制
这里给大家推荐一个自动化生成雪碧图的工具：https://www.toptal.com/developers/css/sprite-generator
2）使用字体图标
二.页面渲染性能优化1.减少重排还是重绘
1）css属性读写分离：浏览器每次对元素样式进行读操作时，都必须进行一次重新渲染（重排 + 重绘），所以我们在使用js对元素样式进行读写操作时，最好将两者分离开，先读后写，避免出现两者交叉使用的情况。最最最客观的解决方案，就是不用js去操作元素样式，这也是我最推荐的。
2）通过切换class或者style.csstext属性去批量操作元素样式
3）DOM元素离线更新：当对DOM进行相关操作时，例如innerhtml、appendChild等都可以使用document Fragment对象进行离线操作，待元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作。
4）将没用的元素设为不可见：visibility: hidden，这样可以减小重绘的压力，必要的时候再将元素显示。
5）压缩DOM的深度，一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素或者box-shadow取代。
6）图片在渲染前指定大小：因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。
7）对页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU分担CPU压力。
来源：爱蒂网
