1.常见性能优化方法有哪些?给出不少于5条实际可行的方案?
- 为什么要性能优化?如果只是一个js,css,html你根本没必要进行性能优化,但是现实告诉我们这个几乎不可能,随便一个网页就要加载多个css,js,img资源,这加载总是要耗时间把,所以性能优化就是必要,采取一些方法来使文件的加载速度更快,或是减少HTTP的请求来达到提高用户体验的终极目的。
- 方法1:减少HTTP请求
1.使用前端工具r.js,gulp,webpack 将css,js的代码合并
2.就网页的小icon图片压缩合并雪碧图,同时大图也要压缩
3.当页面的图片很多,使用懒加载 - 方法2:放好css和js文件的位置
1.css文件放在html的头部,因为CSS 下载、执行时可能阻塞渲染,但不阻塞其他CSS的下载,多个CSS文件会合并下载,让网页能显示在用户面前,不会出现白屏的现象
2.JS 文件放在html的尾部,因为JS 下载、执行时肯定阻塞渲染,会导致页面的其他部分无法加载,出现白屏的现象 - 方法3: 使用CDN(Content Delivery Network)内容分发网络进行静态加载
1.将一些不经常改动的静态资源放到CDN里面,这样当用户访问的时候就会去查找最近的CDN服务器去加载资源,可以提高访问速度。 - 方法4:使用浏览器的本地储存缓存
1.在响应头中添加Cache-control:max-age=60000(秒),这样你在60000秒内再次请求同一个资源,服务器不会发送,会告诉浏览器继续使用本地缓存的文件
2.使用expires,设置页面过期的时间,浏览器在规定的时间内使用本地缓存的文件 - 方法5:尽量减少DOM操作
1.使用变量将频繁的使用的DOM操作保存起来,这是因为DOM操作会导致页面的重绘和渲染,非常消耗性能
2.绑定事件的时候使用事件代理 - 方法6:避免出现重定向和404的错误
- 方法7:优化算法
1.在js的处理中优化查找,排序算法,尽量少使用嵌套循环 - 方法8:服务器开启Gzip压缩数据,可以大量减少数据的大小,提高加载速度
-方法9:减少DNS查找次数,节省响应时间 - 方法10:静态资源使用多个域名
对于图片、CSS、JS,可使用几个域名,可以并发加载。