IT
2015-01-17 00:16:40
/
累计浏览 3,080
在移动互联网时代，网页的 `
` 部分，特别是那些 `meta` 元素，对浏览器的渲染和搜索引擎优化（SEO）至关重要。这篇文章从基础的 `DOCTYPE` 声明出发，系统梳理了 `` 中各个关键标签的意义与使用场景。作者解释了不同 `DTD` 声明如何决定浏览器使用标准模式还是怪异模式进行渲染，并介绍了 HTML5 简洁的 `` 写法。
文章深入到具体的 `meta` 设置，对比了新旧字符编码声明方式的等效性，澄清了中文 `lang` 属性应使用 `zh-cmn-Hans` 而非 `zh-CN` 的规范细节。对于国内环境，它提供了确保浏览器（如 360）使用最新内核、禁止百度转码等实用技巧。在 SEO 部分，文章则明确了 `
`、`keywords`、`description` 等基础标签的正确配置方法。整篇文章以“一丝”的经典总结为基础扩展，旨在帮助开发者写出清晰、高效且兼容性好的 `<head>` 结构。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-17 00:06:49</span>
<span class="br-dot">/</span>
<span>累计浏览 3,280</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7271">关于请求被挂起页面加载缓慢问题的追查</a></h2>
<p class="br-summary">这篇讲的是前端工程师在内部系统里遭遇的一个棘手怪问题：页面请求在 Chrome 中频繁出现 “Pending” 状态，加载耗时数十秒甚至超过一分钟，却能最终成功返回，不触发超时错误。问题偶发且难以复现，给排查带来极大困难。
作者团队从几个常见方向入手，逐一排除了 Angular 框架性能、内部封装库、Chrome 插件干扰以及杀毒软件的可能性。排查的核心手段是借助 Chrome 开发者工具和 `chrome://net-internals` 捕获网络日志，通过对比正常与异常请求的详细信息来寻找线索。
经过大量搜索和尝试，最终在 Chrome 网络栈的源码中发现了关键点：问题与浏览器对域名的并发连接数限制以及 “CACHE LOCK” 机制有关。当多个标签页同时请求同一域名下的资源时，后续请求会被前置的 DNS 预解析锁住，从而陷入长时间等待。文章最后给出的解决方案是在服务器端启用 HTTP/2 协议，有效缓解了这一问题。整个追查过程展现了从现象分析到源码层面深挖的完整技术排查路径。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2015-01-05 23:41:09</span>
<span class="br-dot">/</span>
<span>累计浏览 3,380</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7232">SSLStrip 的未来 —— HTTPS 前端劫持</a></h2>
<p class="br-summary">这篇文章探讨的是在HTTPS日益普及的今天，传统的中间人攻击工具SSLStrip面临的挑战与进化。作者从后端劫持的局限性出发，指出SSLStrip这类纯流量层的工具在现代Web面前已力不从心，难以处理动态生成的链接、数据包分片以及高昂的性能开销。
核心思路因此转向“前端劫持”。通过向页面注入脚本，利用事件捕获机制（如监听全局点击事件），攻击者可以在用户点击链接的瞬间，临时将HTTPS地址修改为HTTP。这种方法巧妙地绕过了后端的种种问题：只需处理页面首个数据块即可完成渗透，对性能影响极小；同时能应对各种动态添加的链接，甚至表单提交、脚本弹窗和框架页面。文章详细解释了如何通过修改链接的href属性并在下个事件循环中还原，来实现实时且无痕的替换，比传统的DOM扫描轮询方案更为优雅和彻底。
本质上，这篇内容揭示了网络攻击手段随技术栈演进的路径——从粗放的流量篡改，转向更精细、更贴近应用层的前端逻辑操控。对于安全研究人员和前端开发者而言，它清晰地展示了一种新型攻击面的技术原理与实现细节。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-12-04 00:09:35</span>
<span class="br-dot">/</span>
<span>累计浏览 2,280</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/7147">XSS 前端防火墙 —— 可疑模块拦截</a></h2>
<p class="br-summary">这篇讲的是，如何为XSS前端防火墙增加对可疑脚本模块的主动拦截能力。作者从上一代系统的不足出发——虽然能防简单的内联代码，但面对站外脚本加载和代码混淆时束手无策——提出了一套基于DOM监视的“可疑模块跟踪系统”。
文章的核心探索，围绕着HTML5提供的MutationEvent接口（包括DOMNodeInserted事件与MutationObserver）展开。通过大量实测代码，作者验证了这套方案在检测层面的有效性：MutationObserver能批量捕获静态脚本，DOMNodeInserted则对动态创建的元素响应更及时。更进一步，实验证明利用MutationObserver甚至可以在脚本加载前将其从DOM中移除，实现对静态脚本的拦截，但在动态脚本和跨浏览器一致性上遇到了限制。
作者并未止步于事件监听，而是深入分析了动态脚本创建的全过程，尝试了在属性赋值阶段进行拦截的更高阶思路。整篇文章并非提供一个完满的最终方案，而是详实记录了一次充满实验与思考的技术攻坚过程，展现了在浏览器环境限制下，为前端安全“打补丁”的真实挑战与巧妙尝试。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-21 23:44:47</span>
<span class="br-dot">/</span>
<span>累计浏览 3,540</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6971">Chrome 远程调试协议分析与实战</a></h2>
<p class="br-summary">作者从一个实际场景切入：当需要获取竞品网页的性能数据，却无法注入代码时，该如何应对？文章由此引出了 Chrome 强大却常被忽视的“远程调试协议”。
这篇内容详细拆解了该协议的结构与原理。它本质上是一个基于 WebSocket 的通道，将调试功能划分为 DOM、Network、Timeline 等不同“域”，每个域都定义了可执行的“命令”和能监听的“事件”。文章通过 Page 域的例子，展示了命令请求/响应、事件派发以及复杂数据类型定义的具体格式，让抽象的协议变得清晰可感。
更实际的部分在于“实战”章节。作者手把手演示了如何启动 Chrome 的调试端口、获取调试地址、建立 WebSocket 连接，并最终通过发送命令来远程操控浏览器，例如执行导航或收集性能数据。这为自动化性能分析、移动端调试，以及与 PhantomJS 等工具结合提供了直接的技术路径。
对于希望突破 DevTools 界面限制，进行深度自动化监控或分析的前端开发者而言，这篇文章提供了从理论到实践的扎实指引。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-21 23:18:24</span>
<span class="br-dot">/</span>
<span>累计浏览 2,880</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6969">流量劫持 —— 浮层登录框的隐患</a></h2>
<p class="br-summary">这篇技术文章深入剖析了看似“华丽”的网页浮层登录框背后隐藏的安全风险。作者从传统登录跳转模式说起，对比指出，尽管现代浮层登录框通过HTTPS传输数据，但其寄生在HTTP主页面中的特性，使得整个登录过程极易受到XSS注入攻击。更关键的是，文章通过实战演示揭示了它与“缓存投毒”攻击相结合的巨大危害：攻击者只需短暂劫持网络，即可篡改长期缓存的脚本，从而在用户回到安全网络后，仍能悄无声息地替换掉官方登录框，窃取账号密码。
文章的核心结论是，这种交互模式的改变“不可逆”地削弱了用户原有的安全识别习惯。即使网站撤回浮层设计，黑客利用XSS伪造的相似界面仍可能骗取用户信任。最终，作者给出的终极安全建议是全站推进HTTPS，彻底消除攻击面。整个分析过程结合了原理讲解与攻击复现，警示意义明确。</p>
</div>
</article>
<article class="br-card br-plain-card">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-21 23:09:56</span>
<span class="br-dot">/</span>
<span>累计浏览 2,220</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6968">XSS 前端防火墙 —— 内联事件拦截</a></h2>
<p class="br-summary">传统XSS防御依赖服务端过滤与转义，但漏洞仍频发。这篇文章另辟蹊径，提出了一种部署在用户浏览器端的“前端防火墙”预警方案。
作者的核心思路是将防御逻辑从被动的事后过滤，转向主动的事前拦截。他认为XSS的执行本质是浏览器中的事件触发，因此可以借助DOM事件模型，在攻击代码实际运行前对其进行拦截分析。
文章详细探讨了如何针对“内联事件”这类常见XSS注入点，利用addEventListener的捕获阶段机制，抢先一步执行防御脚本。这套方案不仅能拦截恶意事件，还能实时上报异常信息，让开发团队在漏洞被大规模利用前就收到预警。它把每一个用户的浏览器都变成了一个实时的监控节点，变被动为主动。</p>
</div>
<div class="br-thumb br-compact-thumb is-cached">
<img src="/upload/thumb/2026/05/12828de68ecc865aa308836ff285d56004c5e5e8.png" alt="" loading="lazy">
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-21 22:59:13</span>
<span class="br-dot">/</span>
<span>累计浏览 11,100</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6967">7 天打造前端性能监控系统</a></h2>
<p class="br-summary">这篇讲的是作者从一次公开承诺出发，用7天时间系统化梳理了如何从零搭建前端性能监控系统。文章并非纸上谈兵，而是将“性能影响公司收益”这一核心认知作为起点，引用了Google、Bing等巨头因延迟导致用户量与收入下降的具体数据，强调了监控的必要性。
接着，作者将实施过程拆解为7天，从认知到工具逐步推进。文中重点介绍了Page Speed、WebPagetest、PhantomJS等工具的实战用法，并特别指出了衡量用户体验的关键指标——白屏时间和首屏时间。文章最后落脚于，性能会随产品迭代而衰减，因此需要一套可持续的监控系统来量化问题、指导优化。
整个方案从“为何要做”切入，落到“具体用什么、怎么做”，为希望提升Web页面加载性能的开发者提供了一份清晰的行动蓝图。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-21 00:14:31</span>
<span class="br-dot">/</span>
<span>累计浏览 15,780</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6966">从输入 URL 到页面加载完成的过程中都发生了什么事情？</a></h2>
<p class="br-summary">这篇文章详细拆解了“输入URL到页面加载”这个经典问题的前两个环节，其独特之处在于从最底层的硬件交互开始讲起，串联起了整个技术栈。
作者从用户触摸屏幕的那一刻说起，解释了电容触摸屏如何将物理动作转换为电信号，通过I²C总线传递给CPU。在CPU内部，信号经过晶体管和逻辑门电路，最终触发操作系统的中断机制。以Android为例，内核驱动将触摸事件写入设备文件，再由系统的GUI框架（如EventHub）分发给前台应用，也就是浏览器。
当事件到达浏览器后，文章揭示了其中一些不为人知的优化。例如，Chrome会根据用户输入历史进行“预预测”，在按下回车键之前就可能开始建立网络连接或渲染，以加速页面显示。文章后续部分显然还会继续剖析网络请求、DNS解析等后续流程。
这篇长文并非只为面试准备，而是旨在建立硬件、操作系统与软件之间的关联认知。作者在文中推荐了从《编码》到《Linux内核设计与实现》等多本经典著作，适合希望深入理解计算系统工作原理的读者。</p>
</div>
</article>
<article class="br-card br-plain-card br-plain-card--no-thumb">
<div>
<div class="br-meta">
<span class="br-source-dot">IT</span>
<span>2014-11-20 23:57:18</span>
<span class="br-dot">/</span>
<span>累计浏览 3,120</span>
</div>
<h2 class="br-card-title"><a href="https://blogread.cn/it/article/6963">实现动态验证码的思路</a></h2>
<p class="br-summary">这篇讲的是如何用JavaScript在前端实现动态GIF验证码。作者从传统静态验证码易被机器识别的问题出发，选择GIF作为载体——它兼容性好、体积小，能有效增加破解难度。
核心思路围绕三个任务展开：绘制旋转的文字、计算字符随机位置与角度、最终合成GIF图片。实现的关键技巧在于利用Canvas的`rotate`和`translate`API，并正确设置`textAlign: 'center'`与`textBaseline: 'middle'`，让文字能围绕自身的中心点旋转，而非默认的左下角，效果自然得多。
生成GIF环节则调用了gif.js库，作者特别指出其依赖Web Worker，需在HTTP环境下运行，并使用了`copy`模式来保留每一帧的独立图像数据。文章最终提供了完整的HTML示例代码与在线演示，从封装的`rotateText`函数到主流程逻辑一应俱全，是一次清晰的前端动画与图像生成实践。</p>
</div>
</article>
<nav class="br-pagination" aria-label="pagination">
<ul class="pagination pagination-sm"><li class="active"><a >1</a></li></ul>
</nav>
</section>
<aside class="br-stack br-sidebar" aria-label="IT sidebar">
<section class="br-side-card br-channel-card">
<div class="br-channel-eyebrow">博主信息</div>
<h2>百度Web前端研发部</h2>
<p class="br-channel-meta">共 12 篇文章</p>
<div class="br-channel-info br-channel-info-stacked">
<a href="http://fex.baidu.com" target="_blank" rel="nofollow noopener">
<span class="br-channel-icon" aria-hidden="true">🔗</span>
<span class="br-channel-link-text">
<span class="br-channel-link-label">访问博客</span>
<span class="br-channel-host">http://fex.baidu.com</span>
</span>
</a>
</div>
</section>
<section class="br-side-card">
<h2>近 3 天十大热文</h2>
<ol class="br-rank-list">
<li><span class="br-rank">1</span><a href="https://blogread.cn/it/article/8282?f=hot3">OKR 工作法简介<small>近 3 天 102 浏览</small></a></li>
<li><span class="br-rank">2</span><a href="https://blogread.cn/it/article/2616?f=hot3">WEB系统需要关注的一些点<small>近 3 天 53 浏览</small></a></li>
<li><span class="br-rank">3</span><a href="https://blogread.cn/it/article/4237?f=hot3">浏览器的工作原理：新式网络浏览器幕后揭秘<small>近 3 天 51 浏览</small></a></li>
<li><span class="br-rank">4</span><a href="https://blogread.cn/it/article/3677?f=hot3">网络数据的背后――网络日志的分析指标<small>近 3 天 49 浏览</small></a></li>
<li><span class="br-rank">5</span><a href="https://blogread.cn/it/article/3804?f=hot3">通过引用计数解决野指针的问题(C&C<small>近 3 天 48 浏览</small></a></li>
<li><span class="br-rank">6</span><a href="https://blogread.cn/it/article/6865?f=hot3">2014年1月21日中国互联网DNS瘫痪事件<small>近 3 天 45 浏览</small></a></li>
<li><span class="br-rank">7</span><a href="https://blogread.cn/it/article/8379?f=hot3">Postmortem: 关于 xzutil <small>近 3 天 44 浏览</small></a></li>
<li><span class="br-rank">8</span><a href="https://blogread.cn/it/article/1642?f=hot3">Cacti 添加 Nginx 监控<small>近 3 天 42 浏览</small></a></li>
<li><span class="br-rank">9</span><a href="https://blogread.cn/it/article/8381?f=hot3">errno 的实现<small>近 3 天 41 浏览</small></a></li>
<li><span class="br-rank">10</span><a href="https://blogread.cn/it/article/6907?f=hot3">使用Fiddler对手机应用进行抓包测试<small>近 3 天 39 浏览</small></a></li>
</ol>
</section>
<section class="br-side-card" style="padding:12px;text-align:center;">
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:250px"
data-ad-client="ca-pub-2206192680127944"
data-ad-slot="5430998082"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
</aside>
</main>
<footer class="br-shell" style="padding-top:12px;padding-bottom:20px;color:var(--br-muted);font-size:13px;">
<div style="text-align:center;line-height:1.9;">
© 2009 - 2026 by blogread.cn
·
微博：<a href="https://weibo.com/blogread" target="_blank" style="color:var(--br-accent)">@IT技术博客大学习</a>
·
<span class="news-footer-trust-links"><a href="/about.html">关于</a> · <a href="/contact.html">联系</a> · <a href="/privacy.html">隐私</a> · <a href="/disclaimer.html">内容来源声明</a></span>
·
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备15002552号-1</a>
</div>
</footer>
<!-- Bootstrap 5 bundle (含 Popper); 不再依赖 jQuery。 -->
<script src="/plugins/bootstrap-5.3.8/js/bootstrap.bundle.min.js"></script>
</body>
</html>
