javascript_basics
/
19.性能优化.html

<!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>性能优化</title>
</head>
<body>
  <script>
      /*
        性能优化

        原则
          多使用内存、缓存或者其他方法
          减少CPU计算、减少网络请求

        从哪里入手
          加载页面和静态资源
          页面渲染

        加载资源优化
          静态资源的压缩合并
          静态资源缓存
          使用CDN让资源加载更快
          使用SSR后端渲染，数据直接输出到HTML中


        渲染优化
          CSS放前面、JS放后面
          懒加载(图片懒加载、下拉加载更多)
          减少DOM查询，对DOM查询做缓存
          减少DOM操作，对多个操作尽量合并在一起执行
          事件节流
          今早执行操作(如DOMContentLoaded)


        资源合并
          script src=‘a.js’
          script src=‘b.js’
          script src=‘c.js’

          script src=‘abc.js’ 可使用构建工具合并


        缓存
          通过连接名称控制缓存
          script src=‘abc_1.js’
          只有内容改变的时候，连接名称才会改变
          script src='abc_2.js'

        CDN
          <link href="http://cdn.bootcss.com/bootstrap/4.0/bootstrap.css"/>
          <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js">

        使用SSR后端渲染
          现在Vue React 提出了这样的概念
          其实jsp php asp都属于后端渲染

        懒加载
          <img id="igm1" src="preview.png" data-realsrc='abc.png'>
          <script>
            var img1 = document.getElementById('img1')
            img1.src=img1.getAttribute('data-realsrc')
          <script>


        缓存DOM查询
          //未缓存DOM查询
          var i
          for (i=0;i<document.getElementsByTagName('p').length;i++){
            //todo
          }

          //缓存了DOM查询
          var plist = document.getElementsByTagName('p')
          var i
          for(i=0;i<plist.length;i++){
            //todo
          }

        合并DOM插入
          var listNode = document.getElementById('list')
          //要插入10个li标签
          var flag = document.createDocumentFragment();
          var x, li;
          for(x=0;x<10;x++){
            li = document.createElement('li');
            li.innerHTML = 'List item' + x;
            flag.appentChild(li)
          }
          listNode.appendChild(flag)


        事件节流
          var textarea = document.getElementById('text')
          var timeoutId
          textarea.addEventListener('keyup',function(){
            if(timeoutId){
              clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(function(){
              //触发change事件
            },100)
          })


        尽早操作
         window.addEventListener('load',function(){
            //页面的全部资源加载完才会执行，包括图片、视频
          })

          document.addEventListener('DOMContentLoaded',function(){
            //DOM 渲染完即可执行，此时图片、视频还可能没有加载完
          })

      */
  </script>

</body>
</html>