乐趣区

关于javascript:前端面试题之性能优化大杂烩

jiezi

次要内容为上面几大类：挪动端、图片、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 内存治理
退出移动版