Day: December 7, 2015

本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了 inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和 height的特性，又保持了inline元素不换行的特性。 举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过l… Read More

现在说互联网能为我们商家带来巨大的便利，我想没人去反对，而且各路商家积极探索自己的互联网道路的趋势就足 以可以证明。而在想要在互联网上有点儿作为，找存在感是不可或缺的一个大工程。于是大家总是绞尽脑汁去思考，做网站、做推广、做宣传，甚至亏本买热闹。而 地图这个玩意在当下随着O2O概念的流行有让大家关注。 记得多年前，我们查地图还是用着Google，而现在各路豪杰争相做地图。如百度地图、高德地图、腾讯地图、好搜地图等等，可想而知对于那些互联网 巨头而言，地图肯定是一个获取流量的入口。而对于我们需要宣传和推广的商户而言，同样是获取关注的一种渠道。我认为这样形形色色的地图能带给我们商家的好 处主要有如下几点： 1… Read More

一、相关知识讲解 看过雅虎的前端优化35条建议，都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。 减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。 这里我们就拿雅虎的第一条建议：尽量减少HTTP请求数里的减少图片请求数量 进行讲解。 我们都知道，一个网站的一个页面可能有很多小图标，例如一些按钮、箭头等等。当加载html文档时，只… Read More

在网站开发过程中，对于页面的加载效率一般都想尽办法求快。那么，怎么让才能更快呢？减少页面请求 是一个优化页面加载速度很好的方法。上一篇博文 我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”，那么，这一篇博文将讲解  “ 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片”。 一、为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片的方法减少HTTP请求数？ 为什么我会讲解 “将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片” 这一种方式来减少HTTP请求，进而优化页面呢？这里呢，是涉及到移动端的图标使用。上一篇博文所讲的方法能否… Read More

上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型，本文我们继续深入，谈谈另一个重要的节点类型 Element 。 1、概况 Element 类型用于表现 HTML 或 XML 元素，提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征： nodeType 的值为 1 nodeName 的值为元素的标签名 nodeValue 的值为null parentNode 可能是 Document 或者 Element 其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或者 EntityReference 要访问… Read More

property和attribute的汉语翻译几乎相同，都有“属性”的意义（这里姑且称attribute为“特性”，以方便区分），而他们的取值也经常相同，但有时又会踩坑，发现二者会不相等，不同步。 0.奇葩的IE 本文开始之前不得不提一下万恶之源IE,在IE<9中,浏览器会把所有的property和attribute强制映射，即property = attribute. (class特殊：className = class)。正因为IE<9中的这种映射误导了很多人以为二者完全相同。 1. Property 每个DOM节点都是一个object对象，它可以像其他的js Object一样具有自己的proper… Read More

我们知道，DOM是用于操作XML和HTML文档的应用程序接口，用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和 JavaScript（这里指ECMScript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAScript每次访问DOM，都要途径这座桥， 并交纳“过桥费”,访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。我们不可能不用 DOM的接口，那么，怎样才能提高程序的效率？ 1、DOM访问与修改 访问DOM元素是有代价的（“过桥费”你懂的），修改元素代价更是昂贵，因为它会导致浏览器重新计算页面的几何变化（重排和重绘）。 当然最… Read More

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。 基本概念 在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。 Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类… Read More