我的前端学习历程

JavaScript jQuery C/C++ Go ico 18742 次浏览

原文出处：焰尾迭

很难想象一个半年前还在做后台开发，对前端知之甚少的我，现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富，这让我想到一句话“在成长的道路上，我们不要给自己设定界限，只要拥有成长的力量，就能不断超越自己”。下面以我自己的经历讲讲前端的学习过程。

Jquery基础知识准备

学习前端需要掌握的基础知识有jquery,css。做移动端开发最好掌握CSS3，CSS3的许多新特性会让布局简单很多。Jquery可以不用每个知识点都很熟练，但是最好都了解，用的时候知道有这个东西再进行细致学习会更牢固。必须掌握的几个点

1.选择器

基础的id样式选择器是必须掌握的，这里不多说。

2.事件绑定

不推荐的写法

<button id="foo" onclick="dosomething()">Bar</button>

缺点：这样做的结果就是html前端和js前端的工作混在了一起，原则上HTML代码只能体现网页的结构

建议写法

$(“#foo”).click(function(){});

优点：jQuery是追加绑定的，绑多少执行多少，还解决了IE的不兼容问题。

Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方法，从性能和试用场景上来说都是很好的。

$(“#foo”).on(“click”,function(){});

高级用法，场景（在多行的表格表格中，动态添加了一行，如果想给新增的这行绑定点击事件）

$(“#table”).on(“click”,”.row”,function(){});

这里在页面初始化的时候可以给表格里面带row样式的行绑定click事件，就算row是新增的，也会添加上该click事件，即事件委托。用C#来解释：发布者会把click事件发布给所有继承row这个类的订阅者身上，即常说的发布-订阅者模式。

3.函数闭包

推荐使用闭包的方式封装函数，避免函数覆盖。

var PublicHandle=(function(){
    /*私有变量和函数*/
   var _privateVar;
   var _getName=function(){

        };
   /*对外提供的接口*/
   return{
       verifyName:function(){
            },
            getName:function(){
            }
        }
});

掌握的jquery的几个基础知识，结合前端开任务对js会越来越熟练。

CSS学习与技巧

CSS的学习主要重点是多看，可以学习别人现成的例子。看看是怎么布局的，CSS怎么写是规范的，网上有很多现成的资源如?W3CSchool???前端网。移动端开发框架如?Agile??Ratchet??Junior。

框架会提供许多功能都是可以拿来直接使用的，弄懂其中一个框架和CSS和JS会让自己的前端学习更加迅速，当然这是需要花时间的。

代码优化

掌握了基本知识，就得向更高层级代码和性能优化方面前进了，网上有很多前端优化的指导意见，以下意见引用了博客毫秒必争，前端网页性能最佳实践。最佳实践我引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面引用的是我了解的一些原则。

网页内容

减少http请求次数
避免页面跳转
减少DOM元素数量
避免404

服务器

Gzip压缩传输文件
避免空的图片src

Cookie

减少Cookie大小

CSS

将样式表置顶
避免CSS表达式

Javascript

将脚本置底
使用外部Javascirpt和CSS文件
精简Javascript和CSS
去除重复脚本
减少DOM访问

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

1.合并文件: 现在有很多现成的工具可以帮你将多个脚本文件文件合并成一个文件，将多个样式表文件合并成一个文件，以此来减少文件的下载次数。

2.CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。

豆瓣把他的图标集中在一起，然后我们看他如何控制只显示第一个图标的

.app-icon-read {
    background-position: 0 0;
}
.app-icon {
    background: url("/pics/app/app_icons_50_5.jpg") no-repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 2px #999999;
    display: inline-block;
    height: 50px;
    width: 50px;
}

3.BASE64编码图标: 通过编码的字符串将图片内嵌到网页文本中。例如下面的inline image的显示效果为一个勾选的checkbox。

.sample-inline-png {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

可以看到其中有很长的一串，那个就是base64编码的图片，网上有在线生成的工具。图片在线转换Base64

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，

document.getElementsByTagName('*').length

避免404

404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

服务器

Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。IIS中内建了静态压缩和动态压缩模块，如何配制可以参考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。

值得注意的是pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，gzip对其效果不大，而且会浪费CPU。

避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。浏览器如此实现也是根据RFC 3986 –?Uniform Resource Identifiers标准，空的src被定义为当前页面。所以注意我们的网页中是否存在这样的代码

straight HTML
< img src=”">
JavaScript
var img = new Image();
img.src = “”;

Cookie

减少Cookie大小

Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，

去除没有必要的cookie，如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
设置合适的过期时间，比较长的过期时间可以提高响应速度。

CSS

将样式表置顶

经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。

如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。

避免CSS表达式

CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

background-color: expression( (new Date()).getHours()%2  "#B8D4FF" : "#F08A00" );

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。如果想达到类似的效果我们可以通过简单的脚本做到。

<html>
<head>
</head>
<body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if (currentTime%2) {
    if (document.body) {
        document.body.style.background = "#B8D4FF";
    }
}
else {
    if (document.body) {
        document.body.style.background = "#F08A00";
    }
}
</script>
</body>
</html>

Javascript

将脚本置底

HTTP/1.1 specification建议浏览器对同一个hostname不要超过两个并行下载连接，所以当你从多个domain下载图片的时候可以提高并行下载连接数量。但是当脚本在下载的时候，即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行。

因此对于脚本提速，我们可以考虑以下方式，

把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。

HTML5中新加了async关键字，可以让脚本异步执行。

使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。同时将Javascript和CSS从inline变为external也减小了网页内容的大小。使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来说可以提供更高的效率。

精简Javascript和CSS

精简就是将Javascript或CSS中的空格和注释全去掉，用来帮助我们做精简的工具很多，主要可以参考如下，

JS compressors:

Packer
JSMin
Closure compiler
YUICompressor(also does CSS)
AjaxMin(also does CSS)

CSS compressors:

CSSTidy
Minify
YUICompressor(also does JS)
AjaxMin(also does JS)
CSSCompressor

与VS集成比较好的工具如下.

YUICompressor- 编译集成，包含在NuGet.
AjaxMin– 编译集成

去除重复脚本

重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

减少DOM访问

通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意

缓存已经访问过的元素
Offline更新节点然后再加回DOM Tree
避免通过Javascript修复layout

总结

经过这段时间的前端学习，深深体会到前端其实和后端差不多的。学习过程中可以进行类比，学习之初都是完成功能，当代码熟练之后就要知道代码优化的内容，明白什么代码才是好的代码，为什么这么写是好的代码。这样的求知过程才能让自己进步更快，而不仅仅是为了实现功能。

另外一点就是分享，只有自己将学的知识掌握牢固了，才有能力将知识分享出去，这也是帮助自己提升的过程。

或许你会觉得我是做后端的不需要深入掌握前端，但说不定什么时候需要你从事前端呢！提前做好知识储备，保持一颗孜孜不倦求知的心，以不变应万变岂不是更好，你说呢？

jopen

9年前提问