JS魔法堂：Data URI Scheme介绍

一.前言上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先不管到底有用与否,仅仅记录理论知识.也希望大家一起来分享实战经验啊! 二.从HTTP URI Scheme入手对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://…

JS魔法堂：LINK元素深入详解

一.前言我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件,但LINK元素各属性的具体含义.资源加载行为等方面却了解不多,本文打算稍微深入一下. 由于内容较多,特设目录一坨: 二.到底有没有结束标签? 三.普通属性介绍四.属性disabled详解 1. Attribute和Property的disabled 2. disabl…

JS魔法堂：jsDeferred源码剖析

一.前言最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计>提供该资讯,再次感谢),追本溯源地了解jsDeferred是十分有必要的,并且当你看过官网(http://cho45.stfuawsc.com/jsdeferred/)的新手引导后就会有种不好好学学就太可惜的感觉了,而只看API和使用指南是无法满足我对它的好奇心的,通过解读源码读透它的设计思想才是根本.…

JS魔法堂：IMG元素加载行为详解

一.前言在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属性和事件资源加载首先当然是确定资源位置的 src属性 .随之就是资源加载成功与否的 onload事件和 onerror事件 ,对于IE5~10来说还多了一个 onreadystatechage事件和与该事件相关联的 readyState属性和 complete属性 . onload事件 ,当资源加载完…

JS魔法堂：属性、特性，傻傻分不清楚

一.前言或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; console.log(el.getAttribute('hello')); // IE67下输出test,其他浏览器输出null “搞毛啊?”,苦逼的Jser对着浏览器大呼一声.然后就用下面蹩脚的方式草草处理掉了. function getAttr(el, prop){ return el[prop] || el…

JS魔法堂:不完全国际化&本地化手册之实战篇

前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备. 本篇将于大家一起挽起袖子撸代码:) 如何获取Language tag? 在实现本地化处理前,我们起码先要获取Language tag吧?那么获取方式分为两类 1.直接获取浏览器的Language tag信息一般来说浏览器语言的版本标示着用户所属或…

JS魔法堂：那些困扰你的DOM集合类型

一.前言大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = document.getElementsByName('dummyName'); var node = nodes.namedItem('id'); 答案是两种都有可能哦!document.getElementsByName在Chrome和FF30.0中返回NodeList(木有namedItem方法的),在IE…

网页优化URI（http URI scheme与data URI scheme）

网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网页里面,这个密技的官方名称是 data URI scheme. Goolge Wave 中CSS定义的图片URL全部是 data URI scheme!那什么是 data URI scheme? 假设你有以下的图像: A把它在网页上显示出来的标准方法是: <img src="http://sj…

关于 Data URI Scheme -- data:image/jpg;base64

转载一篇大神的文章大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/7gAOQWRvYmUAZMAA= //这是随便写的,不要访问什么是DATA URI Scheme呢? 其实就是形如data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAA…

Data URI Scheme,base64

一.从HTTP URI Scheme入手对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,href属性值http://github.com就是HTTP URI Scheme,那么什么是DATA URI Scheme呢?其实就是形如data:text/jpeg;base64,XINGSXXIANGJIJIGSAG==的资源链接,一般出现在img元素的src属性. DATA URI Sch…

前端-Data URI Scheme

了解Data URI scheme,首要要掌握一些URI.URL的基本知识,很多做移动端上开发的同学对这两个基本概念掌握的不够,本文首先会对这两个基本概念做一些简单的介绍. 基本概念 <HTTP权威指南>对URI和URL的定义: URI(Uniform Resource Identifier):统一资源标识符,服务器资源名被称为统一资源标识符. URL(Uniform Resource Locator):统一资源定位符,描述了一台特定服务器上某资源的特定位置. URN(Uniform Reso…

JS魔法堂:不完全国际化&本地化手册之理論篇

前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备. 本篇将阐述国际化和本地化的概念,以及其中一个很重要的概念--Language tag(也叫Language code 或 Culture). 何为国际化? 国际化我认为就是应用支持多语言和文化习俗(数字.货币.日期和字符比较算法等),而本地化则是应用…

JS魔法堂：判断节点位置关系

一.前言在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二.祖孙关系 html <div id="ancestor"> <div id="parent"> <div id="son">son</div> </div> </div> &l…

JS魔法堂：doctype我们应该了解的基础知识

一.前言什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DTD就是声明在文档首行,位于<html>前,用于告知浏览器该文档遵循那种级别的HTML或XHTML规范. 其声明格式如下: <!DOCTYPE① html② PUBLIC③ "公共标识符"④ "系统标识符"⑤ [<!ELEMENT name (#P…

JS魔法堂：浏览器模式和文档模式怎么玩？

一.前言从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE,但jser们也不能完全信任它,因为它只是提供尽可能的文档模式模拟而已. 本篇大部分内容来源于官方解说:http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx,并尽量融入个人平常工作中踩过的坑加以…

JS魔法堂：精确判断IE的文档模式by特征嗅探

一.前言苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器探测后另一利器处理上述问题. 二.何为特征嗅探从前我们都是通过对navigator.userAgent或navigator.appVersion两个属性值进行特定字符串匹配和萃取来区分浏览器类型和获取版本号的.但随着IE8提供可选的文档兼容性模式设置和各种加壳浏览器的出现,导致无法通过naviga…

JS魔法堂：追忆那些原始的选择器

一.前言首先这里说的原始选择器是指除 querySelector . querySelectorAll 外的其他选择器.从前我只使用 getElementById 获取元素并没有觉得有什么问题,但随着参与项目的前端规模逐步扩大,踩的坑就越来越多,于是将踩过的和学习过的经验教训记录在这里,供以后好查阅…

data URI scheme

优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把图像的内容嵌入到网页里面,官方名称是 data URI scheme. 什么是 data URI scheme? 假设你有一个图像,把它在网页上显示出来的标准方法是: <img src="http://www.hkpug.net/files/images/check.png"/>…

data URI scheme及其应用

data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI由于将图片採用了base 64的编码方式进行表达.所以还是须要进行HTTP去下载内容,并且这种渲染方式同一时候也加大了内存.cpu等等的压力,因此选择的时候须要进行性能方面的权衡). 比方一张图片用http请求方式进行请求而且显示的方法: <img src="http://sjolzy.cn/…

服务器端发送邮件签名采用Data URI scheme包含图片

要在服务器端基于HTML,拼接邮件内容,原来用户使用outlook采用了邮件签名,签名里含有公司Logo的图片,Outlook的msg文件里是专有的cid:xxxx,这里借用Data URI scheme,把图片嵌入HTML片段里. http://www.cnblogs.com/XL-Liang/archive/2012/06/01/2530509.html http://www.atool.org/img2base64.php…

006-网页嵌入数据Data URI scheme

在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入优点: 减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制. 对于小文件会降低带宽.虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽. 对于HTTPS站点,HTTPS和HTTP混用会有安全…

Data URI scheme - 数据的uri模式

----------------------------------------------------------------------------------------------- Data URI scheme is a URI scheme(统一资源定位符的模式). 我们熟知的站点引用资源文件,都是类似http://www.chenwei.ws/demo.png这种的格式,但是data URI scheme 提供将外部资源嵌入到网页中的方法. 它是一种文件或文档的形式,这项技术允许…