前端性能优化（基本）

HTML

避免使用内联式、嵌入式代码

在html页面中引入css、js代码有三种方式：“内联式”、“嵌入式”、“引入外部文件”。

尽管前两种方法可以减少HTTP的请求，可是实际上增加了HTML文件的体积大小。如果css、js代码足够下，确实可以尝试使用这两种方法，毕竟，开启一个HTTP请求确实要花费不少时间。

说到这里，那么就要视实际情况来决定，我们需要考虑受众和目标，如果是一次性的访问，比如一次临时活动页面，我们完全可以使用这两种方式，来减少HTTP的请求。

第三种“引用外部文件”，可以使代码有序，而且浏览器还能做相应的缓存，特别是有一些体积大的css、js文件或多页面情况下，该方法更合适。目前一般网站都是采用的该方法。
样式在上，脚本在下

将css放在head里面，浏览器在渲染页面时就能早知道每个标签的样式，用户就可以感觉这个页面加载更快。

对于js来说，它的加载会阻塞页面的渲染，所以将它放在页面的结尾。
页面的结尾表示</body>上方，如果在</body>外其实也并不影响页面渲染，但是书写不怎么标准。
尝试async
```
<script src="example.js"></script>
```
使用上面这种方式时，页面会在这个脚本文件被完全下载、解析、执行完后才去渲染之后的HTML，在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的，而大多数时候则不想要。
```
<script async src="example.js"></script>
```
使用上面这种方式时，脚本的加载是异步的，不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是，如果有多个使用这种方式异步加载的脚本，他们是没有特定的执行顺序的。

CSS

压缩你的样式文件

为了保持代码的可读性，最好的方法是在代码中添加注释和使用缩进：

.center {
  width: 960px;
  margin: 0 auto;
}

/* --- Structure --- */

.intro {
  margin: 100px;
  position: relative;
}

但是浏览器并不会在意这些，所以我们可以将它压缩，减少体积。

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

这样做能够减小文件的大小，从而得到更快的下载、解析和执行。
对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。

合并css文件

对于样式的组织和维护，另一个好方法是将他们模块化。

<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

然而，这样每个文件就是一个HTTP请求（我们都知道，浏览器的并行下载数是有限的）。

所以，合并你的CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

使用<link> 避免使用@import

两种方式可以引入一个外部的样式表：通过 <link> 标签：

<link rel="stylesheet" href="style.css">

或者通过 @import 指令 (使用在一个外部样式表中或者页面内嵌的 <style> 标签中):

@import url('style.css');

当你在一个外部样式表中使用第二种方式时，浏览器无法通过并行下载的方式下载这个资源，这样就会导致其他资源的下载被阻塞。

JS

异步加载第三方内容

嵌入一个Youtube视频或者一个like/tweet按钮时候，会出现这样的问题：
不管是用户端的还是服务器端的连接，都无法保证这些代码是正常有效的工作的。这些服务有可能临时dowan掉或者是被用户或者其公司的防火墙阻止。

为了避免这些在页面加载时成为问题，或者更严重的是，阻塞了全部页面的加载，总是应该异步加载这些代码

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

封装一层：

(function() {
    
    var script,
        scripts = document.getElementsByTagName('script')[0];
        
    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }
    
    load('//apis.google.com/js/plusone.js'); // 加载使用
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');
    
}());

缓存数组长度

const arr = Arrary(1000);
for (let i=0; i<arr.length; i++) {  // 每次都会读取一遍长度
  // do some thing
}

改为：

const arr = Arrary(1000);
cosnt len = arr.length; // 读取一遍长度
for (let i=0; i<len ; i++) { 
  // do some thing
}

避免使用document.write

这个（坏）方法已经被开发者抛弃了很多年, 但是在某些情况下仍然是需要的，例如在一些Javascript文件的同步回退中。
举例来说，如果发现Google的CDN没有响应，HTML5 Boilerplate则会通过这个方法来调用本地的jQuery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

注意: 如果在window.onload事件中或之后执行document.write方法，会将当前页面替换掉。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <footer>1234</footer>
  <script>
    setTimeout(() => {
      document.write('<span>aaa</span>');  // 最后会变为 aaa，  （整个页面）
    }, 3000);
    // window.onload = function() {
    //   document.write('<span>aaa</span>') // 最后会变为 aaa，  （整个页面）
    // }
  </script>
</body>
</html>

最小化重绘和回流

当有任何属性或元素发生改变时，都会引起DOM元素的重绘和回流。

当一个元素的布局不变，外观发生改变时，就会引起重绘。Nicole Sullivan描述这个就像是样式的改变，例如改变background-color、color等等

回流的代价是最高的，当改变一个页面的布局时就会发生回流，例如改变一个元素的宽。

毫无疑问，应当避免过多的重绘和回流，所以，对于下面的代码：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}

应当变为：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth, // 提前获取
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}

当你设置style.width时，浏览器需要重新计算布局。通常，浏览器暂时是不需要知道改变了元素的样式的，直到它需要更新页面时，正因为如此，改变多个元素的样式只会产生一次回流。然而，在第一个例子中，我们每次请求offsetWidth时，都会使浏览器重新计算布局。

如果需要得到页面中的布局数据，那么请参照第二个例子，将这些操作放在任何会改变布局的设置前。

避免不必要的dom操作

说真的，浏览器遍历DOM元素的代价是昂贵的。虽然Javascript引擎变得越来越强大，越来越快速，但是还是应该最大化的优化查询DOM树的操作。

最简单的替代方案就是，当一个元素会出现多次时，将它保存在一个变量中，这样的话你就没必要每次都去查询DOM树了。

// really bad!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

// good
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;

// or

var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myListHTML += "<span>" + i + "</span>";
}

压缩js脚本文件，合并js文件。
不要在 <img> 标签中调整图像

总是在img标签中设置width和height属性。这样可以防止渲染过程中的重绘和回流。

![](logo.jpg)

知道这个之后，一个开发者将一个700x700px的图像设置为50x50px来显示。

但是这个开发者不知道的是，大量的没有用的数据也发送到了客户端。

所以请记住：你可以在标签中定义一个图片的寬高，但不意味着你应该通过这么做来(等比)缩放大图。事先准备好需要标准的图片大小。

原文链接 How to lose weight int the broswer

前端性能优化（基本）

HTML

避免使用 内联式、嵌入式 代码

样式在上，脚本在下

尝试async

CSS

压缩你的样式文件

合并css文件

使用<link> 避免使用@import

JS

异步加载第三方内容

缓存数组长度

避免使用document.write

最小化重绘和回流

避免不必要的dom操作

压缩js脚本文件，合并js文件。

不要在 <img> 标签中调整图像

推荐阅读更多精彩内容

避免使用内联式、嵌入式代码