前端面试题之性能优化大杂烩
主要内容为下面几大类：移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。
移动端性能优化：
保持单个文件小于 25KB 移动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。
打包内容为分段 multipart 文档由于 HTTP 请求每一次都会执行三次握手，每次握手都会消耗较多的时间。使用 multipart，实现了多文件同时上传，可用一个 HTTP 请求获取多个组件。
图片优化：
CSS sprites 俗称 CSS 精灵、雪碧图，雪花图等。即将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可通过 CSS 中的 background 属性访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量。
压缩图片图片占据资源极大，因此尽量避免使用多余的图片，使用时选择最合适的格式大小，然后使用智图压缩，同时在代码中用 Srcset 来按需显示。（切记不要过分压缩 可能会导致图片迷糊）
尽量避免重设图片大小重设图片大小是指在页面、CSS、JavaScript 等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
图片尽量避免使用 DataURLDataURL 图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。
图片懒加载图片对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。具体可见 >>
JavaScript 相关优化
把脚本放在页面底部放在前面 js 加载会造成阻塞，影响后面 dom 的加载
使用外部 JavaScript 和 CSS 在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。
压缩 JavaScript 和 CSS 压缩文件是为了降低网络传输量，减少页面请求的响应时间。
减少 DOM 操作操作 dom 会产生几种动作，极大的影响渲染的效率。其中 layout（布局）和 paint（绘制）是最大的。
js 开销缩短解析时间开销：加载-》解析和编译-》执行 js 的解析和编译，执行要花很长时间（谷歌开发工具中的 performance 中可以查看。选中 main 主线程中的某一段。）解决方案：
代码拆分按需加载
tree shaking 代码减重
避免长任务
requestAnimationFrame 和 repuestIdleCallback 进行时间调度
v8 编译原理（代码优化）
解析 js 代码成抽象语法树-》字节码-》机器码编译过程会进行优化运行时可能会发生反优化
v8 内部优化脚本流:边下载边解析字节码缓存:常用的字节码会存起来(这个文件用到其他的文件也用到的参数)函数懒解析:先解析用到的
对象优化(迎合 v8 进行优化)保证对象初始化顺序一致(对象初始化时 v8 会生成隐藏属性以便后续复用并且是按照顺序排序的)不要直接赋值对象新属性(追加的属性需要通过描述数组间接查找)使用数组代替类数组(v8 会对数组进行优化)比如先将类数组转化成数组避免读取数组越界(比如 for 循环多查找 1 个下标会照成性能相差 6 倍)
造成 undefined 和数字比较数组也是对象，当找不到对应下标的时候回沿着原型链向上找造成额外开销业务上无效
js 内存，避免造成内存泄漏通过变量是否能被访问到来判断内存是否释放。
局部变量: 函数执行完没有闭包引用会被标记回收
全局变量: 直到浏览器被卸载页面释放
回收机制:引用计数:每调用一次加一,当计数为 0 的时候进行回收。缺点是不能解决循环引用(例如 a 对象依赖于 b 对象，标记清除(垃圾回收): 从根节点去访问，当访问到不能被访问的对象就进行标记然后进行垃圾回收。(当 a 对象解决：避免意外的全局变量；避免反复运行引发的闭包；避免脱离的 dom 元素没有被回收(所以 react 有 ref 这个 api)。
CSS 相关优化
把样式表放在<head>标签中 css 放在 head 标签中比 css 放在 body 标签尾部少了一次构建 RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好。
不要使用 CSS 样式表
使用<link>替代 @import
不要使用 filter
避免元素类型转化(数组中放多种类型不利于 v8 引擎优化代码)
降低 css 对渲染的阻塞(按需加载，放在 dom 前面加载)
利用 pu 完成动画(前面讲到的复合)
使用 contain 进行优化(优化强度大。例如: contan:layout 告诉浏览器这个节点内部的子元素和外面的使用 font-display 进行优化:让文字更早的显示在页面上，减轻文字闪动的问题
html 相关优化
减少 iframes 使用
压缩空白符
避免嵌套层次太深
避免使用 table 布局
减少没必要的注释
删除元素默认属性(比如默认 checkbox 等)
开发内容相关优化
减少 HTTP 请求数
减少 DNS 重定向
缓存 AJax 请求
延迟加载
预加载
减少 DOM 元素的数量
划分内容到不同域名
尽量减少使用 iframe
避免 404 错误
服务器相关优化
使用 CDN
添加 Expires 或 Cache-Control 响应头
启用 Gzip
配置 Etag
尽早输出缓冲
Ajax 请求使用 GET 方法
避免图片 src 为空
传输加载优化服务器启用 gzip
keep Alive(持久 TCP 连接)keepalive_requests 100;请求 100 次后开启 http 的 keepAlive 有 keepalive_timeout 65;65 秒后关闭。
http 缓存最好是用 no-cache(要用的时候需要在服务器那边 Etag 验证下)
service workers
加速重复访问
离线支持
Cookie 相关优化
减少 cookie 大小
静态资源使用无 cookie 域名
首屏加载优化
资源压缩、传输压缩、代码拆分、tree shaking、http 缓存
路由懒加载、预渲染、inlineCss、虚拟列表
prefetch 和 preload 调整加载顺序 js 内存管理
版权声明: 本文为 InfoQ 作者【肥晨】的原创文章。
原文链接:【http://xie.infoq.cn/article/41652b9012576bf8c758d3041】。文章转载请联系作者。
还未添加个人签名 2021-04-15 加入
平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域：前端 公众号：农民工前端
评论