前端性能优化的具体方法有哪些？

Question

如题所述

Answer 1

方法有很多种，以下请参考：1.尽量减少对服务端的数据请求，因为每一次的请求需要消耗大量的资源，而且产生页面的等待，对用户的UI体验特别差，因此，可以将多次的数据请求合成为一次，获取后再次分割进行保存，然后再使用。2.对JS、CSS、图片文件的体积进行相应的压缩，因为每次页面的加载都需要考虑到整体页面的大小，如果页面包含的文件体积太大，也不利于主页面加载的速度，用户在UI体验上也会大打折扣。3.使用页面缓存，当展示一些不经常变动的数据时，可以直接使用页面的本地缓存对象，这样的话减少页面对服务端的依赖度，而且有利于页面加载的速度，极大优化了用户的UI体验。4.在进行js文件调用时，尽量将该文件放置在元素的结尾处，这样的话即使导入的js文件体积很大，也不会阻塞主线程页面的加载。更多这方面的内容，有同学说看过传智播客相关的在线视频，都说讲的很不错。

Answer 2

解决办法一：

减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
当需要设置的样式很多时设置className而不是直接操作style。
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
解决办法二：

减少HTTP请求次数
使用CDN：CDN在前端开发的作用
避免空的src和href
为文件头指定Expires
使用gzip压缩内容
把CSS放到顶部
把JS放到底部
避 免使用CSS表达式
将CSS和JS放到外部文件中
避免跳转
可缓存的AJAX
使用GET来完成AJAX请求本回答被网友采纳