前端自动化测试

前端开发知识体系学习

前端知识结构图： 图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chro

2016前端开发技能必知必会

Javascript ES6JS前端必备基础技能，这个无可非议，现已迎来ES6，如果你已经开始做node或移动端H5开发，ES6已经是饥渴难耐了，学起来吧。 前端模块化框架requireJS、seaJS 已经是业界默认的标配了，不过现在不妨研究下webpack，或许更能适合你的项目 前端工程化构建工具grunt和gulp 是标配，FIS3也逐渐崛起，根据团队和项目实际情况做好技术选型吧 代码库管理

浏览器中javascript跨域解决方案

什么是跨域 1、document.domain+iframe的设置 2、动态创建script 3、利用iframe和location.hash 4、window.name实现的跨域数据传输 5、使用HTML5 postMessage 6、利用flash 本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改

JS前端数据加密方案

在如今互联网火热的形势下，安全成为各互联网公司比较重视的问题。 怎么能确保用户的信息在互联网传输安全？自然会涉及到数据加密的问题。 主要会考虑3点: 数据传输过程中被劫持 客户端被植入木马，数据泄露 键盘操作事件被木马记录导致输入密码、账号等敏感数据泄露 针对问题1，使用HTTPS传输协议能解决 针对问题2，需要对客户端数据进行加密 针对问题3，在PC做模拟软键盘，通过鼠标点击事件输入密码，

面试题解析:找出数组中重复项

记得2010年去阿里巴巴中文站面试前端，标哥(中文站的前端leader)面试我，其中有一道题就是如题，要求找出数组中的重复项。虽然当时面试的时候解答的不够满意，但是回头再看看这道题，还是比较有深意的。解答的思路很多，根据思路也大致能了解到面试者在JS方面的精通程度。 后来也经常见人问起这个题如何解，我对这个题的印象很深刻，以至于我后来当leader以后也常考察面试者对此题的解答思路，思路好的面试者

网站前端性能优化指南

2014年末，我为平安官网门户首页做了一次大的性能优化，性能做8秒多提速到5秒多，性能提升比较明显。网站前端性能的提升，给企业带来的价值是服务器带宽和并发请求的节省，从而节省开支。另外公司也一直在鼓励提升NPM，即用户口碑和用户体验，网站性能对用户体验是最直接的影响，因为谁也不想超过8秒都打不开一个网站吧。 说到性能优化，我想大家一定会联想到“雅虎前端性能优化N条军规”，这个文章以前在前端界很火，导致很多工程师觉得遵守雅虎工程师提到的那些条性能优化的准则就够了。其实是远远不够的，性能优化没有终点。 下面，结合互联网和书本的一些资料，以及我个人的经验，我们来谈谈怎样进行深度的性能优化。 1、减少HTTP请求数什么是HTTP请求呢？简单的说是服务器端返回给客户端的请求文件，如html、JS、CSS、图片、ajax数据 等等…… 合并JS文件把JS文件按需合并，除JS框架外，一个页面尽量只引用一个JS文件。可以借助require.js、seaJS等 JS模块化框架，管理好JS的加载和依赖关系，避免合并后依赖关系混乱从而导致JS错误。

Mac OS X 10.10.3 Yosemite下面解决XAMPP无法开启mysql的问题

在xampp安装目录下找到xamp这个文件（默认路径是：/Applications/XAMPP/xamppfiles/xampp） 用文本编辑器打开，搜索：$XAMPP_ROOT/bin/mysql.server start > /dev/null & 在那一行前面添加： unset DYLD_LIBRARY_PATH 保存退出，重新打开xampp，开启MySQL。 卧槽，居然变绿

前端开发javascript规范指南

Airbnb JavaScript Style Guide前端JavaScript编码规范JavaScript最佳通用规范 内容提纲 类型 对象 字符串 数组 函数 对象的属性 变量 Hoisting封装？ 条件语句和等号运算符 代码块 注释 空格 逗号 分号 Type Casting & Coercion 命名约定 存取器 构造器 事件 模块 jQuery ECMAScript5 兼容性 性能 资源 现状 翻译 JavaScript风格指南 请与我们交流关于JavaScript 贡献者 许可声明

浏览器指纹识别技术

最近接到一名用户的投诉：某网站不能安全退出。类似于这种问题是P0级的，公司大领导第一时间响应，要求快速解决。 在不确定用户投诉的问题原因之前，作为开发者来说，首先是需要重现和定位该问题，于是我们按照客户提供的浏览器版本IE10的某个小版本号，找到该版本的机器，最终没有重现问题。 后来，我们怀疑是否是用户电脑里安装了什么流氓插件导致的，于是我们就模拟用户电脑对浏览器设置各种设置，甚至修改了userAgent，也没用找到问题的原因。检查了前端代码也没有问题，找不出问题发生的原因。 代码查遍了，定位不到问题，头疼啊！难道是要把这块的代码重构一遍？那也不一定能解决到问题。 于是呢，期望联系到客户，期望进行远程协助。客户考虑到安全问题，残忍拒绝。 那么遇到这样的情况，有没有办法通过技术的方式追踪用户的信息呢？当然是有的，下面就介绍这种跟踪方法。 不过这种隐私不能滥用，特别是对于互联网金融行业对安全特别重视的产品，一旦泄露的用户的隐私后果可想而知。有必要多了解下，防患于未然。 ###什么是浏览器指纹？ 我的理解是，浏览器指纹是识别用户身份的唯一标识。

用hexo免费搭建个人博客

以前用wordpress搭建过自己的博客，非常简单易用，不过很不安全很容易受到攻击，需要经常升级补丁。 用wordpress搭建的博客需要购买LAMP服务器空间，期间我换过几次主机服务商，服务一家比一家差，经常宕机，速度不稳定。 在.CN域名1元注册的时候我注册了我的博客域名，后来续费就非常贵，再后来个人注册的.CN的域名全部被天朝和谐了，实名备案申请不一定都能通过，有种被坑的感觉，这就是天朝，我就这样痛失了我的域名，博客也就关闭了，这段不堪回首的往事…… 扯的有点长…… 回到主题吧 hexo是一个台湾的开发者基于node.js开发的一套博客系统，这套系统和一般的网站系统有点区别：它是跑在本地客户端的程序，在服务器端静态展现。是为只支持静态HTML的服务器而开发的，比如github上的pages服务。你可以用markdown语法在任何代码编辑器里书写你的博客文章，适合码农的写作方式。 下面我再详细介绍怎样一步步安装和使用hexo，其实很简单 搭建过程你或许觉得有那么点小繁琐，但一旦搭建完成，写文章是极简单，极舒服的。 只需要几个简单命令，你就可以完成一切。 hexo init //初始化hexo server //开启本地服务器hexo n “文章名” //写文章 == hexo newhexo g //生成 == hexo generatehexo d //部署，== hexo deploy ,可与hexo g合并为 hexo d -g ##准备hexo的运行环境

1号店：东东，我们不约

昨晚，在微信上看到某公众号曝光了某东对某店的隔空约战的漫画，矛头直指1号店，感觉漫画作者的画工很好啊，真羡慕。 东东家的漫画有一些关键词很有意思：几号店、你Y才二、不二之选、激动店、最大不代表可以随便说大话、名字有一不代表排名第一 …… 1号店则给出了往期的一些宣传广告图片予以极有力的隔空回应，最后拒绝东东的约战。 其实投降不代表认输，认真你就输了。不过这也是双赢，免费帮1号店做广告。 广告很有意思的，懂的人就笑泪了。 ##东东家的约炮

人人都是架构师

最近一直在思考一个问题：怎样做一枚好的架构师？ 首先说说，我为什么取了这个标题，因为之前看过一本某产品大牛写的《人人都是产品经理》，我就照搬了这样一个标题，《人人都是架构师》。人人如果都能做到架构师，可能是一件比较难的事，这里也只是一个概念在里面，意思是开发任何工程项目，不只是想着怎样完成，更要想着怎样才能做的更好，这里当然涉及到一些架构的思想在里面，架构就是为了让工程完成的更好。 架构师是一个职业的统称，细分的比如有java架构师、php架构师、系统架构师、IOS架构师、安卓架构师、前端架构师、等等……架构师职业是工程师队伍里比较顶端的，一般的公司的职位划分大概是：实习生、初级工程师、普通工程师、中级工程师、高级工程师、资深工程师、初级架构师、架构师、高级架构师，不过由于很多公司的职级已经满足不了市场的需求了，在技术的职业发展通道上还增加了研究员、专家这两个职称，能达到这个职称的少之又少，只有BAT等大公司才有如此完善的职业发展通道。互联网发展的如此之快，我想过不了多久就有科学家职称出现了，或者院士。 哦，扯的有点长了！反正是散文我就想到啥就扯啥:) 再说说鄙人吧。

FIS-pure 纯前端工程化入门

##入门前的准备 ###掌握一点命令行基础 你一定听说过DOS，DOS是一个命令行操作系统，有很多命令行操作方法，在现今的GUI操作系统里依然可用的。 下面只介绍我们最常用的几个操作命令，更多的命令就需要大家日后去勤奋自学了。 如果你对命令行操作已经有了一定的基础，那么可以略过此章节。 ####dir / ls +文件夹路径 列出当前文件夹下的所有文件 dir是windows下CMD命令行工具，ls是苹果MAC操作系统里的命令行方法，功能一样的，请大家对号入座 dir或ls后面还可以加文件夹路径，显示文件夹路径里的所有文件，如: dir d:/test ，显示D盘test文件夹下的所有文件。 ####cd +文件夹路径 切换到某个文件夹下，比如我们要切换到D盘的test文件夹，cd d:/test ，返回至上一层目录：cd .. ，返回到根目录cd /，这几个常用命令请牢记。

MAC终端常用命令行

##mac 终端 常用命令 ##基本命令 ###1、列出文件ls 参数 目录名 例: 看看驱动目录下有什么:ls /System/Library/Extensions参数 -w 显示中文，-l 详细信息， -a 包括隐藏文件 ###2、转换目录cd 例：想到驱动目录下溜达一圈 cd /System/Library/Extensions ###3、建立新目录mkdir 目录名 例：在驱动目录下建一个备份目录 backup mkdir /System/Library/Extensions/backup在桌面上建一个备份目录 backup mkdir /User/用户名/Desktop/backup

Git常用命令行操作

git config –global user.name “ooxx” //配置GIT用户名 git config –global user.email “ooxx@qq.com” //配置GIT邮箱 git init //如果要用GIT监管，用此命令初始化 git status //查看文件状态 git add filename //filename=文件名，添加单个文件到暂存区 git add . //注意后面有一个点，将所有修改后的文件或新文件加到本地暂存区 git commit -m “some string” //后面建议添加注释，提交到本地 git push -u origin master //origin是git仓库的地址，建议使用SSH的仓库地址，提交到服务器 git log //查看操作记录