前端性能优化，顾名思义就是对网页的性能进行优化，让用户觉得使用起来更加舒服更加流畅，调用到前端知识呢也就是加快页面的加载速度和页面的运行效率。

具体一点说的话，我们可以从这几个点来探讨一下：

一、web性能

1、减少http请求：1.允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。     2.精灵图（也叫CSS精灵， 是一种CSS图像合成技术，一般用于图标，将多张图片合并到一张图片，配合background-position来使用）     3.合并JS和CSS文件      4.减少http请求头     5.配置多个域名和CDN加速       6.把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。使用缓存（HTTP缓存、浏览器缓存、应用缓存），恰当的缓存设置可以大大的减少 HTTP请求，例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。     7.优化cookie

2、避免失败请求：有时候页面中的html或css会向服务器请求一个不存在的资源，比如图片或者html文件，这会造成浏览器与服务器之间过多的往返请求。

3、避免使用document.write：在js中，可以使用document.write，在网页上显示内容或者调用外部资源，而通过此方法，浏览器采取一些多余的步骤（下载资源，读取资源），运行js来了解需要做什么，调用其他资源时，需要重新在执行一次这个过程。由于浏览器之前不知道要显示什么，所以会降低页面加载的速度，而这些资源都是可以用html来调用的。

4、尽量减少重定向：有时候为了特定需求，需要在网页中使用重定向。重定向的意思是，用户的原始请求（如请求A）被重定向到其他的请求（如请求B），但这样会降低浏览器的性能

5、优化样式表和脚步顺序：Style标签和样式表调用代码应该放置在js代码的前面，这样可以使页面的加载速度加快

6、避免js阻塞渲染：浏览器在遇到一个引入外部js文件的<script>标签时，会停下所有工作下载并解析执行它，这会导致页面停止加载

7、多使用压缩。

二、html

1、尽量减少dom元素数量：页面中存在大量DOM元素,会导致js遍历DOM的效率变慢。

2、使用css+div代替table布局，去掉：strong，b，i等格式化控制标签，使用css控制。  因为table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)    table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)

3、减少不必要的嵌套，尽量扁平化

三、CSS

1、把关键的代码用内联样式写出来：将CSS直接内联到HTML文档中能使CSS更快速地下载

2、异步加载CSS：使用JavaScript动态创建样式表link元素，并插入到DOM中    

3、可以将文件压缩：能够压缩文件使文件加载更快

4、除去无用的css样式：虽然文件压缩能够降低文件大小。但CSS文件压缩通常只会去除无用的空格。而去除无用CSS会进一步减小CSS文件的大小

5、有选择地使用选择器：因为CSS选择器的匹配是从右向左进行的，所以尽可能的要保持代码的简单并且少使用通配符和属性选择器，以及不要用类选择器和id选择器修饰标签

6、减少哪些使用代价昂贵的属性，像box-shadow、border-radius、filter这些

7、减少重排以及避免不必要的重绘

8、不要使用@import引入CSS

四、JS

1、减少全局变量的查找：因为全局变量在作用域链的最顶端，频繁查找很耗性能。所以在一个函数中尽量将全局对象存储为局部变量来查找，因为访问局部变量的数要更快一些

2、尽量少使用with，因为它会创建自己的作用域

3、定时器：少使用一次性定时器setTimeout，多用周期性setInterval

4、优化循环

5、字符串拼接：连接多个字符的时候用+=，收集字符串的时候可以使用数组收集然后用join来连接

6、少操作dom元素例如增加、修改、删除 DOM或对 DOM集合进行操作。

五、用户体验角度

1、预加载和懒加载两种方法

2、在全选、反全选这些细节方面的加强

3、浏览器缓存以及应用的缓存