次要内容为上面几大类：挪动端、图片、JavaScript、css、html、页面内容、服务器、cookie。

挪动端性能优化：

  1. 放弃单个文件小于25KB
    挪动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。
  2. 打包内容为分段multipart文档
    因为HTTP申请每一次都会执行三次握手，每次握手都会耗费较多的工夫。应用multipart，实现了多文件同时上传，可用一个HTTP申请获取多个组件。

图片优化：

  1. CSS sprites
    俗称 CSS 精灵、雪碧图，雪花图等。行将多张小图片合并成一张图片，达到缩小 HTTP 申请的一种解决方案。可通过 CSS中的background 属性拜访图片内容。这种计划同时还能够缩小图片总字节数，节俭命名词汇量。
  2. 压缩图片
    图片占据资源极大，因而尽量避免应用多余的图片，应用时抉择最合适的格局大小，而后应用智图压缩，同时在代码中用Srcset来按需显示。（切记不要过分压缩 可能会导致图片迷糊）
  3. 尽量避免重设图片大小
    重设图片大小是指在页面、CSS、JavaScript等中屡次重置图片大小，屡次重设图片大小会引发图片的多次重绘，影响性能。
  4. 图片尽量避免应用DataURL
    DataURL图片没有应用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。
  5. 图片懒加载
    图片对页面加载速度影响十分大。比方，当一个页面内容比拟多的时候，加载速度就会大大的升高，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，然而页面上仅仅只显示前几张图片，那其余的图片是否能够晚点加载用于进步性能。具体可见 >>

JavaScript相干优化

  1. 把脚本放在页面底部
    放在后面js加载会造成阻塞，影响前面dom的加载
  2. 应用内部JavaScript和CSS
    在事实环境中应用内部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的状况，因为 HTML 文档通常不会被配置为能够进行缓存的，所以每次申请 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在内部文件中，浏览器能够缓存它们，HTML 文档的大小会被缩小而不用减少 HTTP 申请数量。
  3. 压缩JavaScript和CSS
    压缩文件是为了升高网络传输量，缩小页面申请的响应工夫。
  4. 缩小DOM操作
    操作dom会产生几种动作，极大的影响渲染的效率。其中layout（布局）和paint（绘制）是最大的。

  5. js开销缩短解析工夫
    开销：加载-》解析和编译-》执行
    js的解析和编译，执行要花很长时间（谷歌开发工具中的performance中能够查看。选中main主线程中的某一段。）
    解决方案：

    • 代码拆分按需加载
    • tree shaking代码减重
    • 防止长工作
    • requestAnimationFrame和repuestIdleCallback进行工夫调度

  6. v8编译原理（代码优化）

    • 解析js代码成形象语法树-》字节码-》机器码
      编译过程会进行优化
      运行时可能会产生反优化
    • v8外部优化
      脚本流:边下载边解析
      字节码缓存:罕用的字节码会存起来(这个文件用到其余的文件也用到的参数)
      函数懒解析:先解析用到的
    • 对象优化(投合v8进行优化)
      保障对象初始化程序统一(对象初始化时v8会生成暗藏属性以便后续复用并且是依照程序排序的)
      不要间接赋值对象新属性(追加的属性须要通过形容数组间接查找)
      应用数组代替类数组(v8会对数组进行优化)比方先将类数组转化成数组
      防止读取数组越界(比方for循环多查找1个下标会照成性能相差6倍)
造成undefined和数字比拟
数组也是对象，当找不到对应下标的时候回沿着原型链向上找造成额定开销
业务上有效

  1. js内存，防止造成内存透露
    通过变量是否能被拜访到来判断内存是否开释。

    • 局部变量: 函数执行完没有闭包援用会被标记回收
    • 全局变量: 直到浏览器被卸载页面开释
    • 回收机制:

    援用计数:每调用一次加一,当计数为0的时候进行回收。毛病是不能解决循环援用(例如a对象依赖于b对象，标记革除(垃圾回收): 从根节点去拜访，当拜访到不能被拜访的对象就进行标记而后进行垃圾回收。(当a对象
    解决：防止意外的全局变量；防止重复运行引发的闭包；防止脱离的dom元素没有被回收(所以react有ref这个api)。

CSS 相干优化

  1. 把样式表放在<head>标签中
    css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因而性能会更好。
  2. 不要应用CSS样式表
  3. 应用<link>代替@import
  4. 不要应用filter

  5. 防止元素类型转化(数组中放多种类型不利于v8引擎优化代码)

    • 升高css对渲染的阻塞(按需加载，放在dom后面加载)
    • 利用pu实现动画(后面讲到的复合)
    • 应用contain进行优化(优化强度大。例如: contan:layout通知浏览器这个节点外部的子元素和里面的应用font-display进行优化:让文字更早的显示在页面上，加重文字闪动的问题

html 相干优化

  1. 缩小iframes应用
  2. 压缩空白符
  3. 防止嵌套档次太深
  4. 防止应用table布局
  5. 缩小没必要的正文
  6. 删除元素默认属性(比方默认checkbox等)

开发内容相干优化

  1. 缩小HTTP申请数
  2. 缩小DNS重定向
  3. 缓存AJax申请
  4. 提早加载
  5. 预加载
  6. 缩小DOM元素的数量
  7. 划分内容到不同域名
  8. 尽量减少应用iframe
  9. 防止404谬误

服务器相干优化

  1. 应用CDN
  2. 增加Expires或Cache-Control响应头
  3. 启用Gzip
  4. 配置Etag
  5. 尽早输入缓冲
  6. Ajax申请应用GET办法
  7. 防止图片src为空
  8. 传输加载优化
    服务器启用gzip
  9. keep Alive(长久TCP连贯)
    keepalive_requests 100;申请100次后开启http的keepAlive有keepalive_timeout 65;65秒后敞开。
  10. http缓存
    最好是用no-cache(要用的时候须要在服务器那边Etag验证下)

  11. service workers

    • 减速反复拜访
    • 离线反对

    Cookie相干优化

  12. 缩小cookie大小
  13. 动态资源应用无cookie域名

首屏加载优化

  1. 资源压缩、传输压缩、代码拆分、tree shaking、http缓存
  2. 路由懒加载、预渲染、inlineCss、虚构列表
  3. prefetch和preload调整加载程序js内存治理