前端性能优化有很多种，我们在实际工作中或许也就用到那么几种。但是，在面试的时候，知道的不知道的，要说很多种，下面是我在工作学习中遇到的，不全，希望大家补充。
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分发，图片也一样。
网友评论