初中级面试题（性能优化）

糖鱼Donyo
170 阅读4分钟

HTML优化

  1. 避免 HTML 中书写 CSS 代码，因为这样难以维护。
  2. 使用 Viewport 加速页面的渲染。
  3. 使用语义化标签，减少 CSS 代码，增加可读性和 SEO。
  4. 减少标签的使用，DOM 解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。
  5. 避免 src、href 等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。
  6. 减少 DNS 查询的次数。

CSS优化

  1. 优化选择器路径：使用 .c {} 而不是 .a .b .c {}。
  2. 选择器合并：共同的属性内容提起出来，压缩空间和资源开销。
  3. 精准样式：使用 padding-left: 10px 而不是 padding: 0 0 0 10px。
  4. 雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。
  5. 避免通配符：.a .b * {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 * {}
  6. 会遍历整个 DOM，性能大大损耗。
  7. 少用 float：float 在渲染时计算量比较大，可以使用 flex 布局。
  8. 为 0 值去单位：增加兼容性。
  9. 压缩文件大小，减少资源下载负担。

JavaScript优化

  1. 尽可能把
  2. 尽可能合并 JS 代码：提取公共方法，进行面向对象设计等……
  3. CSS 能做的事情，尽量不用 JS 来做，毕竟 JS 的解析执行比较粗暴，而 CSS 效率更高。
  4. 尽可能逐条操作 DOM，并预定好 CSS样式，从而减少 reflow 或者 repaint 的次数。
  5. 尽可能少地创建 DOM，而是在 HTML 和 CSS 中使用 display: none 来隐藏，按需显示。
  6. 压缩文件大小，减少资源下载负担。

三个方面来说明前端性能优化

  1. webapck优化与开启gzip压缩

    (1)、babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件 其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'

    (2)、文件采用按需加载等等

    (3)、具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：accept-encoding:gzip

    (4)、图片优化，采用svg图片或者字体图标，小图片base64编码

    (5)、浏览器缓存机制，它又分为强缓存和协商缓存

    (6)、bundle加hash

    (7)使用scope hosting：代码体积更小，创建函数作用域更小，代码可读性更好。

  2. 本地存储——从 Cookie 到 Web Storage、IndexedDB

    说明一下SessionStorage和localStorage还有cookie的区别和优缺点

  3. 代码优化

    (1)、事件代理

    (2)、事件的节流和防抖

    (3)、页面的回流和重绘

    (4)、EventLoop事件循环机制

    (5)、代码优化等等

babel

babel前端开发环境必备工具，同webpack，需要了解基本的配置和使用

环境搭建和基本配置：babel-polyfill、babel-runtime

环境搭建：.babelrc配置【presets和plugins】

core-js，regenerator结合，如何按需引入babel-polyfill，babel7.4之后弃用babel-polyfill，推荐使用core-js和regenerator。

babel-polyfill按需引入：文件较大，只有一部分功能无需全部引入，配置按需引入。

babel-polyfill的问题？

  1. 会污染全局环境；
  2. 如果做一个独立的web系统则无碍
  3. 如果做一个第三方lib则有问题

babel-runtime不会污染全局环境

  1. 基本配置、高级配置
  2. 优化打包效率、优化产生代码
  3. 构建流程概述、babel

细分：

拆分配置和merge，启动本地服务，处理es6，处理样式，处理图片；多入口，抽离css文件，抽离公共代码，懒加载；处理jsx，处理vue；webpack优化构建速度，优化babel-loader、ignorePlugin、noparse、happypack、paralleIUglifyPlugin

babel编译原理

  • babylon 将 ES6/ES7 代码解析成 AST
  • babel-traverse 对 AST 进行遍历转译，得到新的 AST
  • 新 AST 通过 babel-generator 转换成 ES5

前端为何打包构建，好处？

  1. 体积更小（tree-shaking，压缩，合并），加载更快
  2. 编译高级语言或语法（ts，es6+，模块化，scss）
  3. 兼容性和错误检查（polyfill，postcss，eslint）

通过打包和构建可以统一高效的开发环境，统一的构建流程和产出标准，集成公司构建规范（提测，上线等）。

你在工作中遇到哪些问题，解决方法是什么

经常遇到的问题就是Cannot read property ‘prototype’ of undefined 解决办法通过浏览器报错提示代码定位问题，解决问题 Vue项目中遇到视图不更新，方法不执行，埋点不触发等问题 。一般解决方案查看浏览器报错，查看代码运行到那个阶段未之行结束，阅读源码以及相关文档等。 然后举出来最近开发的项目中遇到的算是两个比较大的问题。

avatar
文章
阅读
粉丝