前端性能优化有很多种,我们在实际工作中或许也就用到那么几种。但是,在面试的时候,知道的不知道的,要说很多种,下面是我在工作学习中遇到的,不全,希望大家补充。
1、减少HTTP请求。
尽量合并图片、CSS、JS。比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。
2、把CSS放到顶部
因为网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。
3、把JS放到底部
js加载时同步加载,会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。
4、将CSS和JS放到外部文件中
目的是缓存文件。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
5、精简CSS和JS
这里就涉及到css和js的压缩了。比如一个css文件,把文件内的空格回车全部去掉,减少文件的大小。grunt,glup都可以压缩css、js文件。
gulp的使用方法在我的专栏-gulp学习笔记,图文并茂,有需要的可以移步。
6、删除重复的JS和CSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
7、css选择符优化
因为css是从右向左解析的,根据这个规则,尽量使右边的样式唯一
8、避免空的src和href
当link标签的href属性和script标签的src属性为空时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
9、将CSS和JS放到外部文件中
这样做的目的是缓存文件 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
10、缩小favicon.ico并缓存
11、避免使用CSS表达式
举个css表达式的例子
font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");
这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。
12、缓存AJAX请求
异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存
异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){},
error : function(){}
})
13、使用GET来完成AJAX请求
在安全性能要求允许的情况下,使用GET来完成AJAX请求。当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
15、减少DOM操作
因为每次操作DOM,都会带来repaint和refolw
16、减少Cookie的大小
Cookie里面别塞那么多东西,因为每个请求都得带着他跑。
17、使用CDN
网站上静态资源即css、js全都使用cdn分发,图片也一样。