代码改变世界

随笔分类 -  前端技术

如何成为一名优秀的前端工程师

2013-01-25 14:14 by 子冬, 2150 阅读, 收藏,
摘要: 近几年前端工程师变的多了,关于前端工程师的学习资料也变多了。 想想4,5年前,应该没有前端开发工程师这样的职位,或者说相当少。现在这种情况可能与HTML5的大力宣传有关,当然也要归功与国内的几个优秀互联网公司对前端领域的研究与推广。一个前端工程师需要掌握什么样的技术呢,我归纳以下几点:1,精通HTML,CSS语法,可以手写HTML,CSS代码,合格的前端开发人员只需要用一个记事本就可以完成网页的前端开发工作。2,精通Javascript,精通浏览器之前的差异化处理并且知道因为什么而导致的这种差异,了解流行JS库的架构及优点(不需要逐行看它的代码,但一定要了解它的思想)。3,熟读W3C的HTML 阅读全文

几张图让你了解HTTP协议

2013-01-10 15:09 by 子冬, 340 阅读, 收藏,
摘要: 1,TCP/IP基础层次图2,TCP/IP基础数据封装3,HTTP协议 协议结构4,HTTP协议 例子 阅读全文

RESTful HTTP (转载)

2012-08-01 14:37 by 子冬, 399 阅读, 收藏,
摘要: REST是一种风格,而不是标准。因为既没有REST RFC,也没有REST协议规范或者类似的规定。REST架构是Roy Fielding(他也是HTTP和URI规范的主要作者之一)在一篇论文中描述的。像REST这样的架构风格通常会定义一组高层决定让应用程序去实现。所有实现了某种特定架构风格的应用程序,都使用相同的模式,也用相同的方式使用别的架构元素,如缓存,分布式策略等。Roy Fielding把REST定义成一种架构风格,其目标是“使延迟和网络交互最小化,同时使组件实现的独立性和扩展性最大化” 虽然REST受Web技术的影响很深,但是理论上REST架构风格并非绑定在HTTP上。然而,HTTP 阅读全文

现代浏览器揭秘(草)

2011-03-22 16:21 by 子冬, 327 阅读, 收藏,
摘要: 简介Web浏览器恐怕是用户最多的软件了。本文将介绍浏览器的工作原理。想知道从你在地址栏中输入“google.com”,到窗口中显示Google主页的过程中都发生了什么?本文会为你揭开这个秘密。要讨论的浏览器今天,人们主要使用5种浏览器:Internet Explorer、Firefox、Safari、Chrome和Opera。这篇文章的分析源自开源浏览器——Firefox、Chrome和 Safari,Safari是部分开源的。根据W3C对浏览器使用情况的统计信息,当前(2009年10)Firefox、Safari和Chrome共 同的市场占有率已接近60%。因此,可以说开源浏览器已经占据了浏 阅读全文

Jeremy Keith在 Fronteers 2010 上的主题演讲

2011-02-12 11:47 by 子冬, 130 阅读, 收藏,
摘要: 今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。 实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。 说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我 阅读全文

从HTML 2.0到HTML5

2011-01-31 13:50 by 子冬, 391 阅读, 收藏,
摘要: A Book Apart 的第一本书,由Jeremy Keith执笔;本文是该书第1章。HTML是World Wide Web上统一的语言。使用它所提供的标签,人类已经创建了令人惊奇、姿态万千的超链接的文档网络。看看Amazon、eBay和Wikipedia,再看看个人博客和专为猫咪建立的站点,无一不是HTML的杰作。 HTML5是这门通用语言的最新版。虽然这次升级的变化之大史无前例,但HTML更新换代已经不是第一次了。这门语言从诞生之日起一直在发展。 在发明Web的同时,Tim Berners-Lee先生创造了HTML(HyperText Markup Language,超文本标记语言)。1 阅读全文

CSS2.1 盒模型

2010-12-28 18:17 by 子冬, 328 阅读, 收藏,
摘要: 8 Box model盒模型8.1 Box dimensions 盒子的大小Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to re 阅读全文

CSS2.1 媒体类型

2010-12-24 18:21 by 子冬, 374 阅读, 收藏,
摘要: 7 Media types媒体类型 7.1 Introduction to media types 介绍媒体类型 One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. 样式表的一个重要特性是其指定了在不同的媒体上一个文档如何呈现:例如在屏幕上 阅读全文

CSS2.1 设定属性值,级联和继承

2010-12-23 18:29 by 子冬, 340 阅读, 收藏,
摘要: 6 Assigning property values, Cascading, and Inheritance 设定属性值,级联和继承 6.1 Specified, computed, and actual values 指定值,计算值和真实值 Once a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target medi 阅读全文

CSS2.1 选择器

2010-12-20 11:01 by 子冬, 564 阅读, 收藏,
摘要: 5 Selectors选择器 5.1 Pattern matching 匹配模式 In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain eleme 阅读全文

2010 web性能和运维大会

2010-12-10 10:45 by 子冬, 203 阅读, 收藏,
摘要: O'Reilly 一直致力于帮助大家构建更出色的互联网。由 O'Reilly 和淘宝网合办的 O'Reilly Velocity China 2010 即是出于这样目标的会议,今年的主题是“与生俱来地快”。 网络公司无论规模大小都面对着同样的挑战──页面必须快,基础架构必须伸缩自如,网站和服务必须稳定可靠,还不能让团队手忙脚乱。O'Reilly Velocity 就是寻找答案最好的地方。在这里你可以向同行学习,和专家交换想法,分享和获得有关 Web 性能和运维的最佳实践和经验教训。 本次 Velocity 中国大会精英云集,会议主席 Steve Souders 阅读全文

同源策略

2010-11-12 11:28 by 子冬, 267 阅读, 收藏,
摘要: 这个策略可以追溯到 Netscape Navigator 2.0,Mozilla 认为两个页面拥有相同的源,那么它们的协议、端口(如果指明了的话)和主机名都相同。在客户端编程语言中,如JavaScript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.compony.com),那么我们就可以认为它们是相同的域。 下表给出了相对h 阅读全文

网页浏览器“内核”与“外壳”的是是非非

2010-11-10 11:33 by 子冬, 298 阅读, 收藏,
摘要: 1、经常听人家说什么浏览器“内核”和“外壳”,它们都是什么意思? “内核”只是一个通俗的说法,其英文名称为“Layout engine”,翻译过来就是“排版引擎”,也被称为“页面渲染引擎”(下文中各种说法通用)。它负责取得网页的内容(HTML、XML、图像等等)、整理信息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。 而浏览器的“外壳”便很好理解了,它是一个面向用户的界面,也就是网页浏览器为我们实现的各种功能。 2、浏览器的内核有哪些? 事实上,有很多种(废话!),但是常见的有.. 阅读全文

雅虎优化网站加载速度的34条法则

2010-11-05 17:17 by 子冬, 219 阅读, 收藏,
摘要: 1.Minimize HTTP Requests减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进 一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用CSS sprites将小图拼合后利用background来定位。 2.Use a Content Delivery Network利用CDN技术 CDN确实是好东西,不过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。 3.Add an Expires or a 阅读全文

GC与JS内存泄露

2010-10-22 11:24 by 子冬, 312 阅读, 收藏,
摘要: Javascript有没有内存泄露?如果有,如何避免?鉴于最近有好几个人问到我类似的问题,看来大家对这部分内容还没有系统的研究过,因此,打算在这里把个人几年前整理的一些资料和大家分享一下。 首先,可以肯定的说,javascript的一些写法会造成内存泄露的,至少在IE6下如 此。因此,在IE6迟迟不肯退休的今天,我们还是有必要了解相关的知识(虽然大部分情况下,js造成的这点内存泄露不是致使电脑运行变慢的主要原因)。相 关的研究主要集中在05-07这几年,本文并没有什么新的观点,如果当年有研究过的朋友,可以直接忽略。 作为前端开发人员,了解这些问题的时候,需要知其然也知其所以然,因此,在介绍js 阅读全文

Javascript 的程序执行顺序

2010-10-16 11:15 by 子冬, 198 阅读, 收藏,
摘要: 1. 变量的声明和引用 变量必须先声明后引用,这个大家是都知道的,但还是要说说,因为后面要说到一个相关的问题。alert(myStr); // 弹出"undefined";var myStr = "Hello World!";alert(myStr); // 弹出"Hello World";2. 函数的声明和调用 JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。 //“定义式”函数定义function Fn1(){alert("Hel 阅读全文

跨域资源共享的10种方式

2010-10-15 10:32 by 子冬, 254 阅读, 收藏,
摘要: 同源策略在客户端编程语言中,如JavaScript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意 义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具 有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是 同域,而http 阅读全文