前端性能优化经常使用方法

时间 2019-11-18

标签前端性能优化经常使用方法栏目系统性能繁體版

原文原文链接

网页内容

1.1 减小http请求次数javascript

1.1.1 捆绑文件css

经过一些现成的库将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减小文件的下载次数。html

1.1.2 CSS Spriteshtml5

把多个图片拼成一副图片，而后经过CSS来控制须要显示图片的位置（ CSS Sprites Generator）java

1.1.3 Inline imagesweb

经过Base64编码的字符串将图片内嵌到网页文本中。（可是只适合用于小图标，大一点的图片就免了）ajax

1.2 减小DNS查询次数浏览器

DNS（Domain Name System，域名系统）缓存

1.3 避免页面跳转安全

1.4 缓存Ajax

1.5 延迟加载

这里讨论延迟加载须要咱们知道咱们的网页最初加载须要的最小内容集是什么。剩下的内容就能够推到延迟加载的集合中。

Javascript是典型的能够延迟加载内容。一个比较激进的作法是开发网页时先确保网页在没有Javascript的时候也能够基本工做，而后经过延迟加载脚原本完成一些高级的功能。

1.6 提早加载

与延迟加载目的相反，提早加载的是为了提早加载接下来网页中访问的资源，下面是提早加载的类型

无条件提早加载：当前网页加载完成后，立刻去下载一些其余的内容。例如google会在页面加载成功以后立刻去下载一个全部结果中会用到的image sprite。

1.7 减小DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差异。

想知道你的网页中有多少元素，经过在浏览器中的一条简单命令就能够算出，

document.getElementsByTagName('*').length

参考： https://www.cnblogs.com/chenxizhang/archive/2013/05/17/3083162.html

http://www.cnblogs.com/huyh/archive/2009/03/30/1422976.html

避免不正确地使用服务器控件。
减小没必要要的内容（并非全部内容都必须放在页面上面的）
```
若是数据量大，能够考虑分页，或者按需加载
```

1.8 根据域名划份内容

浏览器通常对同一个域的下载链接数有所限制，按照域名划分下载内容能够浏览器增大并行下载链接，可是注意控制域名使用在2-4个之间，否则dns查询也是个问题。

1.9 减小iframe数量

使用iframe要注意理解iframe的优缺点

优势

能够用来加载速度较慢的内容，例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本能够并行下载

缺点

即便iframe内容为空也消耗加载时间
会阻止页面加载
没有语义

1.10 避免404

404咱们都不陌生，表明服务器没有找到资源，咱们要特别要注意404的状况不要在咱们提供的网页资源上，客户端发送一个请求可是服务器却返回一个无用的结果，时间浪费掉了。

更糟糕的是咱们网页中须要加载一个外部脚本，结果返回一个404，不只阻塞了其余脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

服务器

2.1 使用CDN

再次强调第一条黄金定律，减小网页内容的下载时间。提升下载速度还能够经过CDN(内容分发网络)来提高。CDN经过部署在不一样地区的服务器来提升客户的下载速度。

2.2 添加Expires 或Cache-Control报文头

2.3 Gzip压缩传输文件

2.4 配置ETags

2.5 尽早flush输出

2.6 使用GET Ajax请求

浏览器在实现XMLHttpRequest POST的时候分红两步，先发header，而后发送数据。而GET却能够用一个TCP报文完成请求。另外GET从语义上来说是去服务器取数据，而POST则是向服务器发送数据，因此咱们使用Ajax请求数据的时候尽可能经过GET来完成。

2.7 避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，这样彻底是浪费时间，并且浪费服务器的资源。尤为是你的网站天天被不少人访问的时候，这种空请求形成的伤害不容忽略。

因此注意咱们的网页中是否存在这样的代码：

straight HTML
<img src="">

JavaScript
var img = new Image();
img.src = "";

Cookie

3.1 减小Cookie大小

3.2 页面内容使用无cookie域名

CSS

4.1 将样式表置顶

将样式表(css)放在网页的HEAD中会让网页显得加载速度更快，由于这样作可使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤为重要，用户不用一直等待在一个白屏上，而是能够先看已经下载的内容。

若是将样式表放在底部，浏览器会拒绝渲染已经下载的网页，由于大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来以前只好对不起观众了。

4.2 避免CSS表达式

CSS表达式能够动态的设置CSS属性，在IE5-IE8中支持，其余浏览器中表达式会被忽略。例以下面表达式在不一样时间设置不一样的背景颜色。

CSS表达式的问题在于它被从新计算的次数远比咱们想象的要多，不只在网页绘制或大小改变时计算，即便咱们滚动屏幕或者移动鼠标的时候也在计算，所以咱们仍是尽可能避免使用它来防止使用不当而形成的性能损耗。

若是想达到相似的效果咱们能够经过简单的脚本作到。

4.3 用<link>代替@import

避免使用@import的缘由很简单，由于它至关于将css放在网页内容底部。

4.4 避免使用Filters

AlphaImageLoad也是IE5.5 - IE8中支持，这种滤镜的使用会致使图片在下载的时候阻塞网页绘制，另外使用这种滤镜会致使内存使用量的问题。IE9中已经再也不支持。

Javascript

5.1 将脚本置底

所以对于脚本提速，咱们能够考虑如下方式，

把脚本置底，这样可让网页渲染所须要的内容尽快加载显示给用户。
如今主流浏览器都支持 defer关键字，能够指定脚本在文档加载后执行。
HTML5中新加了 async关键字，可让脚本异步执行。

5.2 使用外部Javascirpt和CSS文件

使用外部Javascript和CSS文件可使这些文件被浏览器缓存，从而在不一样的请求内容之间重用。

同时将Javascript和CSS从inline变为external也减少了网页内容的大小。

使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，若是用户在浏览咱们的页面时会访问屡次相同页面或者能够重用脚本的不一样页面，那么外部文件形式能够为你带来很大的好处。但对于用户一般只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来讲能够提供更高的效率。

5.3 精简Javascript和CSS

精简就是将Javascript或CSS中的空格和注释全去掉，精简的工具不少，主要能够参考以下，

JS compressors:

Packer
JSMin
Closure compiler
YUICompressor (also does CSS)
AjaxMin (also does CSS)

CSS compressors:

CSSTidy
Minify
YUICompressor (also does JS)
AjaxMin (also does JS)
CSSCompressor

与VS集成比较好的工具以下.

YUICompressor - 编译集成，包含在 NuGet.
AjaxMin - 编译集成

5.4 去除重复脚本

5.5 减小DOM访问

经过Javascript访问DOM元素没有咱们想象中快，元素多的网页尤为慢，对于Javascript对DOM的访问咱们要注意

缓存已经访问过的元素
Offline更新节点而后再加回DOM Tree
避免经过Javascript修复layout

5.6 使用智能事件处理

这里说智能的事件处理须要开发者对事件处理有更深刻的了解，经过不一样的方式尽可能少去触发事件，若是必要就尽早的去处理事件。

好比一个div中10个按钮都须要事件句柄，那么咱们能够将事件放在div上，在事件冒泡过程当中捕获该事件而后判断事件来源。

图片

6.1 优化图像

6.2 优化CSS Sprite

6.3 不要在HTML中缩放图片

不要经过图片缩放来适应页面，若是你须要小图片，就直接使用小图片吧。

6.4 使用小且可缓存的favicon.ico

网站图标文件favicon.ico，无论你服务器有仍是没有，浏览器都会去尝试请求这个图标。因此咱们要确保这个图标

存在
文件尽可能小，最好小于1k
设置一个长的过时时间

移动客户端

7.1 保持单个内容小于25KB

这限制是由于iphone，他只能缓存小于25K，注意 这是解压后的大小 。因此单纯gzip不必定够用，精简文件工具要用上了。

7.2 打包组建成符合文档

把页面内容打包成复合文本就如同带有多附件的Email，它可以使你在一个HTTP请求中取得多个组建。当你使用这条规则时，首先要肯定用户代理是否支持（iPhone不支持）。

参考:

http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html