前端性能优化分析

说道性能优化,相信你们都看过网页的源代码,和咱们日常写的可能有些不一样,在审查元素里面看到的代码都是通过压缩过的,这也是咱们前端优化的一种,在一些比较大的公司会使用到grunt来进行代码的压缩或者是合并,在一些小的公司就会使用一些别的方法,下面我就简单介绍一下比较常见的前端优化。css

   在这里咱们主要分为三个方向来介绍,首先咱们要介绍的就是网络方面的,这个主要分为DNS的解析,CDN的加速,和延迟加载以及预加载在这里的cdn主要是借助于一些大型公司的服务器,进行加载,这样会提高加载的效率。html

  第二个就是咱们浏览器端的优化,最主要的仍是咱们静态资源的缓存,主要分为html模板 css js还有就是images,另一个大类就是动态资源的缓存,这个主要是说的ajax,对于动态缓存ajax来讲会减小每次都发送ajax的带宽,主要便于提高咱们浏览的响应速度,用于提高用户的体验。还有一点就是本地数据库的缓存,这一点在咱们的html5的webstorage中用的比较多,最后在浏览器端的就是离线缓存。前端

   第四个是咱们最重要的就是咱们的代码层面上的,这个分别体如今html的布局上面,还有就是css的选择器问题,这里咱们都知道id选择器的效率是最高的,可是最好是在一个页面中不要滥用,接下来就是对图片处理的sprite技术,css代码的压缩与合并,在一些简单的动画尽可能使用咱们的css代码来代替咱们的js代码,由于在二者代码的执行上,css的性能确实是要高于js的,还有就是尽可能使用一些图标字体来代替图片的使用,此外还有一个较难理解的回流与重回,这个谈到的主要的css层面的,还有就是咱们js代码层面的,这里就主要包括对于dom节点的缓存,经过执行此项操做会减小咱们对于节点的访问次数,以此提高性能。别的就是和咱们的css相似的代码的压缩和合并。

  以上就是咱们前端性能优化的一部分,还有一些就是,咱们服务器端和后台方面的优化,在这里咱们暂且不谈。





html5

相关文章
相关标签/搜索