aaa333qwe的博客

转载自：http://blog.youkuaiyun.com/magic__man/article/details/51831227dispatchEvent是作为高级浏览器(如chrome、Firfox等)的事件触发器来使用的，那么什么是事件触发器？就是触发事件的东西。可能有人觉得有点莫名其妙，触发事件不是在交互中被触发的吗？的确，通常情况下，事件的触发都是由用户的行为如点击、刷新等操作实现，但是，其实

前面介绍了Chrome开发者工具的大部分内容工具，现在介绍最后两块功能Audits和Console面板。一、Audits　　Audits面板会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另一类是界面性能。首先开下它的主界面。　　Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。为了验证这一点，我们可以做一次简单的测试。根据十四条we

转载自：http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.htmlChrome的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的console，使用得当可以有如下功效：更高「逼格」更快「开发调试」更强「进阶级的Frontender」Bug无处遁形「Console大法好」con

前言　　Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化，简单来说它就是Timeline的数字化版本。它的功能选项卡不是很多（只有三个），操作起来比较前面的几块功能版本来说简单，但是里面的数据确很多，很杂，要弄懂它们需要花费一些时间。尤其是在内存快照中的各种庞杂的数据。在这篇博客中卤煮将继续给大家分享Chrome开发者工具的使用经验。如果你遇到不懂的地方或者有不对

卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板，其中包括Elements、Network、Resources基础功能部分和Sources进阶功能部分，对于一般的网站项目来说，其实就是需要这几个面板功能就可以了（再加上console面板这个万精油）。它们的作用大多数情况下是帮助你进行功能开发的。然而在你开发应用级别的网站项目的时候，随着代码的增加，功能的增加，性能会逐渐成为你需要关注

转载自：http://www.cnblogs.com/constantince/p/4579121.html　　上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首

转载自：http://www.cnblogs.com/constantince/p/4579121.html就算你不是一名前端开发工程师，相信你也不会对Chrome浏览器感到陌生。根据最新的一份（2015/06）的浏览器市场占有率报告，Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员，我推荐你使用Chrome。作为前端开

先附上一张网上广为流传的前端知识体系图：前端知识体系（网易推荐的课程） 从大图中我们总结出：优秀的Web前端开发工程师 要在知识体系上既要有 广度 和 深度！应该具备快速学习能力。前端开发工程师 不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件

wx-gesture-lock  微信小程序的手势密码WXCustomSwitch 微信小程序自定义 Switch 组件模板WeixinAppBdNovel 微信小程序demo：百度小说搜索shitoujiandaobu 小程序：石头剪刀布（附代码说明）audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义

转载自：http://www.cnblogs.com/constantince/p/4641796.html感谢魔主的总结分析，读完收益匪浅。本篇是Chrome开发者工具的结尾篇，最后为大家介绍几款功能强大的插件。在chrome商店里面有很多插件，没事建议大家去逛逛。不过需要FQ，所以诸位请自备神器。一、皮肤插件　　首先是大家期盼已久，翘首以盼的皮肤插件。这款插件叫DevT

小编为各位宅在家里的朋友分享10款超炫HTML5游戏，让我们在不仅获得快乐的同时又可以学到新鲜的HTML5知识，一起来看看吧。1、HTML5版切水果游戏 HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏，记得切水果游戏当年非常火，今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善，但是该HTML5切水果游戏也算有声有色

HTML5非常强大，今天我们再一次向大家分享8款功能强大的最新HTML5特效实例，包含菜单、图片、Canvas动画等，一起来欣赏吧。1、HTML5 Canvas画板画图工具 可定义笔刷和画布HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定

20位活跃在Github上的国内技术大牛本文列举了20位在Github上非常活跃的国内大牛，看看其中是不是很多熟悉的面孔？1. lifesinger（玉伯）Github主页：        https://github.com/lifesinger微博：@        玉伯也叫射雕玉伯（王保平），淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库

近两年前端领域风云变幻，各种技术栈层出不穷。React、Angular2、Vue2逐步三分天下，Webpack + Babel + ES6模式如日中天，PostCSS大有取代SASS、LESS、Stylus的趋势，还有HTTP2、WebComponents、WebAssembly、函数式编程等新概念不断涌现。让我们这些前端工程师应接不暇、感叹不已：“今年一个技术还没学会，明年可能就不用学了。”

session和cookie作用原理,区别 Cookie概念      在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能.     是否设置过期时间:              如果不设置 过期时间,则表示这个 Cookie生命周期为 浏览器会话期间 , 只要关闭浏览

本文转自：https://github.com/liumingmusic/toilet-weapp  转载请注明出处。微信小程序找厕所（小明带你找厕所） 直接扫描体验预览1 需求梳理1.1 前言v1.0虽然已经满足实际需求，但是在ios和android两个平台显示的效果还是不尽相同，特别是地图上面路径规划功能。为此V2.0主要

1 前端工程化流程转自：https://lluvio.github.io/blog/front-end-architecture.html在知乎上看到 赵雨森同学 提到前端工程化有四个方面，模块化、组件化、规范化、自动化，本人十分赞同，我在工作中也慢慢这几个方向作出了总结1.1 模块化模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在

性能优化是老生常谈了，从雅虎的N条军规，前端各种优化准则，到2010年Google IO上 Steven 提出的高性能建站指南，都在告诉开发者，一个站点的性能非常重要，如何在有限的带宽条件下，达到极限的访问性能，如何让访问者，无论是从响应速度，视觉感官，操作流畅度都达到最佳体验, 是目前Web技术上的一个至关重要的挑战.相较于前端， 后端的性能优化手段非常多。 这里前端的放在后面讨论，先从

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6183本文可以转载，但务必注明原作者和原出处，以及请勿对原文内容进行编辑。之前知乎上有不少同行邀请我回答一些前端相关问题，但是，大家都知道了，要认真回答一个问题是需要大量时间和精力的，对于还在不断学习积累阶段的我，时不时分散原本的精力，打乱自己原本的节奏，实际上是一

通过js控制根目录font-size，从而做到屏幕适配。(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = funct

2017-09-11更新：更新到webpack 2.6.1所对应的配置，完善部分代码注释。由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发（dev）和构建（buil

什么是JSONP首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。那么JSONP是什么呢？ 首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可

待续

阅读本文前，期待您对promise和ES6(ECMA2015)有所了解，会更容易理解。本文以体验为主，不会深入说明，结尾有详细的文章引用。第一个例子Async/Await应该是目前最简单的异步方案了，首先来看个例子。这里我们要实现一个暂停功能，输入N毫秒，则停顿N毫秒后才继续往下执行。var sleep = function (time) { return

英文原版链接，若是觉得本文哪里不好还请指出，以便及时修改目录（分7类，共35条）：[内容]尽量减少HTTP请求数[服务器]使用CDN（Content Delivery Network）[服务器]添上Expires或者Cache-Control HTTP头[服务器]Gzip组件[css]把样式表放在顶部[js]把脚本放在底部[css]避免使用CSS

偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持

最近了解下基于 Token 的身份验证，跟大伙分享下。很多大型网站也都在用，比如 Facebook，Twitter，Google+，Github 等等，比起传统的身份验证方法，Token 扩展性更强，也更安全点，非常适合用在 Web 应用或者移动应用上。Token 的中文有人翻译成 “令牌”，我觉得挺好，意思就是，你拿着这个令牌，才能过一些关卡。传统身份验证的方法HTTP 是一种没

Api参考此文档翻译自 API Reference （英语），版本为 2013-9-9 。不能保证文档的同步更新，因此，需要了解最新的开发特性，请移步英文版 API 参考 。d3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法（semantic versioning）。 你可以用 d3.version 查看当前的版本信息。d3 (核心部分)

这篇文章主要为大家详细介绍了本地存储localStorage的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下一、什么是localStorage？在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中

1、方可成的博客 （国内政治新闻报道兴趣） http://fangkc.cn/2、cici程的博客（留学英国，美食、旅行的故事玲琅满目） http://blog.sina.com.cn/ciciatc3、月光博客 （关注互联网和搜索引擎的IT科技博客） http://www.williamlong.info/4、...

1. Fiddler 抓包简介    1）. 字段说明    2）. Statistics 请求的性能数据分析    3）. Inspectors 查看数据内容    4）. AutoResponder 允许拦截制定规则的请求    5）. Filters 请求过滤规则    6）. Timeline 请求响应时间2. Fiddler 设置解密HTTPS的网络数据

一、 什么是懒加载      懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。二、为什么需要懒加载      在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时三、如

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码router/index.js 路由相关信息,该路由文件引入了多个 .vue组件import Hello from '@/components/Hello'

今天跟同事讨论起网站效率优化的问题。说起优化，首先当然想到的是压缩功能了呀。然后，就肯定是Gzip咯。ok，简单的百度了一下Gzip在nodejs中的实现。然后，就找到了如下方式。操作：首先，在项目根目录下运行npm，安装Gzip所需要用到的包"compression"。运行cmd，在E:\ProjectOne目录下，执行以下命令。

一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？    JQuery提供的Ajax方法：$.ajax({ url: , type: '', dataType: '', data: { }, success: function(){

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...

在 30分钟掌握ES6/ES2015核心内容（上）我们讲解了es6最常用的一些语法：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments俗话说打铁要趁热，今天我们继续讲es6其他几个非常有用的新特性。import ex

Js apply方法详解  我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..    主要我是要解决一下几个问题:    1.apply和cal

首先，我们来考虑一下什么是架构：软件架构_百度百科软件架构（software architecture）是一系列相关的抽象模式，用于指导大型软件系统各个方面的设计。传统软件架构描述的对象是直接构成系统的抽象组件，侧重于系统的抽象、拆分、组织方式等。所以如果从传统软件架构定义出发，前端架构可能就是指前端项目的系统设计了。在进行系统设计之前，由于前端开发语言缺乏一定的工程能力，所以web前

一、出发点　　随着Web技术的不断发展，前端架构框架、UI框架、构建工具、CSS预处理等层出不穷，各有千秋。太多的框架在形成初期，都曾在web领域掀起过一场技术浪潮，可有些却仅仅是昙花一现，随着他们用户量的逐渐减少，社区也越来越不活跃。如：meteor、backbone、ember、knockout。不禁感叹技术的更新换代来的太突然。为了追赶技术更新的脚步，保证技术实施的高性能，强