摘要：
一、概述Google Chrome浏览器提供了非常强大的JS调试工具，Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存（heap）快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用到的所有对象，以及这些对象所占用的内存大小、引用的层级关系等等。这些描述文件为内存泄漏的排查提供了非常有用的信息。注意：本文里的所有例子均基于Google Chrome浏览器。什么是heapJS运行的时候，会有栈内存（stack）和堆内存（heap），当我们用new实例化一个类的时候，这个new出来的对象就保存在heap里面，而这个对象的引用则存储在stack里。程 阅读全文
随笔分类 - 一些原理
图片预加载
2013-07-16 19:13 by 臭小子1983, 616 阅读, 收藏,
摘要：
资源预加载可以提升用户体验，如果每次用户打开页面都要加载图片,js,css等资源，会影响用户体验。资源预加载可以一定程度上改善这种情况。 我们可以做的是，但第一个页面load完的时候，在用户阅读网页的空隙，把下一个页面所用的资源提前加载过来cache住，这样下个页面就直接读缓存资源了，这样可以... 阅读全文
瀑布流原理
2013-07-15 13:43 by 臭小子1983, 645 阅读, 收藏,
摘要：
一、瀑布流的布局1、浮动列布局 蘑菇街和哇哦 采用的方式各列固定宽度，并且左浮动；一列中的数据块为一组，列中的每个数据块依次排列即可；更多数据加载时，需要分别插入到不同的列上；优点:布局简单，应该说没啥特别的难点；不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。缺点:列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；滚动加载更多数据时，还要指定插入到第几列中，还是不方便。2、CSS3 定义 W3C 中有讲述关于多列布局的文档，排列出来的样子:由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框.. 阅读全文
按需加载图片的 jQuery 插件 lazyload.js 使用方法详解
2013-03-08 11:38 by 臭小子1983, 977 阅读, 收藏,
摘要：
Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。Lazy Load 插件原理修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。但是现在，很.. 阅读全文
浏览器是怎样工作的（二）：渲染引擎，HTML解析
2012-12-13 11:55 by 臭小子1983, 205 阅读, 收藏,
摘要：
渲染引擎渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片。各种渲染引擎我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。Webkit 是一个开源的渲染引擎，它源自Linux平台 阅读全文
浏览器是怎样工作的（一）：基础知识
2012-12-13 11:24 by 臭小子1983, 168 阅读, 收藏,
摘要：
译注：前两天看到一篇不错的英文文章，叫做 How browsers work，该文概要的介绍了浏览器从头到尾的工作机制，包括HTML等的解析，DOM树的生成，节点与CSS的渲染等等，对于想学习浏览器源码的同学来说，实在是很棒的一篇科普文章。尽管对于每部分，该文的描述并不足够深入，但综合来讲，即使没兴趣学浏览器源码，也还是有一些值的学习的思想在里面的，可以权当开拓下视野，有益无害。于是，我想分节挑重点翻译一下与大家分享。以下为译文：我们要讨论的浏览器当今主流浏览器有五类： Internet Explorer, Firefox, Safari, Chrome 以及 Opera。 我会基于开源浏览器 阅读全文
响应式网页设计
2012-05-14 15:41 by 臭小子1983, 309 阅读, 收藏,
摘要：
这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下。上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。移动互联网的现状和未来在说到这个话题前，我们先看下网页设计和前端开发的现状：全球有超过53亿手机用户（包括传统手机）国内3G用户超过1亿iPhone4手机在2010年出货量超过3000万部；iPhone 4S上市前3天卖掉400万部；Android手机每天激活超过50万部；iPad出货量已经超过2.5亿部；预计到2015年，移动互联网的数据流量将超越桌面端的流量。。。。嗯 阅读全文
前端必读：浏览器内部工作原理
2012-04-15 12:17 by 臭小子1983, 172 阅读, 收藏,
摘要：
目录 一、介绍 二、渲染引擎 三、解析与DOM树构建 四、渲染树构建 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型 英文原文：How Browsers Work: Behind the Scenes of Modern Web Browsers 一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。 本文将基于一些开源浏... 阅读全文
常见Web技术之间的关系，你了解多少？（转）
2012-04-15 10:44 by 臭小子1983, 216 阅读, 收藏,
摘要：
如果你是一个Web开发初学者，那么你难免会在网上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等这些词的意思，然而，随着学习的深入。当你把他们搅在一起，你又糊涂了，你会不停的问，HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科，还是一些IT专题网站，又或者一些牛人博客，他们都会告诉你，某个单一的东西是什么，这类文章很多，但很少有涉及，它们组合起来是什么，有什么用。我想，我写这篇文章，就是为了说明一下这个他们很少涉及的问题。 归纳、总结、提炼能力是我们进步的发动机，这种能力是可以有意识地培养的，拉卡拉电子支付公司董. 阅读全文
浙公网安备 33010602011771号