首页 > web前端 > js教程 > 正文

前端性能优化的方法

原创 2019-04-26 09:14:38 0 400
赞助会员专享特权
前端性能优化方法有:减少http请求数;将脚本往后挪,减少对并发下载的影响;避免频繁的DOM操作;压缩图片;通过CSS选择符来使浏览器从右往左解析提高效率

前端里面包含的内容是丰富的,它包括HTML,CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的,接下来在文章中为大家介绍前端性能优化的方法,具有一定的参考作用,希望对大家有所帮助。

推荐课程:JavaScript教程

优化的目的

优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。

前端优化的方法有很多种,可以将其分为两大类,第一类是页面级别的优化如http请求数,内联脚本的位置优化等,第二类为代码级别的优化,例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

页面级别优化

http请求数

减少http请求数是最重要也是最有效的方法,可以通过以下方法来减少http请求

(1)合理的设置http缓存,恰当的缓存设置可以大大减少http请求。要尽可能的让资源能够在缓存中待得更久

(2)从设计实现层面简化页面,保持页面简洁、减少资源的使用时是最直接的。

(3)资源合并与压缩,尽可能的将外部的脚本、样式进行合并,多个合为一个。

(4) CSS Sprites,通过合并 CSS图片,这是减少请求数的一个好办法

内联脚本的位置

浏览器是并发请求的,而外链脚本在加载时却常常阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪,减少对并发下载的影响

代码级别的优化

DOM操作优化:

要避免在document上直接进行频繁的DOM操作,可以使用classname代替大量的内联样式修改,对于复杂的UI元素,设置position为absolute或fixed,尽量使用css动画,适当使用canvas尽量减少css表达式的使用,使用事件代理

图片优化

通过对图片的压缩来起到优化前端性能的作用

CSS选择符:

大多数人认为,浏览器对CSS的解析是从左往右的,事实上从右往左解析的效率更高,因为第一个id选择基本上就把查找的范围限定了。

总结:以上就是本篇文章的全部内容了,希望对大家有所帮助

以上就是前端性能优化的方法的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:前端性能优化
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 前端性能优化的方法?
  • web前端性能优化方法
  • Js前端性能优化总结
  • 前端性能优化的方法
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • HTTP详解教程 HTTP详解教程
  • CSS视频教程-玉女心经版 CSS视频教程-玉女心经版
  • JavaScript极速入门_玉女心经系列 JavaScript极速入门_玉女心经系列
  • 相关视频章节