个人前端学习历程

时间 2019-11-17

标签个人前端学习历程繁體版

原文原文链接

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

阅读目录css

回到顶部

Jquery基础知识准备

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

1.选择器前端

　　基础的id样式选择器是必须掌握的，这里很少说。java

2.事件绑定jquery

不推荐的写法　git

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

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

　建议写法web

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

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

　　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相对来讲能够提供更高的效率。