共计 2544 个字符，预计需要花费 7 分钟才能阅读完成。
次要内容为上面几大类：挪动端、图片、JavaScript、css、html、页面内容、服务器、cookie。
挪动端性能优化：
- 放弃单个文件小于 25KB
挪动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。 - 打包内容为分段 multipart 文档
因为 HTTP 申请每一次都会执行三次握手，每次握手都会耗费较多的工夫。应用 multipart，实现了多文件同时上传，可用一个 HTTP 申请获取多个组件。
图片优化：
- CSS sprites
俗称 CSS 精灵、雪碧图，雪花图等。行将多张小图片合并成一张图片，达到缩小 HTTP 申请的一种解决方案。可通过 CSS 中的 background 属性拜访图片内容。这种计划同时还能够缩小图片总字节数，节俭命名词汇量。 - 压缩图片
图片占据资源极大，因而尽量避免应用多余的图片，应用时抉择最合适的格局大小，而后应用智图压缩，同时在代码中用 Srcset 来按需显示。（切记不要过分压缩 可能会导致图片迷糊） - 尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript 等中屡次重置图片大小，屡次重设图片大小会引发图片的多次重绘，影响性能。 - 图片尽量避免应用 DataURL
DataURL 图片没有应用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。 - 图片懒加载
图片对页面加载速度影响十分大。比方，当一个页面内容比拟多的时候，加载速度就会大大的升高，极大的影响到用户体验。更有甚者，一个页面可能会有几百个图片，然而页面上仅仅只显示前几张图片，那其余的图片是否能够晚点加载用于进步性能。具体可见 >>
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 倍)
- 解析 js 代码成形象语法树 -》字节码 -》机器码
造成 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 内存治理
正文完
发表至： javascript
2023-06-27
