最实用的前端性能优化方法

标签: 前端 性能优化
19人阅读 评论(0) 收藏 举报
分类:


1,减少http请求

    浏览器渲染页面过程中,每发现有href,src标签都会发送一次请求,所以我们要尽可能的合并css,js和图片文件,从而减少http请求次数。常用的解决方案如css sprites(css精灵图)。而合并js,css文件还有一个意想不到的好久,引用《高性能javascript》中的测试,下载一个100kb的单个js文件会比下载4个25kb的js文件要快,原因就是http请求会带来额外的性能开销。同时,设置缓存也是减少http请求的一大法宝,我们可以把网站中很少变化的图片资源通过HTTP 中的expires和cache-control设置缓存,缓存时间可以自己定义,这样用户再次打开网站时,浏览器就会从缓存中直接读取资源,从而减少发送http请求,关于缓存的方法原理,这里不多做介绍。

2,css文件放在头部,js文件放在页面的末端

    浏览器是按照自上而下的顺序加载页面的,因此,css文件放在头部可以更快的使页面展现在用户眼前,使用户感觉页面加载很快,反观js文件,浏览器加载完成js文件时会立即执行js代码,造成资源阻塞。因此把js文件放在底部,会使页面更快的呈现出来。

3,使用外链的js,css文件

    外链的文件才可以使用浏览器缓存,但有时为了减少http请求,可能会把样式直接写在页面中,具体需要可自己权衡利弊使用。

4,压缩,精简css和js文件

   

    以vuejs文件为例,压缩过的文件比未压缩的小了近200kb。同样css文件也是如此。除压缩文件外,我们还可以通话优化css样式代码的方式,减小css文件的代码量,此种优化虽然没有代码压缩带来的效果明显,但是却也是不可或缺的。我们可以使css样式代码的使用高度复用,从而减少多余的代码。

5,避免空的src和href属性

    当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽

6,能用get完成ajax请求的,请使用get请求

    当使用xmlHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时会比post稍快一些。(此方法适用场景有限,请自己权衡两种请求的利弊)

7,使用CDN

    网站静态资源如css,js,图片文件使用CDN分发

8,避免404,

    外链的css,js文件出现404时,会破坏浏览器的并行加载

 9,减小cookie体积,

    cookie包含在每次请求和响应中,因此cookie的大小会直接影响数据的传输速度,因此要尽量减少cookie的数据量。

10,提升css选择器性能

    选择器的执行效率由高到低依次为:id选择器>类选择器>标签选择器>相邻选择器(h1+p)>子选择器(ul>li)>后代选择器(ul li)>通配符选择器(*)>属性选择器(input[type="text"])>伪类选择器(a:hover),推荐看一篇关于如何提升css选择器性能的文章。

11,减少dom操作

    频繁的dom操作会大大影响页面的性能,这里推荐使用innerHTML代替document.createElement等一些原生dom操作,使用事件委托的方法,减少dom操作次数。

12,避免使用css表达式

    尽管css表达式现在已经近乎没人使用了,但是在此还是提醒一下各位,css表达式虽然非常的强大,但是正是因为他的强大,所以带来的就是对性能的严重消耗。

13,减少重排和重绘

    什么时候会导致浏览器重绘,比如改变一个div的背景色,改变文字的颜色,那么什么时候会导致浏览器重排呢,比如改变div的大小。重排会导致浏览器重新对页面布局进行计算排布,因此带来的性能消耗是非常大的,所以,我们要在开发中尽可能少的减小重排和重绘的次数。比如使用多次使用div.style方法修改元素样式时,推荐把需要修改的样式通过css写出来,然后修改元素的className进行样式修改操作。在此也推荐一篇关于哪些操作会引起浏览器的重排和重绘的文章。

14,推荐使用link标签代替@import

    @import引入的样式会在页面加载完成后才加载,而link在页面加载时会被同时加载,兼容方面@import试css2.1的语法,link没有兼容性问题。

在此也推荐一篇关于link和@import的区别的文章。



查看评论

前端性能优化方法总结

前端性能优化(一) 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,...
  • w2326ice
  • w2326ice
  • 2017-03-20 10:25:37
  • 5137

进行前端性能优化几种常用的方法。

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。 缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等...
  • hyMiss
  • hyMiss
  • 2017-09-22 17:06:47
  • 246

前端性能优化归纳总结篇!!!

周五,一周最后一天,应该是归纳总结、冥想思考、节奏放缓的一天。程序员的每个工作日都仿佛是在进行着战斗,看不见的硝烟弥漫在键盘和显示器之间,也有可能弥漫在手机和手指之间。作为一个前端开发工程师,性能优化...
  • grandPang
  • grandPang
  • 2016-05-11 17:56:31
  • 11269

前端性能优化方法--个人总结

1.样式表放在顶部,脚本放在底部。 2.用变量保存DOM,避免重复获取同一个DOM。 3.合并css和js文件,并压缩。减少http请求。 4.图片做出雪碧图。 5.使用cdn内容发布网络。(...
  • shelly1072
  • shelly1072
  • 2017-03-08 00:19:10
  • 162

前端常见的性能优化手段

在前端,HTML创造结构,CSS表现样式,JS控制行为,三者一起形成了用户可见可操作的web页面。但是不同网站页面的加载速度、用户请求的执行速度却大相径庭。页面初始加载的HTML资源、CSS资源、JS...
  • aa3214567
  • aa3214567
  • 2017-09-01 12:13:42
  • 383

前端面试指南性能优化篇

什么是渐进增强?渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能,同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如...
  • ansenamerson
  • ansenamerson
  • 2017-08-04 00:03:19
  • 344

前端性能优化十四个规则:

HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD...
  • lysunnyrain
  • lysunnyrain
  • 2016-04-05 21:47:28
  • 7045

浅谈前端性能优化(三)——将CSS文件放在顶部

CSS文件放置在head中和放在body底部,对CSS本身的下载时间不会有影响,但对页面的呈现有非常大的影响,与用户体验密切相关。   CSS文件放在顶部的原理: 浏览器为了避免样式变化导致页面重绘o...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-05-07 14:54:35
  • 468

前端的性能优化都有哪些东西?

前端性能优化是个巨大的课题,如果要面面俱到的说的话,估计三天三夜说不完。所以我们就从实际的工程应用角度出发,聊我们最常遇见的前端优化问题。 Yslow是雅虎开发的基于网页性能分析浏览器插件,可以...
  • gongchengketang
  • gongchengketang
  • 2016-04-21 13:40:19
  • 618

前端性能优化清单

原文地址:https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/ 前端性...
  • baidu_24932821
  • baidu_24932821
  • 2018-01-26 18:36:04
  • 191
    个人资料
    持之以恒
    等级:
    访问量: 1688
    积分: 96
    排名: 142万+
    文章分类
    文章存档