从一个用户的角度来说，网站的性能就是用户在浏览器上访问网页的直观感受，加载网页的快慢，加载资源的快慢。通过对前端的性能优化，可以使浏览器尽快地显示内容，对用户更为友好。所以，为了给用户更好的体验，Web前端性能优化是非常有必要的。
CSS、JS代码优化
- 避免使用CSS表达式，虽然功能强大但是效率低下。
- 避免使用CSS3的
@import，性能非常低。可以在Sass中使用@import，预编译后会将引用的文件合并到一个文件中，不会影响性能。 - 使用前端构建工具（比如Grunt的
grunt-contrib-unglify）压缩精简CSS、JS代码（混淆），消除重复、无用代码，并且合并代码，尽量减少HTTP请求次数。
减少DNS查询
DNS查询会消耗一定时间。使用 DNS缓存 可有效减少DNS查询（只要对应的解析地址不要常变动就好）。
使用CDN
CDN的本质也是缓存，并且由于CDN部署在网络运营商的机房，而这些机房又为用户提供网络服务。所以CDN是将数据缓存在离用户最近的地方，让用户以最快的速度获取资源。一般地，CDN用来缓存静态资源，如图片、CSS、JS脚本、静态网页等等的访问频率较高而变化频率低的静态资源。
使用浏览器缓存
对不经常变化的资源，在HTTP头中添加Expire或Cache-Control，可以设定浏览器缓存。
减少HTTP请求
- 合并CSS、JS文件（用构建工具）
- 合并图片文件（利用CSS Sprites），将几个相关的图片合成一张图片，使用的时候通过CSS偏移定位出图片的精确位置即可（比如小按钮）。注意响应式页面下图片的位置。
必要的时候启用压缩
在服务端进行压缩，在浏览器端进行解压缩，可以减少传输的数据量。对HTML、CSS、JS文件启用gzip压缩可达到较好的效果，但是注意压缩会消耗一定的服务器资源，在PV量大而服务器资源不充裕时应谨慎使用。
CSS与JS在网页中的位置
浏览器在获取完所有的CSS资源后才对整个页面进行渲染，因此将CSS放在页面的最上面是最合适的。
而加载JS有可能会阻塞整个页面（可以添加async来达到异步加载的效果），因此JS最好放在页面的底部。当然如果页面解析需要用到JS（比如用AngularJS开发的SPA），那么就应该放在相应的位置，确保页面正常加载。