更新于:03-05 10:57

有关[javascript]标签推荐

微豆 - Vue 2.0 实现豆瓣 Web App 教程

于03-17 03:53 - RalfZ - vue-cli vuex vue-router vue.js javascript
一个使用 Vue.js 与 Material Design 重构 豆瓣 的项目. 项目网站 http://vdo.ralfz.com/. # 克隆项目到本地 git clone https://github.com/RalfZhang/Vdo.git # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run dev.

Web性能优化

于03-14 11:18 - Kyxy - 性能 javascript
Web网站的性能细线在几个方面:. 通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景,模拟真实的网络加载情况:. 2.2 Timeline工具的各个组成.

JavaScript 启动性能瓶颈分析与解决方案

于02-13 14:28 - 王下邀月熊_Chevalier - javascript v8 性能优化
JavaScript 启动性能瓶颈分析与解决方案 翻译自 Addy Osmani 的. JavaScript Start-up Performance,从属于笔者的 Web 前端入门与工程实践. 本文已获得原作者授权,为InfoQ中文站特供稿件,首发地址为 这里;如需转载,请与InfoQ中文站联系.

揭秘babel的魔法之class魔法处理

于01-13 12:48 - lucas_580e331d326b4 - javascript babel es6 ecmascript es5
2017年,很多人已经开始接触ES6环境,并且早已经用在了生产当中. 我们知道ES6在大部分浏览器还是跑不通的,因此我们使用了伟大的Babel来进行编译. 很多人可能没有关心过,经过Babel编译之后,我们华丽的ES6代码究竟变成了什么样子. 这篇文章,针对Babel对ES6里面“类class”的编译进行分析,你可以在线 测试编译结果,毕竟纸上得来终觉浅,自己动手,才能真正体会其中的奥秘.

404错误处理:重定向还是直接404?

于08-03 00:00 - Harttle - AJAX HTML HTTP JavaScript 搜索引擎
小型网站开发通常会使用某种Web应用框架,比如类似Spring、Express、Django等框架. 这些框架会给出自定义错误页面的方式. 当404发生时Web框架会渲染并返回对应的错误页面. 这是最自然和直接的错误处理方式,但有时我们希望错误页面可以单独Serve,比如放到CDN上. 本文档依据RFC 2616(HTTP 1.1)比较几种常见的404错误处理方法:.

异步脚本载入提高页面性能

于05-18 00:00 - Harttle - AJAX Chrome DOM HTML JavaScript
可能很多人都知道JavaScript的载入和渲染会暂停DOM解析,但可能仍缺乏直观的体验. 本文通过几个例子详述脚本对页面渲染的影响,以及如何使用异步脚本载入策略提供页面性能和用户体验. 包括在脚本载入缓慢或错误时尽早显示整个页面内容,以及早点结束浏览器忙提示(进度条、旋转图标、状态栏等). 要理解异步脚本载入的用处首先要了解浏览器渲染DOM的流程,以及各阶段用户体验的差别.

样式表的载入会延迟DOM载入事件

于05-15 00:00 - Harttle - CSS DOM JavaScript 事件 Firefox
绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行. 不管是直接用 DOM API 实现还是使用 jQuery,最终都是 DOMContentLoaded事件在起作用. 本文讨论一个我们习以为常却很少了解的问题: 样式文件的载入会延迟脚本执行,以及 DOMContentLoaded事件的触发.

兼容所有浏览器的 DOM 载入事件

于05-14 00:00 - Harttle - Chrome DOM HTML JavaScript jQuery
本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器. 接着介绍jQuery对该问题的实现源码,以及jQuery中 $(document).ready()和 $(window).load()方法的区别.

浏览器同源政策及其规避方法

于04-08 14:02 - - JavaScript
浏览器安全的基石是"同源政策"( same-origin policy). 很多开发者都知道这一点,但了解得不全面. 本文详细介绍"同源政策"的各个方面,以及如何规避它. 1995年,同源政策由 Netscape 公司引入浏览器. 目前,所有浏览器都实行这个政策.

JavaScript 方法的4种调用模式

于02-03 00:00 - - JavaScript 构造函数 调用模式
函数(Function)是JavaScript的基本模块单元,JavaScript的代码重用, 信息隐藏,对象组合等都可以借助函数来实现. JavaScript中的函数有4种调用模式:. 方法调用(Method Invocation Pattern). 函数调用(Function Invocation Pattern).

Hybrid APP架构设计思路

于01-07 01:41 - dmyang - hybrid-app javascript
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue. 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.

【译】使用 AngularJS 和 Electron 构建桌面应用

于12-25 17:29 - PuYart - javascript angularjs electron
原文: Creating Desktop Applications With AngularJS and GitHub Electron. GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.

你有必要知道的 25 个 JavaScript 面试题

于12-18 16:55 - dwqs - JavaScript javascript 面试
你有必要知道的 25 个 JavaScript 面试题. typeof bar === "object" 判断. bar 是不是一个对象有神马潜在的弊端. 使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof):. let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null === 'object'); //true.

WebPack常用功能介绍

于12-20 07:58 - tinybear - webpack javascript
WebPack常用功能介绍. Webpack是一款用户打包前端模块的工具. 主要是用来打包在浏览器端使用的javascript的. 同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等. 个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.

懒人必备的移动端定宽网页适配方案

于12-08 05:49 - JerryZou - 移动端适配 移动端页面 javascript viewport android
本文最初发布于我的个人博客: 咀嚼之味. 如今移动设备的分辨率纷繁复杂. 以前仅仅是安卓机拥有各种各样的适配问题,如今 iPhone 也拥有了三种主流的分辨率,而未来的 iPhone 7 可能又会玩出什么新花样. 如何以不变应万变,用简简单单的几行代码就能支持种类繁多的屏幕分辨率呢. 今天就给大家介绍一种懒人必备的移动端定宽网页适配方法.

为什么说DOM操作很慢

于12-08 06:31 - leozdgao - dom javascript
也可以在这里看: http://leozdgao.me/why-dom-slow/. 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).

使用Chrome DevTools的Timeline分析页面性能

于11-13 07:50 - Horve大叔 - chrome javascript devtools
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择. 这种方式拥有非常明显的优势:跨平台、开发便捷、便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂. 但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据.

内存泄露从入门到精通三部曲之排查方法篇

于11-13 08:27 - 腾讯Bugly - python javascript
腾讯Bugly特约作者: 姚潮生. 重复多次操作关键的可疑的路径,从内存监控工具中观察内存曲线,是否存在不断上升的趋势且不会在程序返回时明显回落. 这种方式可以发现最基本,也是最明显的内存泄露问题,对用户价值最大,操作难度小,性价比极高. 2.1 MAT分析heap的总内存占用大小来初步判断是否存在泄露.

传统 Ajax 已死,Fetch 永生

于09-30 09:29 - Cam - ajax fetch async 异步编程 javascript
原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的. $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定. 结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的.

初探 performance – 监控网页与程序性能

于09-03 07:26 - TAT.felix - JavaScript Web 前端优化 Web开发
使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据. 配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦. 额,先看下兼容性如何: http://caniuse.com/#feat=nav-timing. 这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台,如果你用的是其他浏览器,自查兼容性哈~.

前端性能优化指南

于08-30 15:02 - kahn1990 - web 性能优化 javascript 前端
XMLHttpRequest时,而URL长度不到. GET类型请求只需要发送一个. CSS等静态文件放在静态资源服务器上并配置单独域名,客户端请求静态文件的时候,减少. COOKIE反复传输时对主域名的影响. cloneNode在外部更新节点然后再通过. replace与原始节点互换. >多个节点插入操作,即使在外面设置节点的元素和风格再插入,由于多个节点还是会引发多次reflow.

javaScript跨浏览器事件处理程序

于08-25 13:45 - 小東仔 - javascript web前端开发 javascript高级程序设计
最近在阅读 javascript高级程序设计,事件这一块还是有很多东西要学的,就把一些思考和总结记录下. 在事件处理,事件对象,阻止事件的传播等方法或对象存在着浏览器兼容性问题,开发过程中最好编写成一个通用的事件处理工具. //在这里添加一些通用的事件处理方法. 事件的绑定主要为IE8以下浏览器做兼容处理:.

使用Benchmark.js和jsPerf分析代码性能

于08-24 08:30 - trigkit4 - benchmark javascript jsperf
前端开发中,掌握好浏览器的特性进行有针对性的性能调优是一项基本工作,同时,比较不同代码的执行速度也是一项关键的工作. 比如,当我们想比较 RegExp的 test方法和 String对象的 indexOf方法查找字符串谁的速度更快的话, js代码在不同的浏览器,不同的操作系统环境运行的效率可能是不一样的,这就是为什么我们需要对其进行基准测试,在做基准测试方面,我们可以使用 Benchmark.js和使用 jsPerf(一个基于 JSLitmus的基准测试库).

浏览器事件模型中捕获阶段、目标阶段、冒泡阶段实例详解

于08-23 09:37 - 本期节目 - javascript 事件 事件监听 事件绑定
如果对事件大概了解,可能知道有事件冒泡这回事,但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下,我抽时间整理了一下相关的知识. 本文主要对事件机制一些细节进行讨论,过于基础的事件绑定知识方法没有介绍. 特别少的篇幅关注浏览器兼容问题,毕竟原理了解了,兼容性问题可以自己想办法解决了. 在浏览器相对标准化之前,各个浏览器厂商都是自己实现的事件模型,有的用了冒泡,有的用了捕获,W3C为了兼顾之前的标准,将事件发生定义成如下三个阶段:.

Handlebars.js初探

于08-02 07:30 - dwqs - JavaScript handlebars js模板
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板. 利用Handlebars处理HTML模板时,一般步骤如下:. 下图是html模板被渲染后的结果:. 有两种方式来实现这个小小的demo. 1.直接在HTML中渲染. 2.借用 <script>标签.

Qunit初探

于07-28 14:53 - dwqs - JavaScript JQuery qunit 单元测试
2008年5月, Qunit 随JQuery的核心库一起发布,在2009年重构之后,Qunit独立出来,可以用于测试各种Javascript应用和框架,其提供的断言方法遵循了CommonJS维护规范. 尽管Qunit能再服务端和命令行运行,但是其主要还是用于测试浏览器端的Javascript. 先看一个简单地测试demo:.

【译】创建优雅表格的8个js工具

于07-06 02:08 - dwqs - JavaScript javascript 表格
当需要呈现数百个表的数据时,展示和可访问性扮演着至关重要的角色. 在这种情况下,倘若一个数据网格能够支持大量数据集的HTML Table并提供诸如排序、搜索、过滤和分页等功能,那是棒棒哒. 在这篇文章中,将介绍8个用于创建优雅表格的js工具. SigmaGrid是一个开源的Ajax数据表格组件,可以在一个可滚动和可排序的表格中展示和编辑数据.

JavaScript 异步机制及应用 入门教程

于06-28 18:54 - ARGUS - javascript
异步: asynchronous 简写async. 同步: synchronous 简写sync. 异步就是: N个人同时起跑, 起点和出发时间相同, 在起跑时不去关心其他人会啥时候跑完~尼玛这不废话吗. 大家都才起跑怎么知道别人多就跑完. 同步就是: N个人接力跑, 起点和出发时间不同, 且后一个人会等待前一个人跑完才能继续跑, 也就是要关心前一个人的结果(上一行代码的返回值)..

【译文】Top 10:HTML5、JavaScript 3D游戏引擎和框架

于06-24 04:13 - dwqs - HTML JavaScript HTML5 js 游戏
由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题. 基于浏览器的游戏最棒的地方是平台独立,它们能在iOS、Android、Windows或其他任何平台上运行. 有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏.

我推荐的一些前端开发工具

于06-11 13:43 - 老婆婆 - 前端开发 javascript
简洁的模版语法,简单的API,关键还能前后端(Nodejs)共用模板,简直就是前端开发利器. 今天有个想法,把 artTemplate封装下,模版 render后给 input等注册几个事件,分分钟就能实现简单的数据双向绑定. 提供强大的前端静态资源(主要是JS和CSS)构建压缩方案,前身是 Components.