2015年06月_叶ch楼喽

转载移动端点击穿透和click事件300ms延迟问题

详细解析-移动H5点击穿透现象300 毫秒点击延迟的来龙去脉场景描述（类似）：一个页面里存在A元素和B元素；B元素浮在A元素之上，A元素里具有a标签或者绑定了点击事件或表单元素；点击B元素后，隐藏或者删除B元素；再B元素隐藏或者删除的同时触发A元素里的a标签或者点击事件；点击穿透的现象发生；问题产生的原因分析：当我们在触屏上点击某个位置时候的时候，浏览器依次

2015-06-29 12:32:09 6017

转载浅谈移动前端的最佳实践

原文链接

2015-06-25 21:55:40 372

转载 CSS 预处理器

原文链接CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样

2015-06-25 21:49:39 1411

转载常用meta整理

原文链接元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-eq

2015-06-25 21:42:47 405

转载移动前端不得不了解的html5 head 头标签

原文链接DOCTYPEDOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。使用 HTML5 doctype，不区分大小写。 charset声明文档使用的字符编码， charset="utf-8">html5 之

2015-06-25 21:38:44 665

转载移动端真机调试终极利器-BrowserSync

原文链接之前有分享过一篇《如何在移动设备上调试网页》，感谢 xyyjk 留言推荐BrowserSync这个工具，自己也花了点时间研究了一下，还是很好上手的。比起之前介绍的方法更加方便（之前的方法已经过时）。BrowserSync可以实时同步更新CSS、JS文件，此外最关键的是全平台支持，即你可以在手机QQ浏览器、微信浏览器里面调试。今天就介绍一下这个工具的用法（以下针对Ma

2015-06-25 21:35:58 8290

转载 MobileWeb 适配总结

原文链接开门见山，本篇将总结一下 MobileWeb 的适配方法，即我们常说的H5页面、手机页面、WAP页、webview页面等等。本篇讨论的页面指专门针对手机设备设计的页面，并非兼容全设备的响应式布局。文中提到的 device-width指 viewport meta 标签中 width 的值，即由浏览器指定的值，常用机型对应值可参照 Screen Sizes。

2015-06-25 21:32:54 498

转载 CSS Sprites：鱼翅还是三鹿？

原文链接无处不在的 CSS sptites －为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。虽然它真正流行是在 A List Apart 解释并认可这个技术之后，但是早在 2003 年 7 月份，Peter Stanicek 就已经开始谈论它了。目前大多数的开发人员对这个技术都有相当地掌握，也有很多关于它的教程和文

2015-06-24 22:11:00 547

转载 css sprite原理优缺点及使用

原文链接css sprite原理优缺点及使用CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个

2015-06-24 22:08:47 537

转载给网页设计师和前端开发者看的前端性能优化

原文链接这篇长帖子不会讲到模糊图像的加载和数据处理，取而代之的是有关理论与第一手的性能方面的技术资料，这些技术是我通过阅读，观察，搜集和整理获得的（我花费了许多时间沉浸于CSS魔法的瀑布图）。我也会链接到其它相似话题的文章，以便帮助强化一些关键要点。享受吧！注意本文需要预先知晓一些基础的性能知识，如果有任何你不熟悉的就Google搜索一下好了！

2015-06-24 22:04:29 701

转载毫秒必争，前端网页性能最佳实践

默认链接你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。最佳实践最佳实践我们引用的来自y

2015-06-24 22:02:30 419

转载 chrome 控制台js调试与断点调试

原文链接侦听效果：查看某个标签上的事件或效果，如click之类的右击该标签，审查元素出现工具栏-》菜单 Elements查看右侧菜单-》EventListeners下面有对应的一些事件和加载了哪些JS仔细看下就有了，再分析下。断点效果：Sources中选择需要调试的JS，在右侧框中，点侧代码行号，设置断点。最右侧，

2015-06-24 10:05:45 668

转载 XSS的原理分析与解剖

原文链接0×01 前言:《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码，没有从基础的开始)，直到刺的《白帽子讲WEB安全》和cn4rry的《XSS跨站脚本攻击剖析与防御》才开始好转。我这里就不说什么xss的历史什么东西了，xss是一门又热门又不太受重视的Web攻击手法，为什么会这样呢，原因有下：1、耗时间2、有一定几率不成功3、没有相应

2015-06-24 08:41:28 386

转载浅谈WEB安全性（前端向）

相信进来的时候你已经看到alert弹窗，显示的是你cookie信息。单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服——没人看得到，自然也不算啥恶意行为。那么如果我把你的信息通过脚本发送到我的服务器保存起来呢？先放心，我不打算这么做，也没那笔闲钱去购置一个服务器来做羞羞的事情，也不希望博客园把我这地盘给封掉了。如同标题所写的，今天要聊的是WEB安全机制，但这“前端”二字倒是说

2015-06-24 08:38:32 1047

转载虚拟键盘与fixed带给移动端的痛！

原文链接【小贴士】虚拟键盘与fixed带给移动端的痛！前言今天来公司的主要目的就是研究虚拟键盘与fixed的问题，期间因为同事问起闭包与事件委托（阻止冒泡）相关问题，便穿插了一篇别的：【小贴士】工作中的”闭包“与事件委托的”阻止冒泡“，有兴趣的朋友可以去看看，因为首页只能放一篇，这个就略去了现在回到主要研究点，首先在移动端我们点击文本框后会出现一个虚拟键盘，

2015-06-22 10:47:39 706

转载 js控制iphone端的input/textarea元素失去焦点时隐藏键盘

原文链接问题的原由同事在制作触屏页面的时候收到产品这样一个需求：“我们的页面为什么点击完textarea框，在点空白处时，iphone的键盘不能隐藏？”我们就这个问题进行了测试，确实没有隐藏。看了看其它网站的页面，也是有的能隐藏有的不能隐藏。IPHONE系统在点击document时textarea为什么没有失去焦点？同样的问题我又在And

2015-06-22 09:56:28 11683 2

转载 JavaScript位操作及其简单应用