前端性能优化(基本)

字数 1854阅读 118

HTML

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

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

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

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

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

  2. 样式在上,脚本在下

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

    对于js来说,它的加载会阻塞页面的渲染,所以将它放在页面的结尾。
    页面的结尾表示</body>上方,如果在</body>外其实也并不影响页面渲染,但是书写不怎么标准。

  3. 尝试async
    <script src="example.js"></script>
    

    使用上面这种方式时,页面会在这个脚本文件被完全下载、解析、执行完才去渲染之后的HTML,在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的,而大多数时候则不想要。

    <script async src="example.js"></script>
    

    使用上面这种方式时,脚本的加载是异步的,不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是,如果有多个使用这种方式异步加载的脚本,他们是没有特定的执行顺序的。

CSS

  1. 压缩你的样式文件

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

.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代码。

  1. 合并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文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

  1. 使用<link> 避免使用@import

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

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

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

@import url('style.css');

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

JS

  1. 异步加载第三方内容

嵌入一个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');
    
}());
  1. 缓存数组长度
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
}
  1. 避免使用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>
  1. 最小化重绘和回流

当有任何属性或元素发生改变时,都会引起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时,都会使浏览器重新计算布局。

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

  1. 避免不必要的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>";
}

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

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

![](logo.jpg)

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

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

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

原文链接 How to lose weight int the broswer

推荐阅读更多精彩内容