<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Reading Space]]></title>
  <link href="http://hongchaozhang.github.io/atom.xml" rel="self"/>
  <link href="http://hongchaozhang.github.io/"/>
  <updated>2025-06-11T14:37:53+08:00</updated>
  <id>http://hongchaozhang.github.io/</id>
  <author>
    <name><![CDATA[Zhang Hongchao]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Web性能指标]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/06/10/kpi-for-web-performance/"/>
    <updated>2025-06-10T17:51:04+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/06/10/kpi-for-web-performance</id>
    <content type="html"><![CDATA[<!-- more -->


<p>下面是Google Web Vitals的指标，以及如何测量。</p>

<ul>
<li><a href="https://web.dev/articles/vitals">Web Vitals</a></li>
<li><a href="https://web.dev/articles/lcp#measure">Largest Contentful Paint (LCP)</a></li>
<li><a href="https://web.dev/articles/inp#how-to-measure-inp">Interaction to Next Paint (INP)</a></li>
<li><a href="https://web.dev/articles/cls#measure">Cumulative Layout Shift (CLS)</a></li>
</ul>


<p>下面对其进行总结。</p>

<h2>🔍 什么是 Web Vitals？</h2>

<ul>
<li><strong>Web Vitals</strong> 是 Google 推出的统一性能评估体系，旨在让开发者、产品经理等聚焦界面体验质量的核心指标 (<a href="https://web.dev/articles/vitals">web.dev</a>)。</li>
<li>它简化了性能指标体系，聚焦当前"<strong>Core Web Vitals</strong>&ldquo;（核心页面体验指标） (<a href="https://developers.google.com/search/docs/appearance/core-web-vitals">developers.google.com</a>)。</li>
</ul>


<h2>🎯 Core Web Vitals 主要指标</h2>

<p><img src="http://hongchaozhang.github.io/images/LCP-INP-CLS.jpg" alt="lcp inp cls" /></p>

<p>这三个指标反映了用户体验的三个关键维度：</p>

<table>
<thead>
<tr>
<th> 指标                              </th>
<th> 描述                     </th>
<th> 优良阈值                   </th>
</tr>
</thead>
<tbody>
<tr>
<td> LCP (Largest Contentful Paint)  </td>
<td> 最大内容元素首次对用户可见所需时间      </td>
<td> ≤ 2.5 s (<a href="https://web.dev/articles/vitals">web.dev</a>) </td>
</tr>
<tr>
<td> INP (Interaction to Next Paint) </td>
<td> 用户交互至下一帧渲染完成的延迟，反映响应速度 </td>
<td> ≤ 200 ms               </td>
</tr>
<tr>
<td> CLS (Cumulative Layout Shift)   </td>
<td> 页面元素意外移动引起的视觉稳定性问题累积分数 </td>
<td> ≤ 0.1                  </td>
</tr>
</tbody>
</table>


<ul>
<li>衡量标准采用 <strong>75th percentile</strong>，也就是大多数用户（前 75%）体验应满足上述阈值 (<a href="https://web.dev/articles/vitals">web.dev</a>)。</li>
<li>长期来看，Core Web Vitals 指标可能会随着研究演进调整（目前由实验→待定→稳定阶段管理） 。</li>
</ul>


<h2>🛠 如何衡量 Web Vitals</h2>

<ul>
<li><strong>合成工具</strong>：Lighthouse、WebPageTest、Chrome DevTools Performance 面板（支持实时测量 FCI、LCP、CLS、INP） (<a href="https://web.dev/performance">web.dev</a>)。</li>
<li><p><strong>真实用户监控</strong>：</p>

<ul>
<li>使用 <code>web-vitals</code> JS 库采集、上报（可配合 GA4、BigQuery）(<a href="https://web.dev/articles/vitals-ga4">web.dev</a>)；</li>
<li>或使用现成 RUM 工具，如 Google Analytics、CrUX、Search Console Core Web Vitals 报告等 (<a href="https://web.dev/articles/vitals-ga4">web.dev</a>)。</li>
</ul>
</li>
</ul>


<h2><a href="https://web.dev/articles/lcp#measure">Largest Contentful Paint (LCP)</a></h2>

<h3>1. 什么是 LCP？</h3>

<ul>
<li><strong>LCP</strong> 指的是浏览器首次渲染页面中 <strong>最大内容元素</strong>（如图片块、文本块或视频）的时间，相对于页面开始加载时刻(<a href="https://web.dev/articles/lcp?utm_source=chatgpt.com">web.dev</a>)。</li>
<li>它是 Core Web Vitals 中衡量“页面主要内容是否快速可见”的关键指标，比传统指标（如 FCP、DOMContentLoaded）更能贴合用户感知(<a href="https://web.dev/articles/lcp?hl=ja&amp;utm_source=chatgpt.com">web.dev</a>)。</li>
<li>LCP被认为是最接近“首屏渲染时间”的指标。</li>
</ul>


<h3>2. 考量元素与规则</h3>

<ul>
<li>LCP 只考虑特定类型元素。</li>
<li>只计算可见部分</li>
</ul>


<p>下面是几个LCP的例子。</p>

<p><img src="http://hongchaozhang.github.io/images/lcp-demo1.png" alt="lcp demo 1" /></p>

<p>在这个例子中，新内容被添加到DOM中，这改变了哪个元素是最大的。</p>

<p><img src="http://hongchaozhang.github.io/images/lcp-demo-2.png" alt="lcp demo 2" /></p>

<p>在这个例子中，Instagram的logo相对较早加载，即使其他内容逐渐显示，它仍然是最大的元素。</p>

<p><img src="http://hongchaozhang.github.io/images/lcp-demo-3.png" alt="lcp demo 3" /></p>

<p>在这个Google搜索结果页面的例子中，最大的元素是一段文本，它在任何图像或logo加载完成之前就显示出来了。由于所有单独的图像都比这段文本小，所以在整个加载过程中它始终是最大的元素。</p>

<h2><a href="https://web.dev/articles/inp#how-to-measure-inp">Interaction to Next Paint (INP)</a></h2>

<h3>🎯 什么是 INP？</h3>

<ul>
<li><strong>INP</strong> 是 Core Web Vitals 的一项稳定指标，用来评估页面对用户所有交互（点击、触摸、键盘输入等）的整体响应能力。</li>
<li>它会记录整个页面生命周期中的每次交互延迟，最终以 <strong>最长的那次交互</strong>（剔除极端值）作为该页面的 INP 分数。</li>
</ul>


<h3>🔄 为什么用 INP 替代 FID？</h3>

<ul>
<li><strong>FID（First Input Delay）</strong> 只测量页面首次交互的延迟，而 INP 更全面，衡量整个访问过程中的所有交互延迟，更真实反映用户体验。</li>
<li>INP 包括从用户输入、事件处理到下一帧</li>
</ul>


<h3>🧪 如何测量 INP？</h3>

<p>使用 <code>web-vitals</code> JavaScript 库测量 INP。</p>

<h3>🛠 提高 INP 的常见优化措施</h3>

<ol>
<li>避免主线程长时间阻塞（比如大循环或同步 JS）。</li>
<li>将重逻辑拆分为异步任务（如 requestIdleCallback、setTimeout）。</li>
<li>减少第三方脚本干扰。</li>
<li>延迟加载不重要的资源（如图片、iframe）。</li>
<li>使用 <code>content-visibility: auto</code> 优化首次绘制区域。</li>
</ol>


<h2><a href="https://web.dev/articles/cls#measure">Cumulative Layout Shift (CLS)</a></h2>

<h3>🧩 什么是 CLS？</h3>

<ul>
<li><strong>CLS（Cumulative Layout Shift）</strong> 測量的是页面在非用户触发的情况下，视觉内容发生的意外位移累积程度，是 Core Web Vitals 的一项重要稳定指标 ([web.dev][1])。</li>
<li>一次布局移动（layout shift）指的是在两个绘制帧之间，一个可见元素的位置改变。若多个这种变化连续发生（间隔 &lt; 1 秒，总时长 ≤ 5 秒），它们形成一个布局移动“突发窗口”（session window），CLS 取该窗口里得分最高的一组变化 ([web.dev][1])。</li>
</ul>


<h3>📊 如何计算布局移动分数？</h3>

<p>每次 layout‑shift 条目的分数由下面两个部分组成：</p>

<ol>
<li><strong>impact fraction</strong>：不稳定元素的影响区域占视口大小的比例。</li>
<li><strong>distance fraction</strong>：元素移动距离占视口最大边长（宽或高）的比例。</li>
</ol>


<h3>🧪 如何测量 CLS？</h3>

<h4>实验室工具（合成环境）：</h4>

<ul>
<li>Chrome DevTools、Lighthouse、PageSpeed Insights、WebPageTest 都可测量加载过程中的 CLS 值。</li>
</ul>


<h4>真实用户监控（Field Data）：</h4>

<ul>
<li>使用 CrUX、Search Console、PageSpeed Insights RUM 等；</li>
<li>推荐通过 <code>web-vitals</code> 或 Layout Instability API 捕获事件并上报</li>
</ul>


<h3>🛠 如何优化 CLS？</h3>

<ul>
<li><strong>显式指定资源尺寸</strong>：给图片、视频、iframe 设置 <code>width/height</code> 或使用 CSS aspect-ratio，避免加载后推移。</li>
<li><strong>先占位后加载</strong>：异步加载资源前预留空间（例如广告、远程组件），加载后不引起布局移动。</li>
<li><strong>适度动画过渡</strong>：用 CSS <code>transform</code> 动画代替突兀的布局变化，若与用户交互触发可排除计算。</li>
<li><strong>第三方脚本注意尺寸</strong>：广告、embed 内容应提供固定高度/宽度；若动态变化，应用动画或预留长条提示。</li>
<li><strong>过滤用户交互触发移动</strong>：500ms 内关联用户交互的 layout shift 不计入 CLS（例如点击展开）。</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[怎样提高web性能]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/06/10/how-to-improve-web-performance/"/>
    <updated>2025-06-10T16:57:17+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/06/10/how-to-improve-web-performance</id>
    <content type="html"><![CDATA[<!-- more -->


<p>下面是GPT总结的web性能优化，我整理了一下，方便自己阅读。</p>

<p>以下内容分为三部分：一是分析思路与流程，二是常用工具推荐，三是Chrome DevTools 中几个常用且好用的功能示例。</p>

<h2>一、分析思路与流程</h2>

<ol>
<li><p><strong>明确性能目标与衡量指标</strong></p>

<ul>
<li>明确“性能”：

<ul>
<li>页面首次可交互（First Contentful Paint）</li>
<li>首屏渲染时间（Time to First Byte、First Paint、First Meaningful Paint）</li>
<li>可交互时间（Time to Interactive）</li>
<li>整体加载完成时间（Load Event End）</li>
</ul>
</li>
<li>结合业务需求，确定用户体验最关心的关键指标（KPI），如：

<ul>
<li>首屏加载时间 &lt; 2s</li>
<li>首个输入延迟（FID）&lt; 100ms</li>
<li>累计布局偏移（CLS）&lt; 0.1</li>
</ul>
</li>
<li>基于这些指标，才能有的放矢地去定位瓶颈。</li>
</ul>
</li>
<li><p><strong>收集初步的性能数据（基线测量）</strong></p>

<ul>
<li>通过 Lighthouse、WebPageTest、Chrome DevTools 自带的 Performance 面板等工具，先跑一次完整的测速，把得出的各项指标（TTFB、FCP、LCP、TTI、Total Blocking Time、Overall Load Time、资源大小统计等）记录下来，作为后续优化前后的对比基线。</li>
<li>也可以接入 RUM（Real User Monitoring）系统，比如 Google Analytics、Sentry Performance、New Relic Browser，收集真实用户在不同网络环境（4G、3G、宽带）下的加载情况。</li>
</ul>
</li>
<li><p><strong>深入分析各项耗时明细</strong></p>

<ul>
<li><strong>网络请求分析</strong>：查看资源请求的数量、按域名分组大小、缓存命中率、是否存在多余的第三方脚本；关注阻塞（Blocking）、排队（Queuing）和传输（Transfer）时长。</li>
<li><strong>JavaScript 执行分析</strong>：分析脚本解析与编译、函数执行、长任务（Long Tasks）。如<em>有大量主线程阻塞</em>、长任务会阻塞渲染或用户交互，需要考虑拆分 Webpack bundle、采用 <em>Code Splitting</em>、<em>懒加载</em>。</li>
<li><strong>渲染与布局</strong>：查看是否存在<em>强制同步布局（Forced Reflow）</em>、频繁的 DOM 操作导致布局抖动，是否存在大面积的 repaint。</li>
<li><strong>资源加载优先级</strong>：评估关键 CSS/JS 是否合理 inline 或预加载，图片是否做了懒加载、尺寸压缩，以及字体加载策略（font-display）是否合理。</li>
</ul>
</li>
<li><p><strong>定位瓶颈并分类优化方案</strong></p>

<ul>
<li><p><strong>网络层面</strong></p>

<ul>
<li>合并或拆分请求：将多个小静态资源合并为一个包（或反之，拆分较大的包为按需加载）；</li>
<li>启用 HTTP/2 或 HTTP/3，减小握手与队头阻塞（Head-of-line Blocking）；</li>
<li>核查缓存策略（Cache-Control、ETag），确保静态资源在客户端可复用；</li>
<li>开启 Gzip 或 Brotli 压缩；</li>
<li>确认 CDN 覆盖与节点就近分发。</li>
</ul>
</li>
<li><p><strong>代码包体积</strong></p>

<ul>
<li>使用 Tree Shaking、代码分割（Code Splitting）、按需加载（dynamic import）；</li>
<li>删除不必要的 polyfill、第三方库里不使用的功能；</li>
<li>压缩混淆 JS/CSS（Terser、CSSNano）。</li>
</ul>
</li>
<li><p><strong>图片与多媒体资源</strong></p>

<ul>
<li>图片压缩（WebP、AVIF），使用合适的分辨率；</li>
<li>图片懒加载（Intersection Observer API）；</li>
<li>Sprite 图合并静态小图标，尽量减少 HTTP 请求。

<ul>
<li>也不一定。如果启用 HTTP/2 或 HTTP/3，并行能力增强，合并请求反而会降低性能。</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>渲染与交互</strong></p>

<ul>
<li>减少无意义的 DOM 操作，避免频繁读写 DOM；</li>
<li>避免同步布局、强制回流，合理使用 requestAnimationFrame；</li>
<li>使用虚拟列表（Virtual List）处理长列表。</li>
</ul>
</li>
<li><p><strong>第三方脚本</strong></p>

<ul>
<li>定期审查埋点 / 监控 / 广告 / 社交插件，移除或延迟加载冗余脚本；</li>
<li>将不影响首屏渲染的第三方脚本标记为 <code>async</code> 或 <code>defer</code>，或放在页面底部。</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>验证和迭代</strong></p>

<ul>
<li>每做一步优化，都要重新收集 Performance 指标，与基线做对比；</li>
<li>借助 Lighthouse、CI/CD 中的自动化检测工具（如 GitHub Action + Lighthouse CI）持续监控；</li>
<li>对比真实用户数据（RUM），避免“合成测试指标很好，但真用户网络环境下反而没提升”的情况。</li>
</ul>
</li>
</ol>


<h2>二、常用工具推荐</h2>

<ol>
<li><p><strong>浏览器级工具</strong></p>

<ul>
<li><strong>Chrome DevTools</strong>：自带 Network、Performance、Coverage、Lighthouse、Web Vitals、Audits、Memory 等面板，适合本地快速定位瓶颈。</li>
</ul>
</li>
<li><p><strong>自动化测试与报告</strong></p>

<ul>
<li><strong>Lighthouse CLI / Lighthouse CI</strong>：既可以在本地命令行执行 Lighthouse 审计，也可以集成到持续集成流水线里，对比性能得分、查看详细报告。</li>
<li><strong>WebPageTest</strong>：支持多地节点、多种网络模拟（3G、DSL、快网），可以生成瀑布流（Waterfall）、Video Capture、Filmstrip、Speed Index 等数据。</li>
<li><strong>PageSpeed Insights</strong>：Google 官方工具，结合 Lighthouse 分析，同时给出移动端与桌面端的评分与优化建议。</li>
</ul>
</li>
<li><p><strong>真实用户监控（RUM）</strong></p>

<ul>
<li><strong>Google Analytics</strong>：可以打开 Site Speed 报表，查看真实用户的加载时间分布；也可接入自定义埋点上报 FCP、LCP 等 Web Vitals。</li>
<li><strong>New Relic Browser / Datadog Browser RUM / Sentry Performance</strong>：能够在生产环境监控用户体验，分析不同地域、设备、网络下的性能表现。</li>
</ul>
</li>
<li><p><strong>打包分析</strong></p>

<ul>
<li><strong>Webpack Bundle Analyzer / Source-map-explorer / Rollup-plugin-visualizer</strong>：可视化打包体积，找出哪个模块体积最大，进一步做按需加载或删除不必要依赖。</li>
<li><strong>Bundlephobia</strong>：在线查看某个 npm 包的体积、下载统计、Tree Shaking 后体积等。</li>
</ul>
</li>
<li><p><strong>其他辅助工具</strong></p>

<ul>
<li><strong>Pingdom</strong>、<strong>GTmetrix</strong>：在线性能检测与报告，相对 WebPageTest 严谨度稍低，但上手更快。</li>
<li><strong>BrowserMob Proxy / Fiddler / Charles</strong>：抓包工具，用于调试 HTTP/HTTPS 请求，查看请求头、响应头、Cookie、重定向链路。</li>
<li><strong>HEAP Profiler / CPU Profiler（Chrome DevTools）</strong>：用于深度分析 JS 运行时性能、内存泄漏、调用栈等。</li>
</ul>
</li>
</ol>


<h2>三、Chrome DevTools 中几个好用的功能</h2>

<p>下面着重介绍几个在实际排查网络与渲染性能时经常会用到的面板与要点。</p>

<h3>1. Network 面板（网络面板）</h3>

<ul>
<li><p><strong>Waterfall 瀑布流</strong></p>

<ul>
<li>每个资源的请求时序：DNS 查询、TCP 建立、SSL 握手、请求发送（Request Sent）、等待服务器响应（Waiting / TTFB）、内容下载（Content Download）、以及结束时间。</li>
<li>从瀑布流上可以直观看出是否有“队头阻塞”（Head-of-line Blocking）、哪个请求是阻塞渲染的关键请求。</li>
</ul>
</li>
<li><p><strong>按域名与资源类型分组</strong></p>

<ul>
<li>在 Headers 栏目里可查看所有请求的域名、请求方法（GET/POST）、状态码、内容大小等；</li>
<li>在 Sizes 栏目里可快速看哪个资源占用流量最多；</li>
<li>在 Initiator 栏目可以看到是哪个脚本或哪个 HTML 标签发起的请求。</li>
</ul>
</li>
<li><p><strong>过滤和筛选</strong></p>

<ul>
<li>可以通过“JS/CSS/Img/Media/Font/Doc/XHR”等标签快速过滤；</li>
<li>也可以在 Filter 输入框里根据 URL 关键字或正则筛选感兴趣的请求；</li>
</ul>
</li>
<li><p><strong>Disable Cache（禁用缓存）</strong></p>

<ul>
<li>在开发测试时勾选“Disable cache”可以确保所有请求都走网络而非本地缓存，方便复现首次加载时的网络开销。</li>
</ul>
</li>
<li><p><strong>Throttling（模拟网络环境）</strong></p>

<ul>
<li>可在 “No throttling” 下拉里选择“Fast 3G、Slow 3G、Offline” 等，以模拟移动网络环境下的加载速度。</li>
</ul>
</li>
<li><p><strong>Capture Screenshots</strong></p>

<ul>
<li>勾选左上角的相机图标后，在加载过程中会自动截取页面渲染快照；配合 Performance 面板的 Filmstrip 视图，可以定位哪个资源加载完成对应的视觉变化。</li>
</ul>
</li>
</ul>


<h3>2. Performance 面板（性能面板，又叫 Timeline）</h3>

<ul>
<li><p><strong>录制整个页面加载与交互过程</strong></p>

<ul>
<li>点击“Record”（录制），然后刷新页面或执行某个操作，工具会捕获加载期间的网络请求、脚本执行、布局（Layout）、绘制（Paint）、合成（Composite）、垃圾回收（GC）等各阶段耗时。</li>
</ul>
</li>
<li><p><strong>关键时间线（Timings）</strong></p>

<ul>
<li>Top-down 视图里会标注 CIF（DOMContentLoaded）、Load、First Paint、First Contentful Paint、Largest Contentful Paint、Time to Interactive 等时间点（有时需要开启 Web Vitals 支持）。</li>
</ul>
</li>
<li><p><strong>查看长任务（Long Tasks）</strong></p>

<ul>
<li>在 Flame Chart 上可以看到哪些 JavaScript 执行占用了主线程超过 50ms，会被标注为长任务；根据 Call Tree（调用树）可以追溯是哪段代码导致的。</li>
</ul>
</li>
<li><p><strong>帧率与交互流畅度</strong></p>

<ul>
<li>通过 FPS（Frames Per Second）视图监测渲染帧率，帧率过低可能是由于过多重绘重排（Reflow/Repaint）或频繁执行 JS 造成。</li>
</ul>
</li>
<li><p><strong>CPU / Memory 节点</strong></p>

<ul>
<li>可以在录制时分别打开 CPU Profiler 或 Memory Profiler，定位内存泄露或高 CPU 占用的调用栈。</li>
</ul>
</li>
</ul>


<h3>3. Lighthouse 面板（审计）</h3>

<ul>
<li><p><strong>一键跑性能审计</strong></p>

<ul>
<li>在 DevTools 的右侧或菜单中切换到“Lighthouse”面板，选择“Mobile”或“Desktop”，然后点击“Generate report”（生成报告）。</li>
<li>审计会根据最新的 Lighthouse 规则给出性能分数（0–100），并列出可优化项（例如：减少首次内容绘制时间、启用文本压缩、图片元素所占空间建议、使用合并脚本等）。</li>
</ul>
</li>
<li><p><strong>可视化建议与详情</strong></p>

<ul>
<li>对每一项得分，Lighthouse 都会给出“为什么重要”、“如何优化”的详细说明，以及与同行业网站的对比。非常适合做一次性健康检查。</li>
</ul>
</li>
</ul>


<h3>4. Coverage 面板（覆盖率检测）</h3>

<ul>
<li><p><strong>Detect Unused CSS/JS（检测未使用代码）</strong></p>

<ul>
<li>打开 DevTools 后，按 <code>Ctrl+Shift+P</code>（Windows）或 <code>⌘+Shift+P</code>（Mac），输入 “Coverage: Show Coverage” 并回车，打开 Coverage 面板。</li>
<li>点击左上角小圆点开始录制，再次刷新页面。工具会扫描页面加载过程中哪些 CSS/JS 代码块被实际使用、哪些未用。</li>
<li>根据未使用百分比，可以考虑移除或拆分那些冗余很高的模块。</li>
</ul>
</li>
</ul>


<h3>5. Web Vitals / Core Web Vitals</h3>

<ul>
<li><p><strong>实时查看 LCP、FID、CLS</strong></p>

<ul>
<li>在最新版本的 Chrome DevTools 的 Performance 面板中，如果勾选了 “Capture Web Vitals”，录制时就会在时间轴上标注 LCP、FID、CLS 等关键指标。</li>
<li>也可以通过控制台命令 <code>performance.getEntriesByType('paint')</code> 查看 First Paint (FP) 与 First Contentful Paint (FCP) 时间。</li>
</ul>
</li>
</ul>


<h3>6. Audit for Networking/Blocking</h3>

<ul>
<li><p><strong>Disable JavaScript / CSS</strong></p>

<ul>
<li>在 Network 面板中右键某个脚本或样式文件，选择 “Block request URL”，即可临时屏蔽该资源，然后观察页面表现，便于在无需改代码的情况下判断某个库/样式对首屏渲染的阻塞程度。</li>
</ul>
</li>
<li><p><strong>Request Blocking</strong></p>

<ul>
<li>DevTools 的 “Network” 面板中有一个 “Block” 选项卡，可以自定义匹配规则（如正则）屏蔽特定域名、文件类型的请求，测试若该请求不加载，对页面加载有何影响。</li>
</ul>
</li>
</ul>


<h3>7. 其他辅助功能</h3>

<ul>
<li><p><strong>Inspect Mode 与 Layout Shift Region</strong></p>

<ul>
<li>在 Elements 面板中，右上角有一个 “Inspect element” 按钮，可以直接选中页面元素，在右侧看到对应的 CSS 规则、盒模型（Box Model）信息、继承链等，便于优化样式。</li>
</ul>
</li>
<li><p><strong>Performance Monitor</strong></p>

<ul>
<li>在 DevTools 菜单里勾选 “Performance Monitor”，可在顶部显示 CPU 利用率、DOM Nodes 数量、JS Heap、Layout 队列长度等实时数据，对发现性能瓶颈有辅助意义。</li>
</ul>
</li>
<li><p><strong>Application 面板</strong></p>

<ul>
<li>查看 Cache Storage、Service Worker、Local Storage、IndexedDB、Cookie 等。若项目启用了 PWA，可以查看离线缓存策略是否生效、Service Worker 是否出现异常。</li>
</ul>
</li>
</ul>


<h2>四、小结</h2>

<ul>
<li><strong>抓大放小，有的放矢</strong>：首先要量化几个关键性能指标（如 FCP、LCP、TTI），明确“哪里卡”，分析“为什么卡”；</li>
<li><strong>数据驱动优化</strong>：借助 Lighthouse、Chrome DevTools、WebPageTest 等工具形成初始报告，从网络、资源、渲染、脚本执行等角度分别剖析；</li>
<li><strong>细化手段</strong>：从减少请求数、减小请求体积、合理缓存策略、异步加载、懒加载、拆包降维、优化渲染路径等多方面入手；</li>
<li><strong>迭代与监控</strong>：每一次优化都要验证指标变化，并结合 RUM 监控真实用户体验，避免 “合成指标” 与 “真实指标” 脱节。</li>
</ul>


<p>掌握并灵活运用以上思路和工具，相信你在分析和优化 Web 应用资源加载性能时，会更加高效、有的放矢。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[《你的五个心智阶段》总结]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/05/26/wuge-xinzhi-cengci/"/>
    <updated>2025-05-26T23:46:20+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/05/26/wuge-xinzhi-cengci</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>一、《你的五个心智阶段》总结</h2>

<p>这篇文章介绍了罗伯特·凯根提出的 <strong>「五个心智阶段（Five Orders of Consciousness）」</strong>，这是一个关于人类认知和心理发展的终身成长模型，强调 <strong>&ldquo;顺应"和"图式重构&rdquo;</strong> 是认知成长的核心。就像大模型面对新的样本，是纳入已知的参数，还是扩充参数。</p>

<p>文章首先引用让·皮亚杰的四个认知概念：</p>

<ul>
<li><strong>图式（Schema）</strong>：认知框架，类似"经验盒子"。</li>
<li><strong>同化（Assimilation）</strong>：将新事物放进旧框架。</li>
<li><strong>顺应（Accommodation）</strong>：建立新框架容纳新事物。</li>
<li><strong>平衡（Equilibration）</strong>：整合旧框架与新框架。</li>
</ul>


<blockquote><p>示例：你第一次看到 iPhone，把它当成"全屏手机"是同化；意识到它代表一种全新生态系统，是顺应。</p></blockquote>

<h3>五个心智阶段详解</h3>

<h4>1. 冲动心智（Impulsive Mind）</h4>

<ul>
<li><strong>特征</strong>：由本能驱动，无法区分自我与他人。</li>
<li><strong>例子</strong>：幼儿抢别人玩具，不懂"属于他人"这个概念。</li>
</ul>


<h4>2. 工具心智（Instrumental Mind）</h4>

<ul>
<li><strong>特征</strong>：以自我利益为中心，有交易式思维。</li>
<li><strong>例子</strong>：成年人工作只是为了奖金、绩效；销售员把客户当工具。</li>
</ul>


<h4>3. 社会化心智（Socialized Mind）</h4>

<ul>
<li><strong>特征</strong>：强调角色认同，依赖他人评价，服从权威。</li>
<li><strong>例子</strong>：职场新人极度关注"老板怎么看我"；做一个"合群的好员工"。</li>
</ul>


<h4>4. 自我授权心智（Self-Authoring Mind）</h4>

<ul>
<li><strong>特征</strong>：独立思考，确立自我价值观与行为原则。</li>
<li><strong>例子</strong>：大学生不再听从父母安排，选择自己想走的职业道路。</li>
<li><strong>应用</strong>：CEO坚持企业使命，即使损失短期利润。</li>
</ul>


<h4>5. 自我转化心智（Self-Transforming Mind）</h4>

<ul>
<li><strong>特征</strong>：可以反思和调整自己的价值系统，理解多元性。</li>
<li><strong>例子</strong>：曼德拉放弃民族复仇，带领南非和平过渡，因为他跳出了"黑人领袖"的身份局限。</li>
<li><strong>标志</strong>：形成动态可调的认知系统，具备元认知能力。</li>
</ul>


<h3>精髓归纳</h3>

<ul>
<li><strong>成长的本质</strong>：不是信息堆积，而是图式的更新。</li>
<li><strong>升维思维</strong>：添加认知维度，打造更丰富的世界模型。</li>
<li><strong>心智升级的标志</strong>：过去束缚你的东西，现在变成你可以审视的工具。</li>
</ul>


<h2>二、《一个心智升级心法》总结</h2>

<p>这篇文章围绕如何实现从第三阶段（社会化心智）向第四、第五阶段的飞跃，提出了实践路径——<strong>&ldquo;主体—客体转化（Subject–Object Shift）&rdquo;</strong>，即心智成长的关键机制。</p>

<h3>主体—客体转化：核心理念</h3>

<ul>
<li><strong>主体（Subject）</strong>：你未曾觉察的内在信念、情绪机制，它"操控"你。</li>
<li><strong>客体（Object）</strong>：被你观察、分析、操控的认知内容。

<blockquote><p>转化过程 = 从"我就是它"变成"我在看它"</p></blockquote></li>
</ul>


<h3>举例说明</h3>

<h4>小王的例子（从第三阶段向第四阶段）</h4>

<ul>
<li><strong>问题</strong>：领导批评让他持续焦虑。</li>
<li><strong>转化</strong>：意识到"领导评价"是影响他价值感的主体。</li>
<li><strong>升级</strong>：一旦抽离，便能更客观分析反馈，减少情绪影响。</li>
</ul>


<h4>张经理的例子（从第四阶段向第五阶段）</h4>

<ul>
<li><strong>问题</strong>：严格执行规则，组织氛围变差。</li>
<li><strong>转化</strong>：将"规则"从主体变成客体，理解规则有局限性。</li>
<li><strong>升级</strong>：调整制度，更具弹性，员工积极性提升。</li>
</ul>


<h2>三、总结对比与启示</h2>

<table>
<thead>
<tr>
<th> 内容 </th>
<th> 《五个心智阶段》 </th>
<th> 《一个心智升级心法》 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 理论核心 </td>
<td> 凯根五阶段模型 </td>
<td> 主体—客体转化机制 </td>
</tr>
<tr>
<td> 成长逻辑 </td>
<td> 顺应新图式 → 升维思维 </td>
<td> 识别主体 → 转化为客体 → 增加自由度 </td>
</tr>
<tr>
<td> 适用层面 </td>
<td> 个体认知与行为 </td>
<td> 个体与组织均适用 </td>
</tr>
<tr>
<td> 方法论 </td>
<td> 无特定方法，侧重认知结构描述 </td>
<td> 提供了"免疫地图"等具象化工具 </td>
</tr>
<tr>
<td> 成长难点 </td>
<td> 很多人止步于第三阶段 </td>
<td> 主体不易觉察，且转化过程伴随不适感 </td>
</tr>
<tr>
<td> 成熟标志 </td>
<td> 不再受他人期待控制，具有自我价值判断 </td>
<td> 能跳出原始设定，重构自我、重写剧本 </td>
</tr>
</tbody>
</table>


<h2>四、实践建议</h2>

<ol>
<li><strong>情绪是入口</strong>：任何让你焦虑、愤怒的事物，往往隐藏着"主体"。</li>
<li><strong>保持觉察与反思</strong>：质疑自动反应，追问"为什么我会这么想/这么做？"</li>
<li><strong>利用"免疫地图"</strong>：定期分析自己的目标与反向行为，识别潜在信念。</li>
<li><strong>从旁观者视角看自己</strong>：练习"抽离"——从高维度看待自己的局限。</li>
<li><strong>用在团队或家庭中</strong>：鼓励成员共同识别组织的"集体默认假设"。</li>
</ol>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[精英日课《好能量》总结]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/04/16/haonengliang/"/>
    <updated>2025-04-16T23:00:20+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/04/16/haonengliang</id>
    <content type="html"><![CDATA[<!-- more -->


<ul>
<li><a href="#1-%E4%BB%A3%E8%B0%A2%E5%81%A5%E5%BA%B7%E6%98%AF%E6%95%B4%E4%BD%93%E5%81%A5%E5%BA%B7%E7%9A%84%E6%A0%B8%E5%BF%83"><strong>1. 代谢健康是整体健康的核心</strong></a>

<ul>
<li><a href="#1-%E4%BB%A3%E8%B0%A2%E5%8A%9F%E8%83%BD%E9%9A%9C%E7%A2%8D%E5%BC%95%E5%8F%91%E6%85%A2%E6%80%A7%E7%82%8E%E7%97%87"><strong>1. 代谢功能障碍引发慢性炎症</strong></a></li>
<li><a href="#2-%E8%83%B0%E5%B2%9B%E7%B4%A0%E6%8A%B5%E6%8A%97%E7%9A%84%E6%81%B6%E6%80%A7%E5%BE%AA%E7%8E%AF"><strong>2. 胰岛素抵抗的恶性循环</strong></a></li>
<li><a href="#3-%E6%85%A2%E6%80%A7%E7%97%85%E4%B8%8E%E4%BB%A3%E8%B0%A2%E9%97%AE%E9%A2%98%E7%9A%84%E7%9B%B4%E6%8E%A5%E5%85%B3%E8%81%94"><strong>3. 慢性病与代谢问题的直接关联</strong></a></li>
</ul>
</li>
<li><a href="#2-%E7%8E%B0%E4%BB%A3%E5%8C%BB%E7%96%97%E7%B3%BB%E7%BB%9F%E7%9A%84%E5%B1%80%E9%99%90%E6%80%A7"><strong>2. 现代医疗系统的局限性</strong></a></li>
<li><a href="#3-%E7%94%9F%E6%B4%BB%E6%96%B9%E5%BC%8F%E8%B0%83%E6%95%B4%E7%9A%84%E5%9B%9B%E5%A4%A7%E6%94%AF%E6%9F%B1"><strong>3. 生活方式调整的四大支柱</strong></a></li>
<li><a href="#4-%E9%A5%AE%E9%A3%9F%E9%80%89%E6%8B%A9%E7%9A%84%E5%85%B7%E4%BD%93%E5%8E%9F%E5%88%99"><strong>4. 饮食选择的具体原则</strong></a></li>
<li><a href="#%E6%80%BB%E7%BB%93"><strong>总结</strong></a></li>
</ul>


<p>精英日课中关于《好能量》的核心要点总结。</p>

<h2><strong>1. 代谢健康是整体健康的核心</strong></h2>

<ul>
<li><strong>观点</strong>：原文通过细胞生物学机制、临床案例和实验数据详细说明：<strong>慢性炎症和胰岛素抵抗是代谢功能障碍的核心表现，它们通过损害细胞能量供应、引发组织炎症、干扰激素平衡，最终导致多种慢性病的共同病理基础</strong>，（如2型糖尿病、心血管疾病、阿尔茨海默症）。<em>这一观点贯穿全书</em>，并得到跨学科证据的强力支持。</li>
</ul>


<h4><strong>1. 代谢功能障碍引发慢性炎症</strong></h4>

<ul>
<li><p><strong>机制</strong>：</p>

<ul>
<li><strong>细胞能量失衡</strong>：当身体因饮食不良（如高糖、超加工食品）或久坐导致脂肪堆积时，胰岛素无法有效将葡萄糖送入肌肉细胞，细胞长期处于“能量饥饿”状态。</li>
<li><strong>免疫系统过度反应</strong>：细胞能量不足会触发免疫系统释放炎症因子（如TNF-α、IL-6），试图“修复”问题。但若代谢问题持续存在，炎症反应转为慢性，导致全身组织受损。</li>
</ul>
</li>
<li><p><strong>原文例证</strong>：</p>

<blockquote><p>“炎症本来应该快来快走，但慢性炎症是免疫系统长期喷洒‘炎症因子’的结果。”</p></blockquote></li>
</ul>


<h4><strong>2. 胰岛素抵抗的恶性循环</strong></h4>

<ul>
<li><p><strong>机制</strong>：</p>

<ul>
<li><strong>胰岛素功能下降</strong>：长期高糖饮食使细胞对胰岛素信号不敏感，胰腺被迫分泌更多胰岛素，导致血液中胰岛素水平过高。</li>
<li><strong>代谢紊乱连锁反应</strong>：高胰岛素水平促进脂肪储存（尤其内脏脂肪），进一步加剧炎症和胰岛素抵抗，形成“代谢综合征”——肥胖、高血压、高血糖、高血脂并存。</li>
</ul>
</li>
<li><p><strong>原文例证</strong>：</p>

<blockquote><p>脑细胞因能量不足易引发抑郁和阿尔茨海默症。
心理压力会立即升高血糖，长期压力导致胰岛素抵抗，最终发展为2型糖尿病。</p></blockquote></li>
</ul>


<h4><strong>3. 慢性病与代谢问题的直接关联</strong></h4>

<ul>
<li><p><strong>2型糖尿病</strong>：</p>

<blockquote><p>胰岛素抵抗是糖尿病的核心机制，细胞无法有效利用葡萄糖，导致血糖长期升高，损害血管和神经。</p></blockquote></li>
<li><p><strong>心血管疾病</strong>：</p>

<blockquote><p>慢性炎症损伤血管内皮，促进动脉粥样硬化；高胰岛素水平增加肾脏钠重吸收，引发高血压。</p></blockquote></li>
<li><p><strong>阿尔茨海默症（3型糖尿病）</strong>：</p>

<blockquote><p>脑细胞因胰岛素抵抗无法获取足够能量，导致神经元退化。同时，炎症因子加速淀粉样蛋白沉积。</p></blockquote></li>
<li><p><strong>自身免疫性疾病（如关节炎、狼疮）</strong>：</p>

<blockquote><p>慢性炎症破坏免疫平衡，导致免疫系统攻击自身组织。</p></blockquote></li>
</ul>


<h2><strong>2. 现代医疗系统的局限性</strong></h2>

<ul>
<li><strong>观点</strong>：医疗系统过度关注急性病治疗，忽视慢性病的根本原因，且受利益驱动导致过度治疗。 得出的结论是：急性病相信西医，慢性病不相信西医。</li>
<li><strong>例证</strong>：

<ul>
<li>医疗系统评价标准不基于治疗效果，而是治疗操作量。例如，外科医生被鼓励多手术以维持收入（“eat what you kill”）。</li>
</ul>
</li>
</ul>


<h2><strong>3. 生活方式调整的四大支柱</strong></h2>

<ul>
<li><p><strong>睡眠与生物钟</strong></p>

<ul>
<li><strong>观点</strong>：每天7-8小时优质睡眠，固定作息，避免光照紊乱。</li>
<li><strong>例证</strong>：睡眠不足6.5小时增加胰岛素抵抗风险；巴西研究发现，白天户外锻炼组比夜间室内组胰岛素敏感性更高。</li>
</ul>
</li>
<li><p><strong>饮食与血糖管理</strong></p>

<ul>
<li><strong>观点</strong>：<strong>避免超加工食品，优先选择未加工食物；控制血糖波动。</strong></li>
<li><strong>例证</strong>：

<ul>
<li>实验显示，食用未加工食品组每日少摄入500卡路里，体重下降；超加工食品组体重增加。</li>
<li>连续血糖监测仪（CGM）显示，餐后散步15分钟可降低30%血糖峰值；醋（如苹果醋）可延缓碳水吸收，降低餐后血糖20%-50%。</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>运动与活动分散化</strong></p>

<ul>
<li><strong>观点</strong>：每天走1万步（分散完成），结合中等强度有氧和抗阻训练。</li>
<li><strong>例证</strong>：

<ul>
<li>每天走8000-12000步的人群死亡风险降低50%-65%。</li>
<li>桌下跑步机实验：每天使用2.5小时，10天减脂2.6磅，增肌2.2磅。</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>温度暴露与反脆弱</strong></p>

<ul>
<li><strong>观点</strong>：适当冷热刺激可增强代谢。</li>
<li><strong>例证</strong>：

<ul>
<li>芬兰研究显示，每周蒸桑拿4-7次，心脏病风险降低63%；冷水暴露（如冷水淋浴）促进棕色脂肪生成。</li>
</ul>
</li>
</ul>
</li>
</ul>


<h2><strong>4. 饮食选择的具体原则</strong></h2>

<ul>
<li><strong>避免超加工食品</strong></li>
<li><strong>优先未加工食物</strong></li>
<li><strong>控制精致谷物与植物种子油</strong></li>
</ul>


<h2><strong>总结</strong></h2>

<p>《好能量》通过科学案例与数据，强调代谢健康的核心地位，批判医疗系统对慢性病的短视，并提出饮食、运动、睡眠、心理四维干预方案。其核心理念是：<strong>健康需从整体出发，通过可观察的数据和生活方式调整，预防慢性病的根源——代谢功能障碍</strong>。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[《如何激励10到25岁的人》总结]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/04/15/ruhe-jili-nianqingren/"/>
    <updated>2025-04-15T23:22:56+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/04/15/ruhe-jili-nianqingren</id>
    <content type="html"><![CDATA[<!-- more -->


<p>《怎样激励10到25岁的人》核心观点总结</p>

<h2>1. <strong>智者的反馈（Wise Feedback）</strong></h2>

<p><strong>观点</strong>：批评需包裹在高期待中，先给予安全感，再提出改进建议，最后在给于肯定。这也被称为“<strong>批评三明治</strong>“。<br/>
<strong>操作</strong>：用“高标准+信任”的语言框架，例如：</p>

<blockquote><p>“我给你这些评语是因为我有很高的标准，我知道你能达到这些标准。”</p></blockquote>

<p><strong>示例</strong>：学生作文修改时，老师先肯定其潜力，再具体指出需要调整的部分，最后强调对其能力的信任。</p>

<h2>2. <strong>请勿「孩视」</strong></h2>

<p><strong>观点</strong>：避免居高临下的态度，尊重青少年的地位和尊严。<br/>
<strong>操作</strong>：用提问代替命令，认可其能力。<br/>
<strong>示例</strong>：<br/>
- 错误：“你必须按时吃药！”<br/>
- 正确：“你是一个懂科学的人，能不能考虑按时吃药？这对你的健康很重要。”</p>

<h2>3. <strong>导师心态：高标准 + 高支持</strong></h2>

<p><strong>观点</strong>：好导师需兼具严格要求和充分支持，形成“民主型”领导风格。<br/>
<strong>操作</strong>：<br/>
- 设定明确目标（如完成科研项目）；<br/>
- 提供资源支持（如指导文献阅读、协助实验设计）。<br/>
<strong>示例</strong>：教授要求学生挑战高难度数学题，但允许学生按自己的节奏学习，并在失败时给予二次机会。</p>

<h2>4. <strong>X理论与Y理论的融合</strong></h2>

<p><strong>观点</strong>：强制者心态（X理论）和守护者心态（Y理论）均非最佳，需结合为“导师心态”。<br/>
<strong>操作</strong>：协作式故障排除三步法：<br/>
1. <strong>陈述事实</strong>：“这次考试成绩不理想。”<br/>
2. <strong>给予安全感</strong>：“我不认为这代表你的真实水平。”<br/>
3. <strong>提出建议</strong>：“我们一起制定复习计划如何？”<br/>
<strong>示例</strong>：学生考试失败后，老师先给予安全感，再提出建议。</p>

<h2>5. <strong>透明沟通与提问法</strong></h2>

<p><strong>观点</strong>：开启对话需明确意图，用提问推动协作。<br/>
<strong>操作</strong>：<br/>
- <strong>透明度声明</strong>：“我找你是为了帮你解决问题，不是批评你。”<br/>
- <strong>镜像法</strong>：重复对方最后三个词+问号，例如：</p>

<blockquote><p>孩子：“我想和朋友出去玩。”<br/>
家长：“和朋友出去玩吗？”</p></blockquote>

<p><strong>示例</strong>：警察处理便利店事件时，先表明善意：“我是来帮你的，你需要什么？”</p>

<h2>6. <strong>压力转化为动力的方法</strong></h2>

<p><strong>观点</strong>：将压力视为挑战而非威胁，调整认知。</p>

<p>压力会带来两种结果：比如面对老虎，一种是僵直在那里，另一种是战斗或者逃跑。前者会让你的表现低于正常水平，而后者则会让你超常发挥。</p>

<p>当压力伴随着足够的资源时，会促使你超常发挥。
例如，如果导师对你说：“这件事情确实很难，我让你做是为了锻炼你，即使失败也不会影响你的成绩和毕业。” 这样的言语会让学生在面对压力时，从僵直状态转变为战斗状态。</p>

<p><strong>操作</strong>：考前干预话术：</p>

<blockquote><p>“紧张感能提升专注力，这是身体在帮你超常发挥！”</p></blockquote>

<p><strong>示例</strong>：哈佛学生通过5分钟压力科普，GRE数学成绩提升65分。</p>

<h2>7. <strong>激发内驱力：意义感驱动</strong></h2>

<p><strong>观点</strong>：将学习与个人使命或社会贡献结合，替代外部奖励。打骂或者糖衣炮弹，都不如给他使命感。这样会产生内驱力。
<strong>操作</strong>：设计真实任务，例如：</p>

<blockquote><p>“社区枪支暴力严重，你们能否制作反暴力公益广告？”</p></blockquote>

<p><strong>示例</strong>：学生为采访二战老兵，主动研究历史并练习采访技巧。这个过程下来，比你上各种历史辅导课或者采访技巧课都管用。</p>

<h2>8. <strong>建立归属感的四步干预</strong></h2>

<p><strong>观点</strong>：通过故事传递“改变可能”的信念。<br/>
<strong>操作</strong>：按顺序讲述：<br/>
1. <strong>挣扎是正常的</strong>：“我曾考试失败痛哭。”<br/>
2. <strong>改变是可能的</strong>：“调整方法后成绩提升。”<br/>
3. <strong>行动步骤</strong>：“向同学请教，寻求帮助。”<br/>
4. <strong>滚雪球效应</strong>：“后来我成了物理学家。”<br/>
<strong>示例</strong>：被霸凌学生通过归属感干预，主动社交并提升成绩。</p>

<h2>9. <strong>长期主义与韧性培养</strong></h2>

<p><strong>观点</strong>：注重过程而非短期结果，通过冒险活动+反思培养韧性。<br/>
<strong>操作</strong>：<br/>
- <strong>冒险活动</strong>：组织攀岩、漂流等挑战；<br/>
- <strong>反思环节</strong>：“今天的挑战如何帮助你应对学业困难？”<br/>
<strong>示例</strong>：学生参与夏令营后，大学辍学率降低10%。</p>

<h2>总结</h2>

<p>激励青少年的核心是<strong>尊重需求</strong>与<strong>成长支持</strong>的结合：<br/>
- <strong>尊重</strong>：避免“孩视”，给予地位安全感；<br/>
- <strong>支持</strong>：提供资源并引导意义感；<br/>
- <strong>韧性</strong>：通过挑战与反思培养长期抗压能力。<br/>
最终目标：让青少年在“被需要”的使命感中，主动追求卓越。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Babel工作原理]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/03/24/babel-workflow/"/>
    <updated>2025-03-24T23:20:31+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/03/24/babel-workflow</id>
    <content type="html"><![CDATA[<!-- more -->


<p>Babel is a JavaScript compiler。
主要用于将 ECMAScript 2015+（ES6 及以上）的 JavaScript 代码转换成能够在当前和旧版浏览器环境中兼容运行的代码版本。</p>

<h1>配置</h1>

<p>Babel 的配置文件通常是<code>.babelrc.json</code>或<code>babel.config.json</code>，可以在其中配置需要使用的插件和预设:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>{
</span><span class='line'>  "presets": [...],
</span><span class='line'>  "plugins": [...]
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>甚至可以直接写在<code>package.json</code>中：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>{
</span><span class='line'>  ...,
</span><span class='line'>  "babel": {
</span><span class='line'>    "presets": [...],
</span><span class='line'>    "plugins": [...]
</span><span class='line'>  },
</span><span class='line'>  ...
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>更加灵活的，可以在<code>webpack.config.js</code>中访问 Node.js 的 APIs：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>module.exports = function (api) {
</span><span class='line'>  api.cache(true);
</span><span class='line'>
</span><span class='line'>  const presets = [ ... ];
</span><span class='line'>  const plugins = [ ... ];
</span><span class='line'>
</span><span class='line'>  if (process.env["ENV"] === "prod") {
</span><span class='line'>    plugins.push(...);
</span><span class='line'>  }
</span><span class='line'>
</span><span class='line'>  return {
</span><span class='line'>    presets,
</span><span class='line'>    plugins
</span><span class='line'>  };
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<h1>工作流程</h1>

<p><img src="http://hongchaozhang.github.io/images/babel-workflow.png" alt="babel workflow" /></p>

<p>Babel 的编译过程与大多数编程语言的编译器类似，分为三个主要阶段：解析（Parsing）、转换（Transformation）和生成（Code Generation）</p>

<h2>解析（Parsing）</h2>

<p>这一阶段将代码字符串解析成抽象语法树（AST，Abstract Syntax Tree）<a href="https://developer.aliyun.com/article/1303957">2</a><a href="https://blog.csdn.net/ByteDanceTech/article/details/126900235">3</a>。AST 是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构<a href="https://developer.aliyun.com/article/1303957">2</a>。
解析过程又分为两个步骤：</p>

<ul>
<li>分词：将整个代码字符串分割成语法单元数组：tokenizer，keyword</li>
<li>语法分析：建立分析语法单元之间的关系<a href="https://developer.aliyun.com/article/1303957">2</a></li>
</ul>


<p>例如，一个简单的<code>console.log('zcy');</code>会被解析成包含程序结构、表达式语句、调用表达式等节点的 AST<a href="https://developer.aliyun.com/article/1303957">2</a>。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>{
</span><span class='line'>  "type": "Program",
</span><span class='line'>  "body": [
</span><span class='line'>    {
</span><span class='line'>      "type": "ExpressionStatement",
</span><span class='line'>      "expression": {
</span><span class='line'>        "type": "CallExpression",
</span><span class='line'>        "callee": {
</span><span class='line'>          "type": "MemberExpression",
</span><span class='line'>          "computed": false,
</span><span class='line'>          "object": {
</span><span class='line'>            "type": "Identifier",
</span><span class='line'>            "name": "console"
</span><span class='line'>          },
</span><span class='line'>          "property": {
</span><span class='line'>            "type": "Identifier",
</span><span class='line'>            "name": "log"
</span><span class='line'>          }
</span><span class='line'>        },
</span><span class='line'>        "arguments": [
</span><span class='line'>          {
</span><span class='line'>          "type": "Literal",
</span><span class='line'>          "value": "zcy",
</span><span class='line'>          "raw": "'zcy'"
</span><span class='line'>          }
</span><span class='line'>        ]
</span><span class='line'>      }
</span><span class='line'>    }
</span><span class='line'>  ],
</span><span class='line'>  "sourceType": "script"
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<h2>转换（Transformation）</h2>

<p>这一阶段对 AST 进行转换操作<a href="https://developer.aliyun.com/article/1303957">2</a><a href="https://blog.csdn.net/ByteDanceTech/article/details/126900235">3</a>。转换通常通过 Babel plugin（插件）或者 preset（预设）实现，每个插件可以访问 AST 并对其进行修改，例如将箭头函数的节点转换为普通函数节点。</p>

<h3>plugin（插件）</h3>

<p>Babel 本身只是一个编译器，可以理解为一个框架，就像一个纯函数<code>const babel = code =&gt; code</code>一样，只负责解析然后生成代码。要实现具体的转换功能，需要添加和使用插件（plugins）。
例如，要将箭头函数转换为普通函数，可以使用官方提供的<code>@babel/plugin-transform-arrow-functions</code>插件<a href="https://www.xuwenchao.site/blogs/babel.html">1</a>。每个插件负责特定类型的语法转换，开发者可以根据需要添加相应的插件。</p>

<h3>presets（预设）</h3>

<p>如果要编译一个完整的应用，单独配置每个所需的插件会非常繁琐。为了解决这个问题，Babel 引入了 presets（预设）的概念<a href="https://www.xuwenchao.site/blogs/babel.html">1</a>。
presets 可以理解为 plugins 和部分配置的集合，使用预设可以避免单独配置每个 plugin 和参数，直接使用已经组合好的配置即可<a href="https://www.xuwenchao.site/blogs/babel.html">1</a>。常见的预设包括<code>@babel/preset-env</code>、<code>@babel/preset-react</code>等。</p>

<p>@babel/preset-env 包含以下插件：</p>

<ul>
<li>@babel/plugin-transform-template-literals</li>
<li>@babel/plugin-transform-literals</li>
<li>@babel/plugin-transform-function-name</li>
<li>@babel/plugin-transform-arrow-functions</li>
<li>@babel/plugin-transform-block-scoped-functions</li>
<li>@babel/plugin-transform-classes</li>
<li>@babel/plugin-transform-object-super</li>
</ul>


<p>@babel/preset-react 包含以下插件：</p>

<ul>
<li>@babel/plugin-syntax-jsx</li>
<li>@babel/plugin-transform-react-jsx</li>
<li>@babel/plugin-transform-react-display-name</li>
</ul>


<h2>生成（Code Generation）</h2>

<p>最后一个阶段是根据转换后的 AST 生成新的代码字符串。这一过程包括将 AST 中的每个节点映射回字符串形式，并生成源码映射（source maps）。</p>

<h1>结论</h1>

<p>Babel 作为现代前端开发的重要工具，为开发者提供了使用最新 JavaScript 特性的能力，同时保证了代码在各种浏览器环境中的兼容性。深入理解 Babel 的基本概念、工作流程和使用方法，对于前端开发者提升开发效率和代码质量有着重要意义。</p>

<p>从入门的基本使用，到进阶的插件开发，再到专业的性能优化，Babel 的学习是一个循序渐进的过程。随着对 Babel 的不断深入学习和实践，开发者能够更加灵活地利用这一工具，构建更加现代化、高效的前端应用。</p>

<h1>应用场景</h1>

<ul>
<li>编辑器</li>
<li>LSP language server protocol</li>
<li>语法高亮，自动补全</li>
<li>静态代码分析</li>
<li>代码转换</li>
<li>代码压缩和优化</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[道金斯《自私的基因》读后感]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/03/10/zisi-de-jiyin/"/>
    <updated>2025-03-10T00:10:07+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/03/10/zisi-de-jiyin</id>
    <content type="html"><![CDATA[<!-- more -->


<h3><strong>一、核心理论框架</strong></h3>

<ol>
<li><p><strong>自然选择的真正单位</strong></p>

<ul>
<li>达尔文进化论升级版：自然选择作用于基因（而非个体/物种）</li>
<li>基因本质：自私的分子程序，唯一目标是自我复制与永续存在</li>
<li>生命体定位：基因的"生存机器"，如鱼是游动的基因载体，鸟是飞行的基因载体</li>
</ul>
</li>
<li><p><strong>利他行为的基因逻辑</strong></p>

<ul>
<li>表面矛盾：羚羊跳跃示警看似牺牲，实为展示体能（降低被捕食概率）</li>
<li>终极本质：所有行为（包括利他）均为基因延续服务，不存在纯粹无私</li>
<li>零阶道理：基因选择。一阶道理：利他行为，羚羊跳跃提醒同伴，互利行为。</li>
</ul>
</li>
</ol>


<h3><strong>二、四大生物学谜题解析</strong></h3>

<h4><strong>1. 衰老与死亡的基因密码</strong></h4>

<ul>
<li> 致死基因筛选机制：

<ul>
<li>早发致死基因（如幼年癌症基因）→ 被自然选择淘汰</li>
<li>晚发致死基因（如老年疾病基因）→ 成功遗传（因已完成生育）</li>
</ul>
</li>
<li> 延长寿命的可能路径：

<ul>
<li>延迟生育策略（理论可行但无现实操作性）

<ul>
<li>禁止人40岁之前生育，经过自然选择，可以让一些重病推迟到人年龄大的时候发生。</li>
</ul>
</li>
<li>欺骗基因识别系统（如干预衰老标志物研究）</li>
</ul>
</li>
</ul>


<h4><strong>2. 两性生殖的进化困境</strong></h4>

<ul>
<li> 基因视角的生殖悖论：

<ul>
<li>有性生殖成本：后代仅继承50%基因 + 择偶竞争消耗</li>
<li>基因操控真相：性基因强制其他基因配对交换（如同公交车强制换客）</li>
</ul>
</li>
<li> 对比案例：蚜虫无性生殖的高效 vs 人类有性生殖的普遍性</li>
</ul>


<h4><strong>3. 亲缘关系的数学本质</strong></h4>

<ul>
<li><p> 亲疏量化模型：</p>

<table>
<thead>
<tr>
<th> 亲属关系 </th>
<th> 基因相似度 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 子女/同胞 </td>
<td> 50% </td>
</tr>
<tr>
<td> 孙辈/祖辈 </td>
<td> 25% </td>
</tr>
<tr>
<td> 表亲 </td>
<td> 12.5% </td>
</tr>
</tbody>
</table>
</li>
<li><p> 亲属偏好现象解释：</p>

<ul>
<li>母系识别优势：姥姥 > 奶奶（确定性：女儿生育 > 儿子生育）</li>
<li>投资策略演化：母亲偏袒幼子（资源集中投资生存率最低者）</li>
</ul>
</li>
</ul>


<h4><strong>4. 突破基因控制的可能</strong></h4>

<ul>
<li> 意识革命：人类大脑产生自主决策能力（基因编程的意外产物）</li>
<li> 反抗途径：

<ul>
<li>文化教育：构建利他主义社会规范（如计划生育对抗繁殖本能）</li>
<li>表观遗传学：环境改变基因表达（后书时代的科学进展）</li>
</ul>
</li>
<li> 对于不婚不育群体，基因不在乎，因为他们会被淘汰。</li>
</ul>


<h3><strong>三、延伸思考与启示</strong></h3>

<ol>
<li><p><strong>生命观重构</strong></p>

<ul>
<li>基因永生：个体生命短暂，基因链永恒延续</li>
<li>存在意义：生命本质是基因传递的载体程序</li>
</ul>
</li>
<li><p><strong>社会行为解码</strong></p>

<ul>
<li>爱情本质：基因匹配的生物学冲动</li>
<li>道德起源：基因为保障群体存续衍生的合作策略</li>
</ul>
</li>
<li><p><strong>人类特殊性</strong></p>

<ul>
<li>意识特权：唯一能理解自身基因机制并反抗的生物</li>
<li>文明意义：通过教育/科技构建"超基因文明"的可能性</li>
</ul>
</li>
</ol>


<h3><strong>四、关键金句（适用于传播）</strong></h3>

<ol>
<li>&ldquo;我们不是基因的主人，而是它精心打造的生存机器&rdquo;</li>
<li>&ldquo;母爱是基因写就的投资算法，亲情是相似DNA的相互识别&rdquo;</li>
<li>&ldquo;生物学没有无私，只有伪装成高尚的精密算计&rdquo;</li>
<li>&ldquo;人类最伟大的进化成就，是获得了反抗造物主（基因）的思维能力&rdquo;</li>
</ol>


<h3><strong>五、人生的意义</strong></h3>

<p>虽然一些美好的现象被基因控制，但是，我们宁愿相信不是这样的，除非我们能找到除此之外的人生的意义，不然活着就没有意义了。</p>

<p>还有一个类似的问题，就是自由意志。虽然科学一再证实，人类没有自由意志。但是，我们宁愿相信人有自由意志，因为这样活着才有意义。</p>

<p>这个也可以从基因的角度理解一下，人分成两类，一类相信人有自由意志，一类不相信人有自由意志。也许最终胜出的就是相信自由意志的人，也就是我们这些人。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[李俊慧的经济学]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/03/09/lijunhui-jingjixue/"/>
    <updated>2025-03-09T11:07:39+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/03/09/lijunhui-jingjixue</id>
    <content type="html"><![CDATA[<!-- more -->


<p>以下是整理后的经济学课程核心观点框架，按逻辑结构组织：</p>

<h3>一、科学方法论与经济学基础</h3>

<ol>
<li><p><strong>科学方法论</strong></p>

<ol>
<li>假设：归纳总结出该领域的“公理”（如理性人）</li>
<li>逻辑演绎：根据公理进行逻辑推理，得到一些定理。这一部分可长可短，不是必须的。（数学建模）</li>
<li>事实验证：根据事实或者实验结果验证前两步得到的结论（公理和定理）（证伪导向）</li>
</ol>
</li>
<li><p><strong>科学本质</strong></p>

<ul>
<li>科学理论核心标准：可证伪性（波普尔）＞可度量性</li>
<li>有效假设特征：体系完备性＞前提正确性（如中医阴阳五行/经济学的理性人假设）</li>
<li>奥卡姆剃刀原则：简单有效理论优先（供需理论＞复杂消费者理论）</li>
<li>科学和正确的四种象限关系：科学正确＞科学错误＞非科学正确＞非科学错误

<ul>
<li>四脚动物有四条腿，不具有可证伪性。</li>
<li>进化论也不具有可证伪性！</li>
</ul>
</li>
<li>质疑第一步的假设是不科学的。只能通过第三部来验证第二步的结论。可证伪性是第三阶段要做的事情，需要提出一个逆反命题来作为证伪的入口。</li>
</ul>
</li>
<li><p><strong>警惕经济学中常见的"伪科学"特征</strong></p>

<ul>
<li>套套逻辑（同义反复）</li>
<li>不可证伪命题（如行为经济学陷阱中的"有时理性有时非理性"）</li>
</ul>
</li>
</ol>


<h3>二、核心经济理论体系</h3>

<h4>价格理论框架</h4>

<ul>
<li> 需求定律本质：</li>
<li> 相对价格＞货币价格</li>
<li> 需求变化≠需求量变化</li>
<li> 边际分析核心地位：筛选关键局限条件的数学工具（导数思维）</li>
</ul>


<h4>特殊物品辨析</h4>

<ul>
<li> 吉芬物品悖论：市场自淘汰机制（类似基因选择）</li>
<li> 奢侈品功能：降低陌生人社会的信息费用</li>
<li> 贫穷物品，富裕物品：需求曲线的不同弹性</li>
</ul>


<p>以上例子都是试图推翻需求定律。也许有些人确实会在物品相同的情况下买贵的东西，但是这种人很快就会消失在市场中。这就像不自私的基因会被淘汰一样。</p>

<blockquote><p>与此类似，不婚不育是某些年轻人的观念，对于这一点我不担心，因为这种人会在自然选择之下会消失。</p></blockquote>

<p>消费者理论太复杂，供需理论简单有效，根据奥卡姆剃刀原则，我们应该选择供需理论。</p>

<ol>
<li><strong>均衡观革新</strong>

<ul>
<li>任何状态都是均衡：含交易费用的理性选择结果。</li>
<li>非均衡状态是对物理学的拙劣模仿，任何选择都是理性的选择，考虑了交易城本，是边际分析法。任何时候都是均衡的。</li>
<li>非均衡是错误的，但是可以用来快速判断一个结论是否正确。

<ul>
<li>如果非均衡，那么一定有什么边界条件没有说清楚，你要相信，现在的状态就是理性（自私）选择的结果。</li>
<li>澳门伴手礼香气周围门店没有跟风，就是非均衡，肯定还有什么原因没有找到。</li>
</ul>
</li>
</ul>
</li>
</ol>


<h3>三、政府干预批判</h3>

<ol>
<li><p><strong>价格管制后果</strong></p>

<ul>
<li>典型案例：</li>
<li>限广令→视频平台崛起</li>
<li>义务教育→私立学校/学区房溢价</li>
<li>医疗价格管制→以药养医/检查泛滥

<ul>
<li>医生收红包 -> 国家禁止收红包 -> 以药养医，租值消散更大，解释为什么药物价格这么贵 -> 国家药价管制 -> 医生多开检查 -> 租值消散越来越大</li>
</ul>
</li>
<li>租值消散规律：管制强度与寻租方式正相关</li>
</ul>
</li>
<li><p><strong>管制本质辨析</strong></p>

<ul>
<li>产权视角：医生vs加油站员工收红包的本质差异

<ul>
<li>医生收红包和加油站员工收红包本质不同，因为产权归属不同。医生是产权人，不是腐败，睁一只眼闭一只眼，加油站员工不是产权人，是腐败，要消灭。</li>
</ul>
</li>
<li>&ldquo;免费最贵"定理：货币支付是租值消散最小方式</li>
</ul>
</li>
</ol>


<h3>四、制度经济学洞见</h3>

<ol>
<li><p><strong>法律经济分析</strong></p>

<ul>
<li>恶法悖论：</li>
<li>严格执行→租值消散</li>
<li>松散执行→法律权威受损</li>
<li>恶法，不是无知就是无耻</li>
<li>计划生育废除阻力：部门生存逻辑</li>
</ul>
</li>
<li><p><strong>计划与市场边界</strong></p>

<ul>
<li>科斯定理应用：企业规模受内部交易费用限制</li>
<li>列宁式计划经济的根本缺陷：忽略规模不经济</li>
</ul>
</li>
</ol>


<h3>五、经济学思维工具</h3>

<ol>
<li><p><strong>分析框架转换</strong></p>

<ul>
<li>实证分析三步法：
① 物理现象（为什么发生）
② 经济动机（为何选择）
③ 伦理评判（是否应该）</li>
<li>数据使用警示：</li>
<li>警惕精确错误＞接受模糊正确</li>
<li>区分因果与相关</li>
</ul>
</li>
<li><p><strong>概念革新</strong></p>

<ul>
<li>经济理性≠日常自私：包含所有可解释行为</li>
<li>歧视合理性：能力证明＞强制平等</li>
</ul>
</li>
</ol>


<h3>六、学科发展批判</h3>

<ol>
<li><strong>理论流派评析</strong>

<ul>
<li>推崇学派：马歇尔局部均衡/弗里德曼货币理论/张五常制度分析</li>
<li>批判对象：</li>
<li>瓦尔拉斯一般均衡（脱离现实）</li>
<li>凯恩斯主义（人为割裂微观宏观）</li>
</ul>
</li>
</ol>


<h3>七、实然问题与应然问题的分析框架</h3>

<p><strong>案例：人从楼上抛掷垃圾</strong><br/>
1. <strong>学科视角划分</strong><br/>
   - <strong>物理学（实然解释）</strong><br/>
     研究现象规律：垃圾下落因地球引力作用<br/>
     → 回答"为什么发生"<br/>
   - <strong>经济学（实然解释）</strong><br/>
     分析行为动机：抛掷垃圾因私人成本＜环境成本（负外部性）<br/>
     → 回答"为何选择"<br/>
   - <strong>伦理学（应然判断）</strong><br/>
     价值评判：破坏公共环境应受谴责<br/>
     → 回答"是否应该"</p>

<ol>
<li><strong>方法论转换</strong>

<ul>
<li>规范命题实证化路径：<br/>
① 明确价值标准（如"社会总福利最大化"）<br/>
② 构建可检验假说（如"禁止抛掷可使空气质量提升X%&ldquo;）<br/>
③ 进行事实验证（污染数据对比/治理成本测算）</li>
<li>关键突破：将道德判断转化为可证伪的成本收益分析</li>
</ul>
</li>
</ol>


<h3>八、其它</h3>

<ol>
<li>统计学的两个问题

<ul>
<li><ol>
<li>错把相关性当因果性。</li>
</ol>
</li>
<li><ol>
<li>迷信数据。数据不一定代表整个状态空间。</li>
</ol>
</li>
</ul>
</li>
<li>弗里德曼对大萧条的解释才是正统的，凯恩斯的解释是非正统的。</li>
<li>不能看到一个犯罪就杀头，这样轻罪重罪都是一样的惩罚，那么重罪比例就会上升。如果一个人犯错了，就会上升到犯重罪。比如陈胜吴广起义，他们是因为犯了轻罪，就要被处死，所以干脆就起义了。</li>
<li>经济学中的自私其实和我们生活中的自私不一样，只要是可解释的，就是自私的。这样说，其实用理性更合适。</li>
<li>自然科学领域科学方法风气好，不用去学习科学方法论，只用随大流就可以。经济学领域科学方法风气不好，需要通过学习科学方法论，来提高自己的辨别能力。</li>
</ol>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[精英日课笔记]]></title>
    <link href="http://hongchaozhang.github.io/blog/2025/01/07/jingying-rike-notes/"/>
    <updated>2025-01-07T23:41:38+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2025/01/07/jingying-rike-notes</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>认知闭合</h2>

<p>认知闭合需求指的是人们需要因果关系的解释和可预测性。</p>

<p>比如讲故事必须传递一个明确的意义。传统音乐和爵士乐在这方面有所不同。</p>

<ul>
<li>传统音乐通常是线性的，有明确的主题和发展，</li>
<li>爵士乐则是开放式的，更注重即兴和变化。</li>
</ul>


<h2>怎样激励10到25岁青少年</h2>

<p>激励10到25岁青少年，要注意避免导师悖论，尽量做到提供“智者的反馈”。</p>

<p>具体来说，可以使用以下策略：</p>

<ol>
<li>告诉他们：“我给你这些评语是因为我有很高的标准，我知道你能达到这些标准。”</li>
<li>询问而不是告知，尊重并承认对方的主观能动性。</li>
<li>共同寻找前进的方向。</li>
<li>只提供建议，不帮他们做决定，让他们自己做决定。</li>
<li>在提出批评建议的时候，要用夸奖三明治等技巧。

<ol>
<li>夸奖三明治：先夸奖，再提出批评，最后再夸奖。</li>
</ol>
</li>
</ol>


<h2>可扩展的事情（Scaling Law）</h2>

<ul>
<li>可扩展的事情值得多投入，而不可扩展的事情则不值得投入更多精力，比如吃好吃的和健身等。</li>
<li>任何事情都不是一直可扩展的，因此我们要寻找一个高上限的事情来做。</li>
</ul>


<h2>智人之上</h2>

<ul>
<li>在真相和秩序之间需要找到平衡。</li>
<li>罗素曾说过：“我不敢让人因为我的理念去死，因为我不确定我的理念是正确的。”这句话体现了政治家和科学家的区别。</li>
</ul>


<h2>挑战还是威胁？</h2>

<ul>
<li>挑战能够促进人的发挥，而威胁则只能限制人的发挥。</li>
<li>奖励第一名是一种挑战，而淘汰最后一名则是一种威胁。</li>
<li>通过控制感可以将威胁转化为挑战。</li>
</ul>


<h2>格拉德威尔</h2>

<ul>
<li>格拉德威尔提出了引爆点和10000小时理论，</li>
<li>强调了超故事、理想叙事和潜规则。</li>
<li>他还提出了三分之一定律，指出群体中的少数人会做更多的事情。</li>
</ul>


<h2>歧视和公平</h2>

<ul>
<li>在汽车尾气检测中，有一种仪器可以在路上精准检测尾气排放量，从而抓到排放不合格的车主。然而，这种方法可能会被认为是对穷人的歧视，因此要求所有人都去做检测。</li>
<li>在新冠疫情中，有更有效的检测办法，比如肥胖和唾液粘稠的人更容易产生空气溶胶，助力病毒传播，但这种方法也可能被认为是对肥胖和唾液粘稠者的歧视。</li>
</ul>


<h2>诺贝尔奖</h2>

<ul>
<li>诺贝尔物理奖得主通常是圈内人，不能闭门造车、两耳不问天下事、一心只读圣贤书。</li>
<li>相反，圈内人并不是腐败，而是因为他们有眼界、知主流，并且有高人指点。</li>
<li>文学奖则不完全是这样。</li>
</ul>


<h2>其它</h2>

<p>心流，及时反馈，产生 “努力-爽-努力-爽” 的节奏感</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[汪诘-科学故事解读]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/10/31/wangjie-kexue-gushi-jiedu/"/>
    <updated>2024-10-31T23:53:57+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/10/31/wangjie-kexue-gushi-jiedu</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>《皇帝的新脑》- 罗杰·彭罗斯</h2>

<p>共10章，前八章都是在讲历史，做铺垫。第9章才入正题。</p>

<p>《皇帝的新脑》是由英国数学物理学家罗杰·彭罗斯（Roger Penrose）所著的一部跨学科的著作，涉及电脑科学、数学、物理学、宇宙学、神经和精神科学以及哲学等多个领域。这本书体现了作者向哲学上最大问题——“精神-身体关系”挑战的大无畏精神，并充满了天才般的猜测，贯穿着探索真理的灵感和激情。</p>

<p>书中广泛讨论了现代物理学中对人类观念最具挑战性的问题，例如人工智能、哥德尔定理、复杂性理论、相对论因果性和决定论、时空弯曲、不确定性原理、量子场论、熵和时间箭头、宇宙论和大爆炸、精神与意识的本质、动物意识、宿命论、人择原理等等。同时，书中还包含了许多能激发想象力的数学物理模型，如图灵机、孟德勒伯洛特集、希尔伯特空间、爱因斯坦-玻多尔斯基-罗逊“矛盾”、薛定谔猫等等。</p>

<h2>四种基本力</h2>

<p>四种基本力的发现顺序如下：</p>

<ol>
<li>万有引力（Gravitational Force）：万有引力是最早被人类认识到的基本力。艾萨克·牛顿在1687年发表了《自然哲学的数学原理》，其中提出了万有引力定律，描述了物体之间的引力作用。</li>
<li>电磁力（Electromagnetic Force）：电磁力的发现稍晚于万有引力。1865年，麦克斯韦提出了描述电磁场的麦克斯韦方程组，统一了电和磁的现象。</li>
<li>强力（Strong Nuclear Force）：强力是维持原子核内部质子和中子结合在一起的力。20世纪30年代，核物理学家开始研究原子核的结合能问题，发现了强力的存在。强力的现代理论是在20世纪60年代和70年代发展起来的量子色动力学（QCD）。</li>
<li>弱力（Weak Nuclear Force）：弱力是四种力中最后被发现的。它负责某些类型的放射性衰变过程。弱力的现代理论是在20世纪60年代和70年代，与电磁力一起被统一在电弱理论中。</li>
</ol>


<h2>人择原理</h2>

<p>说到“人择原理”，我们一般说的是“弱人择原理”：</p>

<ul>
<li>我们存在于这个宇宙中，是因为这个宇宙的物理定律和常数恰好允许我们的存在。换句话说，我们观察到的宇宙特性之所以是这样的，是因为如果不是这样，我们就不会在这里观察它。这个原理强调了观察者存在的事实对宇宙特性的限制。</li>
</ul>


<p>除此之外，还有强人择原理和最终人择原理。</p>

<ul>
<li>强人择原理认为宇宙必须具备允许智慧生命在其某个历史阶段得以在其中发展的那些性质。这个原理认为，宇宙的基本物理常数和定律之所以是这样，是因为它们必须如此，以便能够产生智慧生命。</li>
<li>最终人择原理认为，包含智慧的信息处理过程一定会在宇宙中出现，而且，它一旦出现就不会灭亡。这个原理在某种程度上预言了智慧生命的不可避免性和永恒性。</li>
</ul>


<h2>测不准原理</h2>

<p>测不准原理，说法不合适，更准确的说法是“不确定性原理”。并不是“测不准”，而是客观世界就“不确定”。</p>

<p>根据不确定性原理，拉普拉斯（拉普拉斯妖）是无法精确预测未来的。
虽然我们无法精确预测未来，但是，我们可以预测未来的概率。</p>

<p>量子力学的两道门槛：不连续性，不确定性。
爱因斯坦和薛定谔迈过了第一道门槛，却倒在了第二道门槛上。</p>

<h2>弗里德曼-勒梅特宇宙模型</h2>

<p>弗里德曼-勒梅特宇宙模型基于爱因斯坦的广义相对论，描述了一个均匀各向同性的宇宙。以下是三种主要的宇宙模型，它们预测了宇宙膨胀的不同情况：</p>

<ol>
<li>开放宇宙模型（K=-1）：在这个模型中，宇宙的曲率为负，意味着宇宙是无限且膨胀的。宇宙的膨胀速度快，并且会一直持续下去。这个模型对应于三维双曲空间。</li>
<li>平坦宇宙模型（K=0）：这个模型中，宇宙的曲率为零，意味着宇宙是平坦的。宇宙的膨胀速度较慢，但也会一直持续下去。这个模型对应于三维平直空间，也被称为爱因斯坦-德西特宇宙。</li>
<li>闭合宇宙模型（K=1）：在这个模型中，宇宙的曲率为正，意味着宇宙是有限且膨胀的。宇宙的膨胀会减慢到一定限度后出现胀缩交替情况，对应于三维球面空间。这个模型预测宇宙会经历膨胀和收缩的周期性过程。</li>
</ol>


<h2>其它</h2>

<ul>
<li>哈勃红移的原因不是多普勒效应，而是宇宙膨胀，只是当时还不知道</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[吴国盛-科学简史]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/10/13/wuguosheng-kexuejianshi/"/>
    <updated>2024-10-13T23:28:59+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/10/13/wuguosheng-kexuejianshi</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>引言</h2>

<p>在《科学简史》的课程中，我们探讨了科学与技术的历史分野，以及为何中国古代科技在近代相对落后。这些问题的探讨，不仅涉及科学与技术的定义，还涉及了文化、哲学和历史等多个层面。</p>

<h2>科学与技术的区别</h2>

<p>首先，我们需要明确科学与技术的区别。科学是基于希腊数理实验的系统知识体系，而技术则是具体的应用实践。</p>

<p>中国古代的四大发明（造纸术、印刷术、火药、指南针）虽然在技术上领先世界，但它们更多体现的是技术层面的成就，而非科学。</p>

<h2>科学的定义</h2>

<p>科学可以被分为三种形态：</p>

<ul>
<li>古希腊的纯粹数理逻辑科学。</li>
<li>欧洲结合数理逻辑和宗教的唯命论产生的数理实验科学，即现代科学。

<ul>
<li>唯命论推出以人为本，以人为本成为后来科学发展的基石之一。</li>
</ul>
</li>
<li>博物学和自然志，这在中国文化中有着深厚的根基。

<ul>
<li>nature history，自然志。这里的history没有时间概念。</li>
<li>博物学最伟大的产出是进化论。</li>
</ul>
</li>
</ul>


<h2>科学的数学化过程</h2>

<p>科学的数学化过程是科学发展史上的一个关键转变，它涉及到将自然现象用数学语言描述和分析。以下是从几个关键人物的角度来概述这一过程：</p>

<ol>
<li>毕达哥拉斯（Pythagoras）：
 毕达哥拉斯生活在公元前6世纪，是古希腊哲学家和数学家，他提出了“数即自然，自然皆数”的观点，即认为数字关系是理解宇宙的关键。毕达哥拉斯学派相信宇宙的秩序和和谐可以通过数学关系来解释。这一观点为后来的科学数学化奠定了基础。</li>
<li>阿基米德（Archimedes）：
 阿基米德生活在公元前3世纪，是古希腊的数学家、物理学家和工程师，他在几何学、力学和流体静力学等领域做出了重要贡献。阿基米德的工作展示了如何用数学原理来解决物理问题，比如他通过浮力原理（阿基米德原理）来计算物体的体积和密度，这进一步推动了科学数学化的发展。</li>
<li>托勒密（Ptolemy）：
 托勒密是罗马时期的希腊天文学家和地理学家，生活在公元2世纪，是古希腊的天文学家和地理学家，他的《天文学大成》提出了地心说模型，即认为地球是宇宙的中心，其他天体围绕地球运动。托勒密的模型虽然在科学上不正确，但它尝试用数学方法来描述天体运动，这在数学化天文学方面是一个重要的步骤。</li>
<li>哥白尼（Copernicus）：
 哥白尼是文艺复兴时期的波兰天文学家，生活在15世纪末至16世纪中叶。他提出了日心说，即太阳是宇宙的中心，地球和其他行星围绕太阳运动。哥白尼的模型更接近现代天文学的理解，并且他的工作标志着科学数学化在天文学领域的重大突破。</li>
<li>开普勒（Kepler）：
 开普勒是德国天文学家和数学家，生活在16世纪末至17世纪初。他通过分析第谷·布拉赫的天文观测数据，提出了开普勒行星运动三大定律。这些定律用数学公式精确描述了行星围绕太阳的运动，是科学数学化在天文学领域的又一个里程碑。</li>
<li>伽利略（Galileo）：
 伽利略是意大利的物理学家、数学家、天文学家和哲学家，生活在16世纪末至17世纪中叶，他被认为是现代科学的奠基人之一。伽利略将运动数学化，通过实验和数学分析来研究物体的运动规律。他的工作，如对自由落体的研究，展示了如何用数学方法来描述和预测自然现象，这为后来的物理学奠定了基础。</li>
<li>艾萨克·牛顿（Isaac Newton）
 牛顿是17世纪的英国物理学家、数学家、天文学家、自然哲学家和炼金术士。他在1687年发表的《自然哲学的数学原理》中提出了三大运动定律和万有引力定律，这些定律构成了经典力学的基础。</li>
</ol>


<p>总的来说，科学的数学化过程是一个逐渐发展的过程，从毕达哥拉斯的哲学观点到伽利略的实验科学，每一步都深化了我们对自然现象数学描述的理解。这一过程不仅推动了科学的发展，也改变了我们对世界的认识方式。</p>

<h2>中国古代科学的发展</h2>

<p>中国古代的科技名著，如《本草纲目》、《齐民要术》等，展现了中国古代在博物学领域的深厚积累。然而，由于缺乏对客观规律的承认和对数理逻辑的深入研究，中国古代的科学发展受到了限制。</p>

<h2>科学与文化的关系</h2>

<ol>
<li>实验科学是拷问自然的过程，让自然“说出”自己的规律（相比较而言，艺术则是观察自然。）。实验科学和自然之间是竞争控制关系，希望能通过博物学进行化解。而这，就是中国文化的特点。</li>
<li>美国打仗号召：为自由而战。中国打仗号召：为保家卫国而战。</li>
<li><strong>几何学的证明思维，是中国文化中没有的</strong>。中国的推理，是诗人般的推理：赋比兴。善于用类比做推理。这种类比的推理是不严密的，是不同的人能得出不同的结论的。</li>
<li>中国天文学是政治占星术。中国的天文学是为了政治服务的，而不是为了纯粹的科学研究。</li>
<li>中国没有科学，原因是中国就不承认有客观规律的存在，天人合一，相互影响。中国没有对数理逻辑的深入研究。</li>
</ol>


<h2>时空观</h2>

<p>时间观的历史发展是一个复杂而丰富的过程，它涉及了哲学、物理学、宗教和文化等多个领域。以下是对时间观历史发展的整理：</p>

<ol>
<li>循环时间观：在古代，许多文化中时间被视为循环的。例如，希腊人和印度佛教徒都认为时间是循环的，历史和宇宙以一定的周期重复自身。这种观念在印度教和婆罗门教中表现得尤为明显，他们认为宇宙的结构具有数学的精确性，其基础是圆的形象和有限事物的无限重复性</li>
<li>线性时间观：与循环时间观相对的是线性时间观，这种观念在希伯来文化中尤为突出。基督教继承并改造了这种时间观，将时间视为从创世到末日审判的直线过程，强调了时间的方向性和未来的重要性</li>
<li>牛顿的绝对时间观：在科学领域，牛顿提出了绝对空间和绝对时间的概念，认为时间和空间与物质的运动无关，是独立存在的。牛顿力学中的方程并不包含时间的方向性，这导致了时间在物理定律中似乎是可逆的</li>
<li>热力学时间方向性：热力学的发展为时间观带来了新的理解。热力学第二定律，即熵增定律，指出在孤立系统中熵不会减少，这为时间提供了一个明确的方向性。玻尔兹曼的研究进一步将熵与微观状态的概率联系起来，揭示了热力学第二定律的统计本质</li>
<li>相对论时间观：爱因斯坦的相对论进一步挑战了牛顿的绝对时间观。在相对论中，时间不再是独立的实体，而是与空间结合形成了时空结构。时间在不同的重力场和速度下会有所不同，这表明时间是相对的，而非绝对的</li>
<li>时间的现代理解：随着量子力学和宇宙学的发展，时间的概念继续演变。例如，宇宙学时间箭头指向宇宙膨胀的方向，而热力学时间箭头则与熵增相关。此外，心理学和认知科学也开始探索人类如何感知和理解时间</li>
</ol>


<p>总的来说，时间观的历史发展是一个从宗教和哲学的循环或线性时间观，到科学领域的绝对和相对时间观，再到现代物理学中更为复杂和动态的时间理解的过程。这些不同的时间观反映了人类对时间本质的不断探索和理解。</p>

<h2>决定论与机械论的历史发展</h2>

<ol>
<li>笛卡尔（René Descartes）是17世纪的法国哲学家、数学家和科学家。他提出了“机械论”（mechanism）的观点，认为自然界的运行就像一台机器，可以通过数学和几何来解释。这种机械论的观点对后来的科学发展产生了深远的影响，推动了科学的数学化和实验化。他的这种思想非常超前，以至于跳过了牛顿的阶段，与爱因斯坦的广义相对论有相似之处。</li>
<li>牛顿（Sir Isaac Newton）是17世纪的英国物理学家、数学家和天文学家。牛顿的力学体系是机械决定论的典型代表。牛顿力学认为，知道了物体的初始条件和作用在物体上的力，就可以准确预测物体未来的运动状态。牛顿的万有引力定律进一步强化了这种决定论观点，使得天体运动可以被精确计算和预测。</li>
<li>拉普拉斯（Pierre-Simon Laplace）是18世纪末至19世纪初的法国数学家和天文学家。拉普拉斯提出了著名的拉普拉斯决定论（拉普拉斯妖），他认为如果一个智者能够知道某一时刻宇宙中所有粒子的位置和速度，那么他就能够预测宇宙在任意时刻的状态。这种观点是建立在经典力学可逆过程的基础上的。</li>
</ol>


<p>随着20世纪量子力学的发展，这种严格的决定论受到了挑战，因为量子力学揭示了自然界的随机性和不确定性。尽管如此，机械论和决定论在宏观尺度上仍然具有重要的科学价值。</p>

<h2>其它</h2>

<ul>
<li>希腊的数学不是现代数学。

<ul>
<li>希腊数学是和真实场景绑定，没有进行进一步抽象，所以才说音乐是数学，物理学（比如力学）是数学，天文学是数学。</li>
<li>现代数学专指抽象的数学，是纯粹的数学，目的是为了推广数学的应用范围。音乐物理天文不再称为数学。</li>
</ul>
</li>
<li>李约瑟难题：中国古代科技很发达，为什么近代落后了？

<ul>
<li>这个命题有问题，以技术代科学。</li>
<li>冯友兰，竺可桢的说法更加可信：中国古代为什么没有科学？这才是比较严格的命题和论证。</li>
</ul>
</li>
</ul>


<h2>结语</h2>

<p>通过《科学简史》的学习，我们不仅了解了科学与技术的历史分野，还深入探讨了科学在不同文化和历史背景下的发展。这些知识不仅丰富了我们的历史视野，也为我们理解现代科学提供了深刻的洞见。科学的发展是一个不断进化的过程，它与我们的文化、哲学和历史紧密相连，共同塑造了我们对世界的理解。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[汪诘-科幻世界漫游指南]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/10/12/wangjie-kehuanshijie-manyouzhinan/"/>
    <updated>2024-10-12T22:36:27+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/10/12/wangjie-kehuanshijie-manyouzhinan</id>
    <content type="html"><![CDATA[<!-- more -->


<p>在探索科学的无限可能中，我们总是被那些将想象力与科学原理完美结合的作品所吸引。今天，让我们一同回顾那些在科幻世界中留下深刻印记的作品和概念。</p>

<h2>儒勒·凡尔纳与H.G.威尔斯</h2>

<h3>儒勒·凡尔纳</h3>

<p>凡尔纳是19世纪著名的法国小说家、剧作家及诗人，被誉为“现代科幻小说之父”。凡尔纳以其丰富的想象力和对科学的深刻理解，创作了一系列令人着迷的冒险故事，包括《海底两万里》《八十天环游地球》《地心游记》等。</p>

<h3>H.G.威尔斯</h3>

<p>1898年，威尔斯以其《世界大战》震惊了世界，
1938年，根据《世界大战》改编的广播剧在美国播出时，由于描述过于逼真，甚至引起了公众的恐慌，这一事件也成为了美国历史上的一大离奇笑话。</p>

<h2>黄金年代的科幻巨匠</h2>

<h3>海因莱因</h3>

<p>罗伯特·海因莱因是科幻黄金年代的代表人物之一，他的作品深刻影响了后世的科幻创作。
海因莱因活跃于20世界50年代，曾三次成为世界科幻大会的嘉宾，多次获得雨果奖，并于1975年荣获一级大师星云奖。</p>

<h3>阿瑟·克拉克</h3>

<p>刘慈欣最崇拜的科幻作家。
阿瑟·克拉克以其《2001太空漫游》等作品闻名于世。这本书在1968年被导演斯坦利·库布里克拍摄成同名电影，成为科幻电影的经典名作。<strong>但是星童的设计过于玄幻。</strong></p>

<h3>艾萨克·阿西莫夫</h3>

<p>阿西莫夫活跃于20世界50年代，以其《基地》系列、《机器人》系列和《银河帝国》系列作品著称。基地系列7本(6本半)，机器人系列5本，银河帝国系列3本。</p>

<ol>
<li>在《基地》系列中，他构建了一个放大版的地球——银河帝国，<strong>被人诟病说是放大版的地球。</strong>尽管星际距离的交通方式缺乏科学依据，但晚年的补救解释（超空间，跃迁）使其设定更加自圆其说。</li>
<li>《基地》系列中的骡拥有心理控制术，<strong>太过于玄幻</strong>，但心理史学则是该系列的亮点，借鉴了十九世纪拉普拉斯的决定论。</li>
<li>《盖亚》系列则提出了一个超级生命体的概念，与《阿凡达》中的设定相似，探讨了人类解决终极生存问题的方法。不如此，必将被外星人利用，挑起内斗，导致人类灭亡。这个观点，<strong>正好和三体相反。</strong>三体则把人类这种互相看不透的现象当做和三体作战的最大武器。</li>
</ol>


<h2>卡尔·萨根：科学家与科幻作家</h2>

<p>卡尔·萨根不仅是一个科学家，也是一个科幻作家。他的《宇宙》节目旁白脚本被汇集成册，而他唯一的小说《接触》则探讨了超越数Pi中隐藏的宇宙信息。电影《超时空接触》，删除了小说中超越数相关的部分。</p>

<p>萨根对外星人持乐观态度，认为外星人是友好的，就像接触小说中描写的一样。他的METI行为——Messaging Extraterrestrial Intelligence，主动向地外智慧生命发送信息——引发了科学界的争议。METI国际组织致力于通过发送信息与外星生命进行交流，尽管这种行为存在潜在风险。其METI行为包括：</p>

<ul>
<li>1972年，为先驱者号探测器设计了一块铝板，上面绘制了地球人的形象以及太阳系在银河系中的位置信息。</li>
<li>1974年，用最大的射电望远镜把人类的信息发射到宇宙中。</li>
<li>1977年，将人类信息通过金唱片通过旅行者号飞出太阳系。</li>
</ul>


<h2>赛博朋克</h2>

<p>赛博朋克是科幻文学的一个子类型，以其对未来科技社会的深刻反思而闻名。</p>

<ul>
<li>真名实姓：赛博朋克的先驱之作。（反派大boss邮件人）</li>
<li>神经漫游者：一般人认为是赛博朋克的开山之作，其实更早的是《真名实姓》。</li>
<li>黑客帝国：巅峰之作。</li>
</ul>


<h2>其它</h2>

<p>光速：</p>

<ul>
<li>信息和能量不能超光速，空间膨胀可以。</li>
<li>光速c恒定，光速可能是一个几何常数，而不是一个物理常数。</li>
</ul>


<p>暗物质：不和电磁力发生作用，只和引力发生作用的物质。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[费曼漫谈科学研究]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/07/08/feiman-xiangxiangli/"/>
    <updated>2024-07-08T00:53:34+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/07/08/feiman-xiangxiangli</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>镜子颠倒了什么</h2>

<p>镜子是怎么知道只颠倒左右，不颠倒上下的？即使你躺下侧对着镜子，也是这样。
其实镜子并不对上下左右感兴趣，它只是颠倒了前后，所以产生了那个“左右颠倒，上下不颠倒”的现象。</p>

<h2>热的本质</h2>

<p>热的本质是分子的无规则运动。这一点可以解释很多现象。
试着解释：</p>

<ol>
<li>冰为什么这么滑：压力使冰表面融化</li>
<li>压缩使气体升温：</li>
<li>火</li>
</ol>


<h2>“观察”的本质</h2>

<p>我们周围的世界充满各种波长的波，我们的眼睛有选择的接收其中一部分，来分辨周围的物体以及发生的事情。
水面上角落里的一只昆虫，也在做类似的事情：通过分析水波，来“看到”水面上发生的一切。</p>

<h2>自我安慰</h2>

<p>想想宇宙的浩瀚，顿感人类的渺小。这时候，需要想一想原子的渺小，顿感自己是一个宇宙。我们处于这样一个中间态，是不是还挺幸运的。</p>

<h2>其它</h2>

<ul>
<li>我们应该用基本的力去解释生活中的现象，也不是反过来用生活中的现象去解释基本力。</li>
<li>天文学是需要想象力的领域，因为数据太少了。想象力使我们能够超前做出预测。</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[CSS resolution rules and specificity]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/06/17/css-resolution-rules-and-specificity/"/>
    <updated>2024-06-17T11:53:39+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/06/17/css-resolution-rules-and-specificity</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>Description</h2>

<p>The css property doesn&rsquo;t take effect in the release build but works fine in the debug build.</p>

<h2>Root cause</h2>

<p>We applied two css classes in one dom node and didn’t specify the priority (have the same css specificity (0,1,0)), thus the CSS class order matters: the latter one will override the previous one.</p>

<p>However, the css class order is not stable between the debug and release builds.</p>

<h2>Solution</h2>

<p>After fixing, the classes are like this:</p>

<p><img src="http://hongchaozhang.github.io/images/css-specificity-1.png" alt="css-specificity-1" /></p>

<p>We can use the scss file helper tools in VS Code:</p>

<p><img src="http://hongchaozhang.github.io/images/css-specificity-2.png" alt="css-specificity-2" /></p>

<p>Caution while nesting &amp; :</p>

<p><img src="http://hongchaozhang.github.io/images/css-specificity-3.png" alt="css-specificity-3" /></p>

<h2><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade</a></h2>

<p>When two rules from the same cascade layer apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.</p>

<p>There are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:</p>

<h3>Source order</h3>

<h3><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">Specificity</a></h3>

<ul>
<li>one identifier selector has 1-0-0 specificity</li>
<li>one class selector (attribute selector) has 0-1-0 specificity</li>
<li>one element selector has 0-0-1 specificity</li>
<li>The specificity weight of :not/:is/:has comes from the selector parameter in the list of selectors with the highest specificity.</li>
<li>Combinators, such as +, >, ~, &ldquo; &rdquo;, and ||, may make a selector more specific in what is selected but they don&rsquo;t add any value to the specificity weight.</li>
</ul>


<p><img src="http://hongchaozhang.github.io/images/css-specificity-4.png" alt="css-specificity-4" /></p>

<h3>Importance</h3>

<ul>
<li>inline style</li>
<li><code>!important</code>: DO NOT use <code>!important</code>. It makes the CSS hard to maintain and debug.

<ul>
<li>See a demo for <code>!important</code> <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important">here</a>.</li>
</ul>
</li>
</ul>


<h2>Other info</h2>

<p>The VS Code should have issues with “specificity” calculation.</p>

<p><img src="http://hongchaozhang.github.io/images/css-specificity-5.png" alt="css-specificity-5" /></p>

<p>The specificity should be 0-2-0.</p>

<p>More examples can be seen from here: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#three-column_comparison">Specificity</a></p>

<p><img src="http://hongchaozhang.github.io/images/css-specificity-6.png" alt="css-specificity-6" /></p>

<p>Some online css specificity calculator can be used for testing:</p>

<p><a href="https://specificity.keegan.st/">Specificity Calculator</a></p>

<h2>How to avoid such issues?</h2>

<ul>
<li>Make sure all the loaded CSSs have different css specificity.</li>
<li>Review the CSS in the developer tool.</li>
<li>For a specific css property, filter out all CSSs which contains it.</li>
<li>Make sure the CSS you want to apply have the highest css specificity.</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[how to start a python project]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/05/27/how-to-start-a-python-project/"/>
    <updated>2024-05-27T18:28:33+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/05/27/how-to-start-a-python-project</id>
    <content type="html"><![CDATA[<!-- more -->


<p>venv:</p>

<ul>
<li>venv (built-in): venv is a module in Python 3&rsquo;s standard library used to create lightweight virtual environments.</li>
<li>activate: <code>source venv/bin/activate</code></li>
<li>deactivate: <code>deactivate</code></li>
</ul>


<p>pyenv:</p>

<ul>
<li>python version control. Similar to nvm for node.js.</li>
<li>virtual env management. Similar to venv.</li>
</ul>


<p>pipenv:</p>

<ul>
<li>python package management. Similar to npm for node.js.</li>
<li>activate: pipenv shell</li>
<li>deactivate: exit</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Notes for Generative AI with LLMs]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/03/26/notes-for-generative-ai-with-llms/"/>
    <updated>2024-03-26T13:10:55+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/03/26/notes-for-generative-ai-with-llms</id>
    <content type="html"><![CDATA[<!-- more -->


<ul>
<li><a href="https://github.com/hongchaozhang/Course--Generative-AI-with-LLMs/blob/main/Notes%20for%20Course%20%22Generative%20AI%20with%20Large%20Language%20Models%22.md">Notes for Course &ldquo;Generative AI with Large Language Models</a></li>
<li><a href="https://github.com/hongchaozhang/Course--Generative-AI-with-LLMs/tree/main">github page</a></li>
<li></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[精英日课-道可道非常道]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/03/26/jingying-rike-daokedao-feichangdao/"/>
    <updated>2024-03-26T00:25:01+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/03/26/jingying-rike-daokedao-feichangdao</id>
    <content type="html"><![CDATA[<!-- more -->


<p>2023年3月15日，沃尔夫勒姆在自己的网站发表了一篇充满洞见的宝藏文章，展望了AI对人类社会 的影响。理解了沃尔夫勒姆的关键思想，你就会生出一种对未来世界的掌控感。</p>

<p>这篇文章包括三个核心观念：</p>

<ul>
<li>计算不可约性</li>
<li>计算等价原理</li>
<li>人的价值在于历史</li>
</ul>


<h2>计算不可约性</h2>

<h3>概念</h3>

<p>首先说一下什么叫约化。约化是用一个浓缩的陈述——可以说是一个理论、或者一个公式——概括一个现象，是对现实信息的压缩表达。我们的一切自然科学、社会科学理论，各种民间智慧、成语典故，我们总结出来的一切规律，都是对现实世界的某种约化。</p>

<p>你可能希望科技进步能约化一切现象，但现实恰恰相反。数学家早已证明，真正可约化的都要么是简单系统，要么是真实世界的一个简单的近似模型。一切足够复杂的系统都是不可约化的。比如三体问题。</p>

<p>因为计算不可约性，人类对世间万物的理解是不可穷尽的。这意味着不管科技多么进步、AI多么发达，世界上总会有对你和AI来说都是全新的事物出现，你们总会有意外和惊喜。</p>

<p>计算不可约性规定，人活着总有奔头。</p>

<h3>特点</h3>

<p>伴随计算不可约性的一个特点是，<strong>在任何一个不可约化的系统之中，总有无限多个「可约化的口袋 (pockets of computational reducibility)」</strong>。</p>

<p>这就意味着，虽然世界本质上是复杂和不可预测的，但我们总可以在里面做一些科学探索和研究，总结一些规律，说一些话，安排一些事情。绝对的无序之中存在着无数个相对的秩序。</p>

<p>而且既然可约化的口袋有无限多个，科学探索就是一门永远都不会结束的事业。</p>

<h3>意义</h3>

<p>计算不可约性还意味着，我们不可能彻底“管住”AI。</p>

<p>未来AI跟我们真正的关系不是降临、不是拯救也不是幸存，而是「共存」。我们要学习跟AI共 存，AI也要也跟我们、跟别的AI共存。</p>

<p>计算不可约性说明，凡是能写下来的规则都不可能完全限制AI，凡是能发明的操作都不可能穷尽社会 的进步，凡是能总结的规律都不是世界的终极真相。</p>

<p>这就叫「道可道，非常道」。</p>

<h2>计算等价原理</h2>

<p>沃尔夫勒姆的第二个核心观念叫「计算等价原理(Principle of Computational Equivalence)」，意思是所有的复杂系统，不管看起来多复杂，都是<em>同等</em>复杂的，不能说哪个系统比哪个系统<em>更</em>复杂。</p>

<p>每个真有学问的人都应该是一个「<strong>不特殊论者</strong>」。 以前的人以为人是万物之灵长，地球是宇宙的中心，后来发现地球不是宇宙的中心，人类也只是生命演化的产物，我们的存在没有什么本质的特殊之处。</p>

<p>现在AI模型则告诉我们，人的智力，也没有什么特殊之处。任何一个足够复杂的神经网络都是跟人的大脑同等复杂的。不能说人能理解的科学理论就高级，AI识别药物分子的过程就低级。</p>

<p>既然都是平等的，那硅基生命和碳基生命自然也是平等的。那面对AI，我们凭什么认为自己更有价值?</p>

<h3>人的价值在于历史</h3>

<p>这就引出了沃尔夫勒姆的第三个核心观念:人的价值在于历史。</p>

<p>ai和人的根本区别是什么？是历史。人类有历史，并且有由历史确定的价值观。而AI没有历史，没有价值观。AI需要“对齐”人类的价值观。</p>

<h3>习惯让人适应</h3>

<p>快乐需要间隔，痛苦要一气呵成。
因为习惯会让人适应。
快乐我们不希望适应，但是痛苦我们希望适应。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[精英日课-意识红色胶囊]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/03/25/jingyingrike-yishi-hongse-jiaonang/"/>
    <updated>2024-03-25T00:20:32+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/03/25/jingyingrike-yishi-hongse-jiaonang</id>
    <content type="html"><![CDATA[<!-- more -->


<p>一切感知都是幻觉，是预测，修正，再预测，再修正的过程。</p>

<p>意识讨论的意义：</p>

<ul>
<li>中国本土的正统学说，也就是儒学，到东汉年间就已经陷入了全面内卷，没有什么大学问可做了，大家都在搞细枝末节和预言、算命什么的。后来魏晋嬉皮士发明了玄学，印度又传来佛教，中国人才有了新鲜的思想资源。</li>
<li>我们回头看，玄学和佛教的世界观对不对已经不重要了，重要的是它们提供了逻辑思辨的思维方式，把人的思路打开了，激发了想象力，跳出了内卷。</li>
<li>我想现在关于意识的讨论也是如此，不一定对，但是它也是一个思想资源。</li>
</ul>


<p>物理学的三大基石——广义相对论、量子力学和统计力学——之所以是这样的，是因为我们的意识要求这样。</p>

<p>物理定律之所以是现在这个样子，是自然世界的计算不可约性和人类的计算受限性相互作用的结果。</p>

<ul>
<li>热力学第二定律（熵增定理）可以用计算受限性解释。</li>
<li>我们口中的“随机”也可以这么解释。</li>
<li>朱元璋抱怨中国越来越乱，只不过是因为他理解不了更复杂的社会形态。</li>
</ul>


<p>如果连物理定律都是幻象，那我们大概只能承认《金刚经》说的是对的：「凡所有相，皆是虚妄。」</p>

<p>正如康德说人无法真正认识「物自体」。</p>

<p>而我们现在知道，之所以如此，是因为我们是计算受限的。面对这个计算不可约的世界，任何智能 —— 包括AI和佛陀 —— 都必然是计算受限的。</p>

<ul>
<li>计算受限的原因是光速。是哪个神的力量给我们加了一个这样的约束？</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[精英日课-别相信直觉]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/03/25/jingying-rike-biexiangxin-zhijue/"/>
    <updated>2024-03-25T00:03:37+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/03/25/jingying-rike-biexiangxin-zhijue</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>如果你想要一个幸福的婚姻，你应该怎样寻找自己的另一半？</h2>

<p>人们在婚恋市场上<strong>实际</strong>追求的东西，和<strong>应该</strong>追求的东西，正好完全是两回事。</p>

<p>寻常的吸引点——长相、身高、职业、个性像不像你什么的都根本不重要。如果要强行挑选，那就找那些拥有好品质的人，包括生活满意度、安全依恋风格、尽责性和成长心态。</p>

<h2>夫妻俩共同的朋友越多，关系越持久吗？不是。</h2>

<p>朋友圈重合度越高的夫妻或者男女朋友，越有可能在一定时间之后宣布再次单身。也就是说，最持久的关系，往往是双方各自有不同的朋友圈。</p>

<h2>确定恋爱关系之前的微妙状态中，怎么增加自己在对方眼中的吸引力？</h2>

<ul>
<li>对男性来说，最好的办法就是接受女性的领导 — 女性讲了笑话，你就笑；如果她谈论某个话题，你就顺着这个话题往下说；如果她说要干什么事情，你要表示支持。这样就能大大增加她对你的好感。</li>
<li>对于女性来说，有什么特别的对话技巧呢？对不起，数据显示女性用不着对话技巧 — 男性最后选择的总是外表好看的。</li>
</ul>


<h2>养育方法不重要，榜样最重要</h2>

<ul>
<li>养育方法对孩子的影响很重要吗？没有。孩子的命运是他自己的，家长能起的作用很小。而基因因素对孩子未来收入的影响比养育方法的影响要高出2.5倍。</li>
<li>选择住在哪里——这一个决定的影响力占到了家长对孩子所有的影响力中的25%。之所以有影响，也不是因为周围的朋友和同学，而是周围的叔叔阿姨。叔叔阿姨会成为它的榜样。优秀成年人，是年轻人的榜样。这个成年人不是父母。因为年轻人对父母有天生的逆反心理。</li>
</ul>


<h2>名校，对学生的能力，到底有没有一个“附加值”的作用呢？没有。</h2>

<p>什么牌子、什么名师、什么校友会，这些名校的光环加持，至少对个人收入来说，没有可观测的效应。牛人到哪里都是牛人。名校并没有“培养”牛人，名校只不过“选择”了牛人。</p>

<h2>成为球迷，一定是更快乐的事吗？不一定。</h2>

<p>成为球迷，会使你的总体快乐更多吗？得不偿失。即使你是一个强队的球迷，也是如此，因为你对结果的预期会调高，这样，赢球带来的快乐会变小，但是一旦失败，会带来更大的痛苦。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[樊登读书摘要(2021-2023)]]></title>
    <link href="http://hongchaozhang.github.io/blog/2024/03/20/fandeng-dushu/"/>
    <updated>2024-03-20T00:21:24+08:00</updated>
    <id>http://hongchaozhang.github.io/blog/2024/03/20/fandeng-dushu</id>
    <content type="html"><![CDATA[<!-- more -->


<h2>图书阅读</h2>

<ul>
<li>阅读：浪漫之魂，卢梭

<ul>
<li>作者从满激情，用“心”写的一本书，读来酣畅淋漓。</li>
</ul>
</li>
<li>阅读：0802微积分的力量

<ul>
<li>科普著作</li>
</ul>
</li>
<li>阅读：火种，寻找中国复兴之路</li>
<li>阅读：0227 杜甫传</li>
<li>阅读：1015大国大城，城市发展变大的必然性</li>
<li>阅读：0924 升维：不确定时代的决策博弈</li>
<li>阅读：0910 家庭的觉醒</li>
<li>阅读：生命密码，你的第一本基因科普书</li>
<li>阅读：0702八堂自然课</li>
<li>阅读：中国儒学三千年</li>
<li>阅读：社会性动物</li>
<li>阅读：观念的跃升

<ul>
<li>文明发展脉络，概论性质，主要是哲学</li>
</ul>
</li>
<li>阅读：作文六要20220219</li>
</ul>


<h2>摘要</h2>

<ul>
<li>毒，让人疼的毒不会致命，让人致命的毒一般会让人没有感觉，或者麻痹。让你疼的毒，一般是用来驱散你的，没有必要毒死你。真正想毒死你的毒，是不会让你有感觉的，这样才能更好地达到毒死你的目的。</li>
<li>为什么自己的口水从嘴里咽下去不恶心，积累在杯子里面再喝，就会恶心？</li>
<li>外在的坚持：来自家长和老师的压力；内在的坚持：来自内心的喜爱。</li>
<li>基因改造不应该有伦理问题，因为大自然在造更多物种，人类也已经造了很多物种，各种杂交筛选。</li>
<li>焦虑是恐惧，发怒也是恐惧。每次焦虑和发怒，都要想一想：我到底在害怕什么？不能将内心的恐惧投射到身边的人身上。</li>
<li>孩子需要的：被看见，价值感。</li>
<li>辨别臆想和事实。</li>
<li>强迫症类型：

<ul>
<li>洁癖</li>
<li>幻想</li>
<li>信一定要读7遍</li>
</ul>
</li>
<li>鼓励孩子：

<ul>
<li>我看到你昨天做作业的样子很帅。</li>
<li>我相信，你可以做出来。</li>
</ul>
</li>
<li>学习要有知识输出，比如一个项目学习，然后演讲。</li>
<li>知识和技能都不是素质，思维方式是。</li>
<li>0305减法：做减法达到效果和做加法达到效果是两种不同的境界。</li>
<li>概念思考，让你更聪明。学会造概念，推进思考进程。</li>
<li>反时间管理，时间堆叠，同时干很多件事情，是因为有能自动运行的事情。</li>
<li>买椟还珠，买文凭还能力。</li>
</ul>


<h2>记忆</h2>

<p>海马体控制什么信息写入永久记忆区（也就是灰质区域）：生存相关的才能写入。</p>

<p>知识不用写入，因为不是生死相关。那怎样才能更好地记住知识呢？</p>

<ul>
<li>只有反复出现的知识，才会被误认为生存相关，从而被写入灰质。所以，知识的记忆需要遵循艾宾浩斯曲线，反复出现。</li>
<li>好奇心，兴趣：容易进入心流状态。</li>
<li>想象力：通过想象场景，附加个人情感，从而更利于记忆。</li>
<li>排除压力：压力让人更记不住。</li>
<li>狮子记忆法：饿的时候记忆，走动的时候记忆。办公或者学习的时候走动，是有科学依据的。</li>
<li>睡前记忆法：睡前看需要记忆的东西。睡觉的时候会整理知识，更容易记住</li>
</ul>


<h2>好好恋爱</h2>

<p>选择悖论：选项越多，越难选，选项价值会降低。</p>

<p>现在结婚推迟也是这个原因：圈子大了，选项多了。</p>

<p>最大化者：要选最好的。</p>

<p>满足者：看到可以的就选。</p>

<p>乐观生意人看哪都是机会，但是最终签合同的时候非常谨慎。但是，现在的单身者往往是不愿意参加各种活动，一旦认定了一个，不撞南墙不回头。正好和乐观生意人做法相反。</p>

<h2>我有点胆怯，但想和你好好说话</h2>

<p>生气发火，是因为感觉到场面要失控，比如辅导孩子作业，孩子习惯，眼睛近视等。</p>

<p>被拒绝，就会发飙。其实，拒绝的是事情，不是你这个人。</p>

<p>不做传话者，要把他俩都拉到一起。拉到一起之后，不要试图找责任，比如：“你们俩谁先开口骂人的？”要试图让当事人说出感受情绪，说出核心诉求。</p>

<h2>科学营销</h2>

<p>送礼物：对方想要又舍不得买的。典型案例是帮对方清空购物车。</p>

<p>发现细分市场的几个角度：地理，人的分类，收入，爱好。</p>

<p>服务市场，酒店和航空，需要客户的忠诚度，所以有金卡和银卡。</p>

<p>定价模式：</p>

<ul>
<li>先高价定品牌形象，再出廉价版本，特斯拉。</li>
<li>先低价格占领市场，再出奢侈版本，小米，雷克萨斯。</li>
</ul>


<h2>癌症密码</h2>

<p>癌细胞本质是返祖现象，是多细胞生物中负责某个功能的细胞拒绝参与分工协作，返回了单细胞繁殖模式。</p>

<p>致癌物：</p>

<ul>
<li>开水2A级致癌物</li>
<li>黄曲霉素1级致癌物，号称“高温都杀不死”的致癌物。常见于发霉的花生和玉米、发苦的坚果、变质的大米、劣质的芝麻酱和花生油、长时间浸泡的木耳、没洗干净的筷子和砧板中。</li>
</ul>

]]></content>
  </entry>
  
</feed>
