伟波前端

# 前端性能优化

# 页面渲染（js单线程，原因避免dom渲染冲突）

  1. DOCTYPE作用
    • HTML5 <！DOCTYPE html>
    • HTML4.01 Strict(严格模式)，不包含弃用的元素(font标签)
    • HTML4.01Transitional（传统模式）包含弃用的元素(font标签)
  2. 浏览器渲染过程
  3. 重绘重排

# dom操作

  1. 缓存daom
  2. 暂存dom
  3. 事件节流
  4. 尽早操作 load DOMContentLoaded

# 页面性能

  1. 资源合并压缩

  2. 非核心代码异步加载

    1. 动态脚本加载
    2. defer,在html解析完成后才会执行，如果是多个安装顺序依次执行
    3. async，加载完成后立即执行，如果是多个，执行顺序与加载顺序无关

  3. 利用浏览器缓存

    1. 强缓存

      • expires Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。
      • Cache-Control Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。简单介绍下Cache-Control的属性设置。
      • max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires

    2. 协商缓存

      在这个阶段，服务器一般会将Cache-control、expires 、last-modified、date、etag (hash值)等字段在response header 中返回，便于下次缓存。当然具体的场景，也是看服务器的约定规则设定。

  4. 使用CDN

  5. cdn预解析

<meta http-equiv="x-dns-prefetch-control" content="on" />   //页面中的a标签一般会自动预解析，若是https协议，默认关闭dns预解析，这里强制预解析
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
1
2

# 错误监控

js中共有6种错误类型

  1. SyntaxError 语法错误

  2. ReferenceError 引用错误

  3. TypeError 类型错误

  4. RangeError 范围错误 参数超范围

  5. EvalError

  6. URIError

  7. 错误分类

    • 及时运行错误：代码错误

      try...catch window.onerror

    • 资源加载错误（不会冒泡）

      1. object.onerror
      2. performance.getEntries() (获得页面所有加载的资源，根据已经加载的资源间接判断加载失败的资源)
      3. Error事件捕获
      <script type="text/javascript">
    window.addEventListener('error', function (e) {
        console.log('捕获', e);
    }, true);//这里一定是true表示要捕获
</script>
      1
      2
      3
      4
      5

    • 跨域的js能捕获到错误

      • 错误信息：script:error
      • 出错行号和出错列拿不到为0
      • 解决：
        1. 第一步，在客户端script增加crossorign属性
        2. 第二步，在服务端设置js响应头Access-Control-Allow-Orign:*(或者指定域名)

  8. 上报错误

    1. 利用ajax通信进行上报

    2. 利用image对象上报（大多数都用这个,简单，不用借助其他的库，一行代码解决所有）

      eg:(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';

# performance.timing：利用performance.timing进行性能分析

window.onload = function(){
    setTimeout(function(){
        let t = performance.timing
        console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
        console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
        console.log('request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0))
        console.log('解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0))
        console.log('白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0))
        console.log('domready时间 ：' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
        console.log('onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0))

        if(t = performance.memory){
            console.log('js内存使用占比 ：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 摘自

# 今日图 性能的重要性

ewewwe.gif