chrome对代理服务器的支持情况
这篇深入探讨了Chrome浏览器对代理服务器的支持情况，清晰梳理了它支持的两大类协议：SOCKS和HTTP。作者指出，SOCKS下实际涵盖了SOCKS4、SOCKS4a和SOCKS5，但Chrome并未明确支持SOCKS4a的远程域名解析，且所有SOCKS协议都不支持身份验证。 在对比关键差异时，文章分析得非常细致。例如，在连接建立的开销上，HTTP、SOCKS4、SOCKS5三者并不相同：SOCKS4需要1次往返，SOCKS5需要2次，而HTTP代理虽然也需要1次往返，但Chrome处理带认证的HTTP代理时机制比较特别（先收到407再补发头信息），且新版本浏览器会尝试记忆认证信息，不过底层部分请求如更新程序依然不支持。 文章还揭示了两个值得开发者注意的实用细节：一是Chrome的DNS预取功能在配置代理后仍可能尝试本地解析，存在隐私泄露风险；二是用户社区长期呼吁为Chrome的SOCKS5代理增加身份验证功能，但官方尚未有实质性进展。这些内容不仅对比了协议特性，也点出了实际使用中可能遇到的坑。
动态创建iframe在IE下的两个问题
这篇技术文章聚焦于动态创建iframe在早期IE浏览器（IE6/7/8）中遇到的两个具体兼容性坑点。作者首先指出，使用`createElement`动态创建iframe后，将其设置为表单提交目标（target）的方式在IE6/7下会失效，导致无法实现无刷新提交。其根因在于IE浏览器对这种方式创建的iframe元素识别存在缺陷，解决方案是改用`innerHTML`的方式将iframe插入DOM。 第二个问题同样常见：通过`onload`属性为动态创建的iframe绑定加载完成回调，在IE6/7/8中均会失效。作者解释，这是因为IE的旧版本不支持该属性的事件绑定，需要改用其特有的`attachEvent`接口来实现。文章为两个问题都提供了简洁有效的代码示例，方便读者直接参考修改。 对于仍在维护老旧系统或需要处理兼容性的前端开发者而言，这篇文章清晰地剖析了问题现象、根源并提供了即用型的解决方案，是一份实用的排错指南。
从千分位格式化谈JS性能优化
这篇文章从日常开发中常见的千分位格式化（如“10,000”）需求切入，以此为案例，深入探讨了JavaScript代码的性能优化之道。作者没有满足于一个能用的函数，而是依次展示了六种不同的实现思路，包括基于数组循环、字符串拼接、正则循环匹配、字符串截取以及正则替换等方法。 文章的核心价值在于对这些方法进行了清晰的对比。关键差异主要体现在两个方面：一是操作对象（是将数字打散为数组操作还是始终处理字符串），二是算法与工具的选择（是循环遍历还是利用正则表达式）。作者通过“执行5000次消耗的时间”这一直观的性能测试数据，给出了明确的结论：避免使用数组的`unshift`方法和复杂的正则循环，通常能获得更好的性能。例如，纯字符串操作的“方法二”和“方法四”在多数情况下表现优异，而一行代码的“懒人法”（方法六）虽然简洁，但性能并非最优。 这篇文章生动地说明，一个看似微小的功能点，其背后也蕴含着值得优化的算法选择。它提醒开发者，在编写代码时，除了功能正确，也应关注实现方式对性能的潜在影响，尤其是在处理频繁调用的工具函数时。
前端开发中Cookie那些事儿
这篇讲的是前端开发中cookie的那些事儿。作者从实际项目经验出发，详细解释了cookie的各种属性及其用法，特别是那些容易踩坑的地方。例如，cookie的生存期由expires和max-age属性控制，但max-age用秒表示，已成为现代标准；max-age为正时cookie会持久化存储，为负时仅在当前会话有效，为0时则删除cookie。在ie6浏览器中，session cookie在不同打开方式下行为不一，作者曾为此吃过大亏，调试过程颇为曲折。 文章还深入解析了domain、path、secure和httpOnly等属性。domain属性允许跨子域共享cookie，但需谨慎设置域以确保安全；path属性定义cookie的关联路径；secure确保cookie仅通过HTTPS传输；httpOnly则防止JS脚本访问，增强安全性。作者分享了一个实战教训：因忽略httpOnly属性，尝试用JS读取cookie失败，耗时近两小时才定位问题。 在性能优化方面，文章强调cookie会随HTTP请求发送，增加网络开销，因此不建议将其作为客户端存储方案，并推荐了localStorage等本地存储作为替代。此外，还解释了cookie值的编码解码必要性，以及同名cookie在不同域或路径下的区别规则。 通过结合理论解释和踩坑经历，这篇文章为前端开发者提供了实用的cookie操作指南，帮助大家避开常见陷阱，在复杂应用中更高效地管理状态和提升性能。
Beforeunload打点丢失原因分析及解决方案
这篇技术文章由1688的朱铁根和胡大军撰写，他们从淘宝团队早年发现的“页面跳转前发送的打点请求丢失”现象切入，深入剖析了这一前端数据采集中的经典痛点。 作者指出，问题核心在于浏览器页面卸载机制与网络请求时序的冲突：当页面跳转指令发出后，浏览器会迅速销毁当前页面的所有对象，包括用于发送打点请求的Image对象。如果此时打点服务器尚未完成响应，该HTTP请求就会被强制终止，导致数据丢失。 为解决这一矛盾，文章并未建议以牺牲用户体验（如延迟页面响应）为代价，而是巧妙地利用了`window.name`属性的特性。在页面卸载前，将打点数据临时附加到`window.name`中；页面刷新加载后，新页面立即读取并发出这个积攒的打点请求。该方案有效规避了`window.name`在页面刷新后依然保留的特性，同时解决了`cookie`或`localStorage`存在的跨域限制问题。 实测数据显示，该方案效果显著，在Chrome浏览器中打点回收率平均提升了约13%，在各版本IE浏览器上也取得了稳定的提升，为解决此类前端数据采集问题提供了一种可靠且兼容性良好的工程思路。
让前端工作更快、更智能:利用StaticPage自动化工作流
前端开发者常常面临静态页面开发琐碎重复的问题——从新建项目、复制模板，到压缩代码、打包上传，每一步都耗费精力。这篇讲的是作者如何通过一套名为StaticPage的自定义Grunt工作流，将静态页开发变得更快、更智能。 作者从自身在UX部门处理大量活动页、专题页的场景出发，对比了传统手动操作的繁琐流程（反复复制粘贴、手动压缩、FTP上传等）与使用自动化工具后的差异。StaticPage是基于Grunt配置的一套轻量级方案，专为解决静态页的“轻量”需求设计——它避免了如Yeoman等大型脚手架可能带来的冗余，同时提供了Sass编译、CSS/JS自动压缩、文件变化监听、一键打包zip及FTP上传等实用功能。 文章详细演示了从克隆项目模板、安装依赖到通过`grunt watch`实现编码时实时压缩，再到用`grunt bundle`生成带时间戳的压缩包并上传的全流程。作者强调，这类工具的核心价值在于“简、快、智”：结构清晰，跳过重复配置，让开发者能更专注于核心编码与问题解决。这套工作流尤其适合需要快速迭代、频繁交付静态页面的前端开发场景，通过将机械操作自动化，显著提升了工作效率与交付体验。
使用CSS3开启GPU硬件加速提升网站动画渲染性能
这篇讲的是作者在打造个人网站时，为首页的鼠标跟随动画遇到的性能坑，尤其是Chrome浏览器下的卡顿问题。 作者使用了多张大尺寸半透明PNG图片来制作空间透视效果，动画本身逻辑不复杂，但在Chrome中帧率只有30fps左右，渲染非常吃力。通过Chrome DevTools分析，发现主要瓶颈是浏览器在“painting”（绘制）阶段耗时过长。根源在于Chrome对大量大尺寸PNG图片的渲染存在长期未完美修复的性能缺陷。 尝试了requestAnimationFrame等多种前端优化手段均无效后，作者找到了一个巧妙的“小hack”：为动画元素添加CSS3属性 `-webkit-transform: translate3d(0,0,0)`。这个本用于3D变换的声明，在设置为0后并未开启3D效果，却意外激活了GPU硬件加速，将渲染工作从CPU转移至GPU。 效果立竿见影，开启后动画帧率瞬间提升至55fps以上，变得极为流畅。文章最后也提供了适用于所有浏览器的通用写法。这个案例说明，有时解决性能问题的关键，可能在于理解浏览器底层的渲染机制，并善用看似无关的特性来“曲线救国”。
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
这篇讲的是一个人人网早在2011年就上线的前端功能——首页拖拽上传，作者从这个实际案例出发，详细拆解了背后的实现技术。当时这个功能不仅是为了提升用户体验，也承载着向用户推广标准浏览器、逐步淘汰IE的期望。 文章核心围绕着三个HTML5关键API展开：首先是Drag&Drop事件机制，用于监听用户将文件拖入、拖离页面的行为；其次是File API中的FileList和FileReader，它们负责获取被拖拽文件的列表并读取其内容；最后是基于XMLHttpRequest Level 2的FormData对象，它能像表单一样封装文件数据，从而实现通过AJAX直接向服务器发送二进制文件流。 作者没有停留在理论介绍，而是直接给出了关键部分的代码示例，比如如何监听`dragenter`、`dragover`、`drop`等事件，并特别强调了清除`dragover`默认行为的重要性，否则后续的`drop`事件将无法触发。这些细节清晰地展示了一个完整拖拽上传功能的实现骨架。 虽然技术方案有一定年份，但文章清晰展示了如何组合基础API解决一个实际的交互问题，对于理解前端文件处理与异步上传的演进脉络仍有不错的参考价值。
网页重构应该避免的10大 CSS 糟糕用法
这篇文章系统性地总结了网页重构中10个应当避免的CSS坏习惯，并将它们归纳为“权重”、“工作流”和“自以为是”三大类。作者从权重控制这个核心痛点出发，详细剖析了滥用ID选择器、嵌套层级过深的选择器、内联样式等常见问题。例如，一个带有多个层级的ID选择器（如#header #title a）虽然看似语义明确，却会产生过高的特异性，导致后续样式覆盖困难，代码难以维护。 在工作流方面，文章批评了从上到下、仅凭文档流命名的粗放方式，以及样式冗余问题。它强调应遵循DRY（不要重复自己）原则，并介绍了如何利用Sass的@extend等预处理器特性来抽象公共样式，提升代码复用性。此外，统一使用rem或em这类相对单位替代px，也被指出是提升样式灵活性和可维护性的重要一环。 文章最后提醒开发者需关注CSS3新特性的浏览器兼容性，避免在样式表中堆积无效规则。整体而言，它为前端开发者提供了一份清晰的CSS反模式清单与改进指南，帮助团队建立更健壮、更易维护的样式架构。
防止表单重复提交的几种策略
这篇讲的是多用户Web应用中一个经典问题：表单重复提交。从用户误点两次按钮、刷新页面，到使用浏览器前进/后退，甚至网络层的重复请求，都可能导致同一数据被多次处理，带来数据不一致或资源浪费。 文章梳理了四种常见的应对策略。前端层面，可以暂时禁用提交按钮，但这依赖客户端JavaScript，不够稳健。更推荐的做法是采用Post/Redirect/Get模式——提交后立即重定向到结果页，从根本上避免刷新或回退带来的重复提交。后端控制上，可以在session中为每次生成的表单嵌入一个一次性令牌，服务器处理时立即核验并删除，这是一种结合了安全考虑的有效方案。最后，从数据源头兜底，在数据库层面设置唯一约束或索引，确保即使重复数据到达也能被拦截。 这些方法各有侧重，从用户交互、请求流转、会话状态到数据存储形成了多层次的防御。实际开发中，往往会根据应用的安全要求和复杂度，选择组合使用这些策略。
响应式网页设计
这篇文章从一个核心问题出发：为什么不能用一套设计适配所有设备？它介绍了由 Ethan Marcotte 提出的“响应式网页设计”理念——这不仅仅是屏幕自适应或图片缩放，更是一种要求“向下兼容、移动优先”的全新思维模式。 文章结合了2012年的行业背景，指出PC互联网正加速向移动端迁移，并用一个例子点明痛点：缺乏响应式处理的营销页面，在手机上加载慢、体验差，会导致用户流失。它的核心价值在于系统性地对比了三种移动端方案：开发成本高昂的Native APP、需安装的Hybrid APP，以及基于HTML5的响应式Web APP，后者在成本、跨平台性和迭代速度上优势明显。 在实施层面，文章给出了具体指导：首先遵循“移动优先”原则，将移动端作为交互设计的基准。实现的关键在于弹性栅格布局和响应式内容，并详细介绍了使用viewport meta标签控制视口、以及通过CSS Media Queries适配不同设备样式等技术要点。对于开发者而言，这提供了一套清晰且低成本的移动端适配路线图。
(续)为什么很多技术合伙人参与创业时会先谈钱？
这篇回应文章深入探讨了前文引发的讨论，聚焦于技术合伙人参与创业时常被误解的三个核心问题。作者从实际的创业对接经验出发，澄清了几个常见误区。 首先，文章指出创业项目并不适合外包模式。因为创业产品的需求是动态且不确定的，需要持续的沟通和迭代，这与外包“需求明确、一次交付”的模式根本冲突。同时，愿意接受远低于市场薪资的人员，其合作心态也与外包截然不同。 其次，关于激情，作者认为技术人员的创业激情并非凭空设想而来，而是在产品上线、获得用户正向反馈的过程中逐步点燃的。这种基于逻辑和实际成果的激励，比空谈梦想更为持久和重要。 最后，文章探讨了技术合伙人的定位问题。创始人不能简单地将产品规划完全抛给技术方，双方容易因角色认知差异产生鸿沟。可行的方案是创始人学习制作产品原型，或引入产品合伙人作为桥梁，最终实现业务与技术视角的真正融合。 整体而言，文章并非否定谈钱，而是呼吁创业各方基于对彼此工作模式的深刻理解，建立更健康、对等的合伙关系。
使用CSS和DataURI来添加杂色滤镜效果
这篇讲的是如何用纯CSS和DataURI技术，为网页元素添加杂色（Noise）纹理效果，且完全无需增加额外的HTTP请求。 文章从一篇国外博文出发，整理并实践了完整流程：先在Photoshop中制作一个50×50像素、半透明的杂色PNG小图，然后通过在线工具将其转换为DataURI格式的字符串。在CSS中，只需为元素添加一个类（如.noise），将DataURI字符串设置为背景图，并配合伪元素与透明度属性，就能实现细腻的杂色覆盖，同时不影响内容显示。整个方案仅基于CSS2.1，兼容性良好。 这种做法的优势非常明显：将图片直接编码进CSS文件，节省了网络请求；最终DataURI字符串可压缩至仅2.05KB左右，非常轻量；效果也易于通过调整原始图片来控制。文章最后指出，同样的原理也适用于生成纸张、石头等多种纹理，为前端实现视觉质感提供了灵活且高效的小技巧。
2014网易前端开发笔试题笔记
这篇讲的是作者2014年参加网易前端开发校招笔试的真实经历与考题回顾。文章从收到临时通知的匆忙赶场开始，生动还原了考场外的见闻：来自不同高校的考生、不少“霸笔”同学，以及外包给智联招聘的笔试组织形式。 核心部分聚焦于笔试本身。作者详细分享了两大板块的题目：第一部分是所有技术岗必考的计算机基础，涵盖文件组织、图遍历、无向图、可计算性、哈夫曼编码、死锁、数据库索引等经典问题，并附上了自己的解析。第二部分是前端开发专业题，题型包括不定项选择、填空、简答和编程题，重点考察JavaScript，例如要求手写闭包示例、阐述apply/call区别，并参照原型图实现交互页面。 除了考题，作者还观察到招聘可能存在学校偏好，并指出广州考生流动性较低的现象。整篇文章既是一次笔试的详细记录，也为后来者提供了宝贵的复习参考和实战视角。
通过WebRTC获取摄像头影像
这篇技术文章讲的是如何利用 WebRTC API 在网页中调用摄像头并实现一键截图。作者从基础的 video 标签搭建开始，引出了核心的 `navigator.getUserMedia` 接口，并特别指出了它在当时浏览器环境下的兼容性现实：Chrome 和 Firefox 需要加前缀，移动端支持不佳。 文章的核心实现思路清晰：通过 `getUserMedia` 请求摄像头权限，成功后拿到视频流，再通过 `window.URL.createObjectURL` 将流媒体转换为 URL 填入 video 标签播放。截图功能则依赖 canvas 的 `drawImage` 方法，把视频当前帧“画”上去。作者贴心地给出了处理浏览器差异的兼容代码，并分享了一个实战中遇到的“坑”：在 Firefox 中无法通过常规事件可靠获取视频尺寸，最终采用 `setTimeout` 轮询的变通方案来绑定截图按钮。 除了核心步骤，文章末尾还补充了几个有价值的细节，比如同一浏览器不同标签页可以共享摄像头，但不同浏览器不行；以及推荐将截图上传至服务器再提供下载，而非在本地强制保存。整体上，这是一份对前端开发者来说相当直接、步骤明确的实践指南。
IE6下经典的请求abort问题
作者掉进了一个坑：在IE6下给`a`标签绑定事件来切换验证码图片，但图片总是刷不出来，抓包一看请求状态是**abort**。问题出在IE6对`a`标签的执行顺序上——它先执行`onclick`里的事件处理函数，紧接着就会执行`href`属性定义的跳转。如果你没有在事件里阻止这个默认的跳转行为，浏览器会认为页面即将导航离开，从而把刚才在`onclick`中发起的请求（比如获取验证码的AJAX请求）给强制中止了。 解决办法很直接：在事件处理函数的最后加上`return false;`，或者把`href`属性改成不会跳转的锚点，比如`javascript:void(0)`或`#`。最稳妥的做法是两者结合使用。文章通过这个具体的bug，把IE6下事件流与页面跳转之间的微妙关系讲得很清楚，虽然现在IE6已罕见，但其中关于浏览器默认行为会干扰异步请求的原理，在其他场景下依然值得留意。
实现一下webapp的手机摇一摇功能
作者一开始也以为在WebApp里实现“摇一摇”必须依赖Hybrid框架，直到他发现了浏览器原生的DeviceMotion API。这篇文章就记录了他利用这一接口实现纯前端摇一摇功能的过程，思路清晰且实用。 核心实现并不复杂：通过监听设备的`devicemotion`事件，可以获取到`accelerationIncludingGravity`属性下的`x`、`y`、`z`三个方向的加速度数据。作者通过分析这三个数值的变化，来判断手机是否发生了“摇动”行为。文章给出了关键的事件监听和数据获取的代码示例，展示了如何用短短几行代码搭建起这个交互的基础框架。 这篇分享的巧妙之处在于，它证明了对于一些常见的设备交互需求，不必立刻上重型方案。利用好浏览器提供的标准Web API，往往就能以更轻量、更跨平台的方式达成目标。对于前端开发者来说，这为丰富移动端WebApp的交互体验提供了一个低成本的可行思路。
总结一下本站（忘我的追寻/WordPress）用到的插件、主题以及自己做的一些优化特性
这篇博客是作者对其WordPress站点运行一年来所做的优化和开发的总结。作者从自身需求出发，将默认英文主题进行了汉化和细致的视觉调整，形成了现在的界面风格。 在插件方面，文章详细介绍了SEO优化、百度统计与Google Analytics双备份、移动终端适配、反垃圾评论等核心插件的选择与配置经验，甚至提到了为评论区开发支持代码高亮功能的具体实践。其中，作者还分享了使用“简单算术题”插件并微调参数来对抗垃圾评论的巧思。 更值得关注的是作者自行开发的多个特性。例如，亲手制作了透明背景的favicon，并实现了返回顶部按钮。在分享功能上，作者不满足于现成方案，通过调用Google API自行生成文章二维码并保存至本地，同时利用短链接解决了微信扫描时的信任警告问题。此外，大量基于个人审美的CSS调优，以及为评论和归档页面增加的实用功能，都体现了对易用性和细节的深度打磨。 文章最后还列举了开发中使用的调试工具链和版本管理方案。从这些实践出发，为其他博主提供了一份实用的优化参考。
10分钟尝试10种编程语言
作者为想快速体验不同编程范式的开发者整理了一份清单，核心观点是：不必耗时安装环境，直接在浏览器里就能“尝鲜”多种编程语言。文章分类介绍了10种语言，从Lua这类擅长游戏脚本的动态语言，到Erlang这种构建高容错系统的函数式语言，再到Elm这样的响应式Web语言，甚至Brainfuck这种纯属娱乐的秘教语言都涵盖其中。 文章强调，这些在线环境通常附带教程，能帮你快速了解一门语言的“性格”。例如，想体验LISP家族的现代变体可以尝试Clojure，它的社区项目Overtone能实现有趣的音频编码；而R语言则专精于统计图表。除了语言本身，文章还推荐了Cloud 9等浏览器IDE，让你连开发环境都不用本地配置。 作者最后指出，通过解决像FizzBuzz或生命游戏这样的经典小任务，可以进一步巩固新学语言的技能。整篇文章像是一份有趣的“编程语言游乐园”导览图，从动态脚本到纯理论探索，路径清晰，旨在激发读者探索新范式的兴趣。