前端项目的性能优化是一个综合性的问题,需要从多个方面入手,以下是几大类的优化方案：移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。

　　由于HTTP请求每一次都会执行三次握手，每次握手都会消耗较多的时间。使用multipart，实现了多文件同时上传，可用一个HTTP请求获取多个组件。

　　俗称 CSS 精灵、雪碧图，雪花图等。即将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量。

　　图片占据资源极大，因此尽量避免使用多余的图片，使用时选择最合适的格式大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。（切记不要过分压缩 可能会导致图片迷糊）

　　重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

　　图片对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。具体可见

　　在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。

　　操作dom会产生几种动作，极大的影响渲染的效率。其中layout（布局）和paint（绘制）是最大的。

　　js的解析和编译，执行要花很长时间（谷歌开发工具中的performance中可以查看。选中main主线程中的某一段。）

　　引用计数:每调用一次加一,当计数为0的时候进行回收。缺点是不能解决循环引用(例如a对象依赖于b对象，标记清除(垃圾回收): 从根节点去访问，当访问到不能被访问的对象就进行标记然后进行垃圾回收。(当a对象

　　解决：避免意外的全局变量；避免反复运行引发的闭包；避免脱离的dom元素没有被回收(所以react有ref这个api)。

　　css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好。

　　使用contain进行优化(优化强度大。例如: contan:layout告诉浏览器这个节点内部的子元素和外面的使用font-display进行优化:让文字更早的显示在页面上，减轻文字闪动的问题

　　到此这篇关于前端常用的性能实用优化方法有哪些?的文章就介绍到这了,更多相关前端性能优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！