JS性能优化详细

原创 2016年05月31日 09:22:35
(1)减少http请求次数 (2)减少DNS查询次数 (3)避免页面跳转 (4)缓存Ajax (5)延迟加载 (6)提前加载  (7)减少DOM元素数量  (8)根据域名划分内容
(9)减少iframe数量 (10)避免404 (11)服务器 (12)使用CDN (13)添加Expires 或Cache-Control报文头 (14)Gzip压缩传输文件 (15)配置ETags

(16)尽早flush输出 (17)使用GET Ajax请求 (18)避免空的图片src  (19)减少Cookie大小 (20)页面内容使用无cookie域名 (21)将样式表置顶

(22)避免CSS表达式  (23)用<link>代替@import  (24)避免使用Filters  (25)精简Javascript和CSS  (26)减少DOM访问  (27)优化CSS Sprite


详细解释:

(1)避免页面跳转
当客户端收到服务器的跳转回复时,客户端再次根据服务器回复中的location指定的地址再次发送请求,用户只能等待客户端再次发送请求,有的网站甚至会一直跳n次,跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容,只有浏览器的进度条一直在刷新。
(2)缓存Ajax
Ajax可以帮助我们异步的下载网页内容,但是有些网页内容即使是异步的,用户还是在等待它的返回结果,例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
(3)提前加载
与延迟加载目的相反,提前加载的是为了提前加载接下来网页中访问的资源,下面是提前加载的类型
无条件提前加载:当前网页加载完成后,马上去下载一些其他的内容。
(4)有条件加载:根据用户的输入推断需要加载的内容
(5)有预期的的加载:这种情况一般发生在网页重新设计时,由于用户经常访问旧网页,本地对旧的网页内容缓存充分从而显得旧网页速度很快,而新的网页内容却没有缓存,设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容,这样新的网页就会生下来一些需要下载的资源。
(6)减少DOM元素数量
网页中元素过多对网页的加载和脚本的执行都是沉重的负担,500个元素和5000个元素在加载速度上会有很大差别。
想知道你的网页中有多少元素,通过在浏览器中的一条简单命令就可以算出,
document.getElementsByTagName('*').length
(7)根据域名划分内容
浏览器一般对同一个域的下载连接数有所限制,按照域名划分下载内容可以浏览器增大并行下载连接,
一般网站规划会将静态资源放在类似于static.example.com,动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。后面我们会在cookie的规则中提到。   
(8)减少iframe数量
使用iframe要注意理解iframe的优缺点
优点:可以用来加载速度较慢的内容,例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载
缺点:即使iframe内容为空也消耗加载时间,会阻止页面加载,没有语义
(9)避免404
404我们都不陌生,代表服务器没有找到资源,我们要特别要注意404的情况不要在我们提供的网页资源上,客户端发送一个请求但是服务器却返回一个无用的结果,时间浪费掉了。
更糟糕的是我们网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。
(10)服务器使用CDN
再次强调第一条黄金定律,减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果你的网站上有大量的静态内容,世界各地的用户都在访问,那CDN是必不可少的。事实上大多数互联网中的巨头们都有自己的CDN。我们自己的网站可以先通过免费的CDN供应商来分发网页资源。

(11)尽量使用GET Ajax请求
浏览器在实现XMLHttpRequest POST的时候分成两步,先发header,然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据,而POST则是向服务器发送数据,所以我们使用Ajax请求数据的时候尽量通过GET来完成。

(12)避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。

(13)减少Cookie大小
Cookie被用来做认证或个性化设置,其信息被包含在http报文头中,对于cookie我们要注意以下几点,来提高请求的响应速度,
去除没有必要的cookie,如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别,没有必要情况下不要影响到sub-domain
设置合适的过期时间,比较长的过期时间可以提高响应速度。
大多数网站的静态资源都没必要cookie,我们可以采用不同的domain来单独存放这些静态文件,这样做不仅可以减少cookie大小从而提高响应速度,还有一个好处是有些proxy拒绝缓存带有cookie的内容,如果能将这些静态资源cookie去除,那就可以得到这些proxy的缓存支持。
(14)样式表置顶
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快,因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要,用户不用一直等待在一个白屏上,而是可以先看已经下载的内容。
(15)避免CSS表达式
CSS表达式可以动态的设置CSS属性,在IE5-IE8中支持,其他浏览器中表达式会被忽略
(16)用<link>代替@import
避免使用@import的原因很简单,因为它相当于将css放在网页内容底部。
(17)精简Javascript和CSS
精简就是将Javascript或CSS中的空格和注释全去掉,
(18)优化图
当美工完成了网站的图片设计后,我们可以在上传图片之前对其做以下优化
检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色,而在调色板的中显示的256色的颜色槽,那么这张图片就还有压缩的空间。
(19)优化CSS Sprite


前端网页与js性能优化

前端网页性能最佳实践 你愿意为打开一个网页等待多长时间?我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文...
  • he90227
  • he90227
  • 2015年10月19日 10:50
  • 2278

JS性能优化笔记

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改。   一、 让代码简洁:一些简略的表达方式也会产生很好...
  • huanghui8030
  • huanghui8030
  • 2013年08月21日 15:11
  • 9385

css优化,js优化以及web性能优化

Css优化总结       对于css的优化可以从网络性能和css语法优化两方面来考虑。 Css性能优化方法如下: 1、css压缩 Css 压缩虽然不是高端的知识,但是很有用。其原理也很简单,...
  • lululul123
  • lululul123
  • 2017年07月27日 00:09
  • 489

Cocos2d-JS 精灵的性能优化

1.使用纹理图集 纹理图集已称为精灵表,它是把许多小的精灵图片组合到一张大图里面,使用纹理图集(或精灵表)有如下主要优点: (1)减少文件读取次数,读取一张图片比读取一堆小文件要快 (2)减少渲...
  • AiCoding_D
  • AiCoding_D
  • 2016年04月12日 14:32
  • 1460

JS 性能优化工具 Facebook Prepack

PrepackPrepack 是 Facebook 最近开源的一个 JavaScript 代码优化工具,它跟 Babel、谷歌的 Closure Compiler 类似,运行在 “编译” 阶段,生成优...
  • j_bleach
  • j_bleach
  • 2017年05月13日 14:33
  • 347

ReactJS性能优化(上)

shouldComponentUpdate? 详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate?  React已经替我们实现了一个shouldCompo...
  • u012125579
  • u012125579
  • 2016年12月07日 23:10
  • 965

Js性能优化

1.使用局部变量来转接全局变量或深层属性,缩小对象访问层级 2.慎用with,因为with加深了内部的作用域链 3.eval无法提前被解析和优化,即无法被预编译,所以要慎用。 4.对字符串细化操作时要...
  • earthpacer
  • earthpacer
  • 2013年08月07日 14:22
  • 96

js性能优化之函数缓存

所谓函数缓存,就是将函数运算过的结果缓存起来,这种做法是典型的用内存去换取性能的手段,常用于缓存数据计算结果和缓存对象。下面我们来看看一个使用例子:缓存jQuery对象。我们先来看一段代码: fun...
  • wbr306408943
  • wbr306408943
  • 2016年06月13日 22:05
  • 182

JavaScript 性能优化参考

参考: JavaScript 性能优化的小知识总结 我总结的js性能优化的小知识 避免全局查找在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些...
  • yin__ren
  • yin__ren
  • 2017年12月29日 15:14
  • 40

JS性能优化技巧

JS性能优化技巧让垃圾收集器销毁不必要的变量解除变量的引用局部变量本身可能会在函数执行完毕之后就会由垃圾收集机制来释放内存,但是全局变量始终不会被垃圾收集机制释内存。但是在闭包的环境中,如果函数的变量...
  • YuChenLi923
  • YuChenLi923
  • 2017年05月01日 20:23
  • 184
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS性能优化详细
举报原因:
原因补充:

(最多只允许输入30个字)