Web开发笔记 - 前端总结 (性能篇)

从一个用户的角度来说,网站的性能就是用户在浏览器上访问网页的直观感受,加载网页的快慢,加载资源的快慢。通过对前端的性能优化,可以使浏览器尽快地显示内容,对用户更为友好。所以,为了给用户更好的体验,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头中添加ExpireCache-Control,可以设定浏览器缓存。

减少HTTP请求

  • 合并CSS、JS文件(用构建工具)
  • 合并图片文件(利用CSS Sprites),将几个相关的图片合成一张图片,使用的时候通过CSS偏移定位出图片的精确位置即可(比如小按钮)。注意响应式页面下图片的位置。

必要的时候启用压缩

在服务端进行压缩,在浏览器端进行解压缩,可以减少传输的数据量。对HTML、CSS、JS文件启用gzip压缩可达到较好的效果,但是注意压缩会消耗一定的服务器资源,在PV量大而服务器资源不充裕时应谨慎使用。

CSS与JS在网页中的位置

浏览器在获取完所有的CSS资源后才对整个页面进行渲染,因此将CSS放在页面的最上面是最合适的。

而加载JS有可能会阻塞整个页面(可以添加async来达到异步加载的效果),因此JS最好放在页面的底部。当然如果页面解析需要用到JS(比如用AngularJS开发的SPA),那么就应该放在相应的位置,确保页面正常加载。

文章目录
  1. 1. CSS、JS代码优化
  2. 2. 减少DNS查询
  3. 3. 使用CDN
  4. 4. 使用浏览器缓存
  5. 5. 减少HTTP请求
  6. 6. 必要的时候启用压缩
  7. 7. CSS与JS在网页中的位置