百度Web前端研发部 -- IT技术博客大学习 -- 共学习共进步！

• Node.js Web应用代码热更新的另类思路

相信使用 Node.js 开发过 Web 应用的同学一定苦恼过新修改的代码必须要重启 Node.js 进程后才能更新的问题。习惯使用 PHP 开发的同学更会非常的不适用，大呼果然还是我大PHP才是世界上最好的编程语言。手动重启进程不仅仅是非常恼人的重复劳动，当应用规模稍大以后，启动时间也逐渐开始不容忽视。

• 聊聊移动端跨平台开发的各种技术

最近出现的 React Native 再次让跨平台移动端开发这个话题火起来了，曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发，却大多因为性能或功能问题而放弃，不得不针对不同平台开发多个版本。但这并没有阻止人们对跨平台开发技术的探索，毕竟谁不想降低开发成本，一次编写就处处运行呢？除了 React Native，这几年还出现过许多其它解决方案，本文我将会对这些方案进行技术分析，供感兴趣的读者参考。

• HTML head 头标签

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。

• 关于请求被挂起页面加载缓慢问题的追查

有用户反馈内部MIS系统慢，页面加载耗时长。前端同学们开组会提及此事，如何解决慢的问题。最致命的是：偶发！你不能准确知道它抽风的时间点，无法在想要追查问题的时候必现它。这只是一方面，另外，慢的可能实在太多了，那么问题来了，是前端导致的还是后端的问题？对慢的定义也有待商榷，多久算慢？如果这个页面加载大量数据耗时增加那我认为这是正常的。但这个时限超过了一个合理的自然值，就变得不那么正常了，比如四五十秒，一分多钟。最奇葩的是，如此久的耗时居然不会报超时错误，而是拿到正确返回后将页面呈现了出来！

• SSLStrip 的未来 —— HTTPS 前端劫持

在之前介绍的流量劫持文章里，曾提到一种『HTTPS 向下降级』的方案 —— 将页面中的 HTTPS 超链接全都替换成 HTTP 版本，让用户始终以明文的形式进行通信。看到这，也许大家都会想到一个经典的中间人攻击工具 —— SSLStrip，通过它确实能实现这个效果。不过今天讲解的，则是完全不同的思路，一种更有效、更先进的解决方案 —— HTTPS 前端劫持。

• XSS 前端防火墙 —— 可疑模块拦截

内联事件使用定时扫描，或许还能在触发前拦截一部分，但对于脚本则完全不可能了。脚本元素一旦被挂载到主节点之下，就立即加载并执行了。除非定时器开的特别短，能在脚本加载的过程中将其销毁，或许还能拦截，否则一不留神就错过了。我们得寻找更高端的浏览器接口，能在元素创建或添加时，进行分析和拦截。

• Chrome 远程调试协议分析与实战

某一天，A 君想获取 Chrome 页面中的性能数据，诸如时间、白屏和首屏等，因为需要和竞品进行对比分析，无法注入代码，该怎么办？此时，你也许能想到开发者工具(DevTools)，也许知道Timeline(包含浏览器完整的行为数据)，该怎么自动获取到 Timeline 数据呢？开发者工具(DevTools)是一个独立的 Web 应用程序(HTML+CSS+Javascript)，被集成在浏览器中，通过远程调试协议(remote debugging protocol)和浏览器内核进行交互，直接使用 Ctrl+Shift+I 呼出。

• 流量劫持 —— 浮层登录框的隐患

不知从何时起，人们开始热衷在网页里模仿传统应用程序的界面。无论控件、窗口还是交互体验，纷纷向着本地程序靠拢，效果越做越绚。然而华丽的背后，其本质仍是一个网页，自然掩盖不了网页的安全缺陷。当网页特效蔓延到一些重要数据的交互 —— 例如账号登录时，风险也随之产生。因为它改变了用户的使用习惯，同时也彻底颠覆了传统的意识。

• XSS 前端防火墙 —— 内联事件拦截

几乎每篇谈论 XSS 的文章，结尾多少都会提到如何防止，然而大多万变不离其宗。要转义什么，要过滤什么，不要忘了什么之类的。尽管都是众所周知的道理，但 XSS 漏洞十几年来几乎从未中断过，不乏一些大网站也时常爆出，小网站更是家常便饭。而本文介绍的则是另一种预防思路 —— 通过前端监控脚本，让每一个用户都参与漏洞的监控和上报。

• 7 天打造前端性能监控系统

曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统，既然说出去了也不能食言。从前一篇文章前端数据之美相信大家对前端数据有了一定的了解，下面就针对其中的性能数据及其监控进行详细阐述。

• 从输入 URL 到页面加载完成的过程中都发生了什么事情？

写这篇文章并不是为了帮大家准备面试，而是想借这道题来介绍计算机和互联网的基础知识，让读者了解它们之间是如何关联起来的。

• 实现动态验证码的思路

验证码主要是防止机器暴力破解。之前的验证码都是以静态为主，现在一些产品开始使用动态方式，增加破解的难度。动态方式以 gif 最为简单可靠。gif 兼容性好，尺寸小。这里分享的就是一种：用 JS 实现 gif 动态验证码的思路。