文章列表
coolriver 于 4个月前发表 1340 0 2
1. 背景 产品需求来啦:点击页面上某个东西,要在新窗口中打开一个页面,注意!要在新窗口中打开。你呵呵一笑,太简单了: 1. 打开的页面地址是固定的?直接a标签加上 target="_blank" 属性搞定。 2. 打开的页面地址是动态计算的?使用js进行 window.open(url) 搞定。 如果你人品比较好,你的页面可以顺利地运行到下线为止。但如果你脸比较黑,可能会遇到以下问题: 1. 用户投诉:我在你们页面上进行的操作,怎么账号被盗了!! 2. 用户吐槽:页面卡得不行了。。。 WTF? 2. 来两个例子 2.1 例子1: 步骤: 1. 进入这个微博帖子页面: http://blog.sina.com.cn/s/blog_c3a321040102wdq4.html [http://blog.sina.com.cn/s/blog_c3a321040102wdq4.html] 2. 点击正文的”点击有惊喜哦“链接。 3. 看了下新打开的页面,什么惊喜都没有啊。。。回到上一个刚才的页面窗口。 4. 嗯?登录态丢了,重新登录一下吧。 5. 靠,中招了!
4个月前
浏览器
coolriver 于 1年前发表 2952 2 1
1 前言 对于一个web前端开发者,chrome浏览器是一个工作,学习和生活的必备工具。除了chrome本身的基本能力(控制台等)外,能大幅提高这个神器的使用体验的是,可扩展能力(插件)以及丰富的插件生态。 每个人根据使用习惯会有自己的一套插件配置(鼠标手势、代理配置等等),这些插件包括具体的插件的配置信息,甚至可以和你的google账号绑定,当你换一台电脑,只要使用相同的google账号登录chrome,就会享受到一致的使用体验。 当你打开chrome的“扩展程序”界面,看着琳琅满目的插件,有没有想过亲自动手,打造一个自己的插件呢?当然,这种想法不应该是闲着某个部位疼,刻意的去开发一个连自己都不会实际使用的插件。而应该是发现现在的 插件库 [https://chrome.google.com/webstore/category/extensions?hl=zh-CN] 里,没有一个能解决自已在使用chrome过程中某个痛点的插件。
1年前
浏览器
ouven ,https://ouvens.github.io/ 于 1年前发表 6459 4 1
2015-2016前端架构体系技术精简版 [http://7tszky.com1.z0.glb.clouddn.com/FsPayu9dzc8ecy1M16qQl5zmQe01] 点击查看github高清图 [https://github.com/ouvens/frontend-system-map] 点击查看完整版 [https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html] 一、框架与组件 **bootstrap等UI框架设计与实现 * 伸缩布局:grid网格布局 * 基础UI样式:元素reset、按钮、图片、菜单、表单 * 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 * 响应式布局:布局、结构、样式、媒体、javascript响应式 * 第三方插件:插件管理 **jQuery、zepto使用原理以及插件开发 * 支持amd、cmd、全局变量的模块化封装
1年前
浏览器
json 于 1年前发表 1585 0 0
Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大,有了这个工具,你可以做很多有趣的事情。 快速编辑HTML元素 [http://7tszky.com1.z0.glb.clouddn.com/Ft3nmg3cTHt3N-mDq7KNOei_Z_sW] 在Elements面板,鼠标双击需要打开的DOM元素标签,就可以编辑它,完成之后会自动更新页面和关闭标签。 还是在Elements面板按下ctrl + F 或 F3 ,在搜索栏里输入自己想要查找的内容,如果存在,就会在DOM中,用不同的颜色标出。 快速定位行和列 [http://7tszky.com1.z0.glb.clouddn.com/FngYY2Uo6IUh9gs9CiL6vIcKlnL_] 在sources面板中,选择相应的js或css文件,按下ctrl + O ,在选择指定的文件中使用“:行数:列数”,可以快速定位到相应的行和列。 展开所有子节点
1年前
浏览器
coverguo 于 1年前发表 2341 0 2
最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个讲解。 我们了解网站的执行性能十分重要,执行性能问题常常体现在内存泄露上, 而在众多性能优化中,内存泄露相比于其他性能缺陷和错误而言,是不太容易去发现和解决。在一些简单小型的业务和项目中,内存泄露并不一定存在,且不能带来特别大的危害,因此也不会让我们去重视和在意,但如果项目变得复杂些,往往内存问题就会暴露出来。而这些问题在一些小内存的设备上(如移动端)也会带来更严重的影响。 所以,找到内存泄露并且解决它是处理这类问题的关键。而如何找到内存泄露,则需要使用到chrome的Timeline的工具啦。 打开TIMELINE 在chrome浏览器中,按下F12,打开开发者工具,然后选择Timeline的选项卡,即可看到以下面板啦。[http://7tszky.com1.z0.glb.clouddn.com/FvPrf58OuFrSclihPo6RU_oqOT5k]
1年前
浏览器
王少飞 于 1年前发表 2854 1 2
浏览器工作大致流程 废话少说,先来看个图: [http://7tszky.com1.z0.glb.clouddn.com/Fs-4pQMkTCUIeOj0XjSDdZkHzs0N] 从上面这个图中,我们可以看到那么几个事: 1)浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS,解析CSS会产生CSS规则树。 Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意: Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。 CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
1年前
浏览器
vienwu 于 2年前发表 2651 1 1
javascript的出错我们应该都很熟悉,例如 xxx undefined , SyntaxError 等。 我们team将出现错误的javascript代码取名为badjs,也有一个开源的badjs项目,用于捕获和分析js错误,并提供了一些基础的报表数据分析。 捕获错误一般有两种方式: * 使用window.onerror()捕获全局的js错误信息 * 使用 try{...}catch(e){...} 包裹需要执行的代码,获取error对象的属性定位错误并上报 第一种方式最简单,但当执行的js代码和我们的站点在不同域即跨域时,由于浏览器的安全限制,onerror()方法只能捕获到一个固定的错误代码 Script error. 。 具体可参考这里: 点击查看 [http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors] 我们团队目前的业务基本都会将静态资源部署到cdn服务器,和站点处于不同域,所以需要解决跨域问题。
2年前
浏览器
ouven ,https://ouvens.github.io/ 于 2年前发表 1813 2 0
一、POLYMER Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponent标准,并且Polymer可保证针对包含各种平台的Web Component规范本地实现的浏览器、库和组件的使用效果完全相同。 1.1 POLYMER框架: Polymer框架可以分为三个层次: * 基础层(platform.js):是基本构建块。大多数情况下,基础层都是本地浏览器的API。 * 核心层(polymer.js):实现基础层的辅助器。 * 元素层:建立在核心层之上的UI组件或非UI组件。 1.2 基础层 基础层包括以下技术: * DOM Mutation Oberservers和Object.observe():用于观察DOM元素的变更,是纯JavaScript对象。 * 指针事件:处理鼠标和触摸操作,支持所有的平台。 * 阴影DOM:封装元素内的结构和样式,适合自定义元素。 * 自定义元素:可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号,这是一种简单的命名空间标识,以区别于标准元素。
2年前
浏览器
ouven ,https://ouvens.github.io/ 于 2年前发表 1784 5 0
跳转进入 [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI2xIaud0toAat2XbGXE3f4MsR] http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI2xIaud0toAat2XbGXE3f4MsR [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI2xIaud0toAat2XbGXE3f4MsR] 2015-05-12
2年前
浏览器
九月 ,这... 于 2年前发表 1526 2 0
-------------------------------------------------------------------------------- 标准浏览器的事件模型是先捕获再冒泡,由于考虑到兼容问题,事件绑定一般都是基于冒泡来做的,那么什么情况下可以考虑利用捕获来做事件绑定呢? 最近在做的课程查找页上报需求的时候,有两个问题要解决: 1. 清理之前做的上报 2. 重新添加新的上报 如果在原来的基础上直接改当然可以,但是将上报和业务代码耦合显然不是理想的解决方案,由于内嵌的webview是chromium, 不用考虑兼容问题,于是尝试利用捕获来处理。 1. 大多数的上报都是点击上报 2. 捕获先于冒泡,不用考虑 stopPropagation 的影响 所以可以在最外层,基于捕获来绑定事件: var getReportKey = function($ele, max) { // 这里需要设置一个 max 值, 避免死循环 max = parseInt(max, 10) || 5; var key = []; var id = '';
2年前
浏览器
coolriver 于 2年前发表 5510 3 1
本文为初步阅读 ECMAScript6入门 [http://es6.ruanyifeng.com/] 后的一些记录与感想。 简介 ES6的设计目标,是使得JavaScript语言可以用来编写大型复杂的应用程序,成为企业级开发语言。ES6将于2015年6月正式发布。 现在最新版本的Nodejs上可以通过`--harmony`参数开启ES6的部分支持。如果旧的Nodejs版本不支持或者想体验更多的ES6 特性 可以 使用Google的[traceur](https://github.com/google/traceur-compiler)工具。traceur可以在前端编译ES6代码,也可以 在node上 编译或执行ES6代码。 * traceur在node上安装: npm install -g traceur * 直接执行ES6文件: traceur test.es6.js * 编译ES6文件到ES5文件: traceur --script test.es6.js --out test.es5.js ES6在很方面都对ES5有增强,下面将从不同方面对ES6在ES5上的加强进行介绍。
2年前
浏览器
ouven ,https://ouvens.github.io/ 于 2年前发表 2671 4 0
2015-04-27 跳转进入 [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g] http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g [http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g]
2年前
浏览器