学习体会（转）

1.选择器

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

 

不推荐的写法　

<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中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

　　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关键字，可以让脚本异步执行。

使用外部Javascirpt和CSS文件

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

精简Javascript和CSS

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

　　JS compressors:

　　CSS compressors:

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

去除重复脚本

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

减少DOM访问

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

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

回到顶部

总结

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

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

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

时间： 2025-01-02 18:33:23

学习体会（转）的相关文章

SEO艺术——使用高级搜索 学习体会

前言: 在这个信息大爆炸的时代,网上的信息鱼龙混杂,有的时候我们费尽体力脑力也得不到自己想要的结果.在这个环境下,学习一个高级的搜索技术是一个现代人越来越需要掌握的一门技术和方法.于是,自己利用自己的业余时间,学习SEO的艺术,学会使用高级搜索技巧的同时,也学习影响网站搜索排名的重要因素和提高网站搜索排名的重要方法. 这是一门非常有用的技术,对于一个即将走向IT行业岗位的人来说,学习SEO技术可以大大提高自己对IT这个行业的认识和理解.借来了SEO的艺术这本书,进行初步的学习,现在整理一下高级搜

入职体验--linux学习体会

本是计划先写一系列关于入职前学习的基础的东西,不过,入职一个多月,感悟比较深刻,还是先穿插一篇新入职的体会吧. 入职体验--linux学习 新入职以来,由于公司的产品算是起步阶段,很多东西还不成型,很多东西都需要调研,要命的是,天天看各种官网.全英文的官网.这对于我来说,是一个小小的挑战和进步,百度惯了的人,面对看不懂的英文官网,真的需要勇气呢.除此之外,体会最深的就是linux的基本功了. 经过长达半个月的各种调查,我还是没有得到公司想要的东西,这点让我感到比较受挫,也认识到自己上升与进步的空

飞机大战c语言编程学习体会

#include <stdio.h>#include <conio.h>#include <stdlib.h>#include <time.h>#define N 35void print(int [][N]);//输出函数void movebul(int [][N]);//子弹移动函数void movepla(int [][N]);//敌机移动函数void setting(void);//设置函数void menu(void);//菜单函数int scr[

(转).net开发者对android第二周的学习体会

这一周相对没有春节时这么闲了,白天也比较多的工作要做,每天晚上又要被我三岁的女儿折腾到十点, 实在没有多少时间学习.在前一周的基础上,这周我试着自己练习写了一个个人管理的android的程序,主要实现万年历,日程,随手便贴,短信群发等一些功能.下面总结一下自己在其过程中的一些心得和体会,都是一些没技术含量的活,我只写下自己的思路,不贴具体的代码了.苦于周围没有人可交流,大部分功能都是自己闭门造车或参考网上的资料实现,也不知道是否合理,望高手能加以指正. 1.   页面布局技巧 页面布局是andr

（转）.net开发者对android开发一周的学习体会

春节期间,相对比较闲,上班时也没什么事情做.利用这一周的时间,简单的学习了一下移动方面的开发.主要是针对android,其实我对IOS更感兴趣 (因为我用iphone),苦于暂时没有苹果电脑,只能把它放到以后学习.我的工作中暂时没有用到移动方面的开发,自己以前也一直做.net方面的应用.在这里以一个.net开发人员的思维记一下对android开发学习中的一点自己的心得和体会.初学者的胡言乱语,高手请一笑而过. 开发环境搭建 先下载JDK安装.对于android的SDK和eclipse,可以直接到

C++学习体会--引用方式复制类对象

C++学习体会--引用方式复制类对象 引用的重要性实际体现在函数的形参和函数的返回值.一般引用也只是出现在这两个地方. 引用方式的好处,如果是体现在形参,在使用函数的时候,实参必定会初始化形参,如果不加引用,系统会创建实参的副本将值传递给形参,这样会造成资源额外的占用.为了节省资源的占用,通过一种引用的方式,达到这个效果,因为引用知识将实参的地址给了形参,处理形参,如同处理实参. 下面将给出程序使用的例子:引用的重要性体现在形参上 #include <iostream> using names

学习体会

对于这个小黄衫的奖励我感到很意外,因为班上的同学比我写代码写得好的有的是,但是老师和助教发给我,那就是对我学习的肯定.在分享学习经验之前,我想对助教老师说声对不起,因为我第五次和第六次作业写得太烂了,根本没有用心写. 其实我认为这也算不上是分享学习经验吧,只能说是大家一起谈论交流一下,怎样可以把c语言学的更好啊,分享一下平时的生活什么的.我记得在开学之前领书的时候,刚刚拿到c语言这本,他们就说回去预习,我当时还问c语言是啥啊,他们告诉我说是一种你跟电脑对话的语言,当时我就觉得真是厉害了.在开学之

拜师鸟哥之linux学习体会（2）——Linux是什么

鉴于明天是年三十,可能没空开电脑,所以趁着晚上(现在也是第二天了)写下对第二章linux是什么的体会.用过linux的人都知道它是一个操作系统,并且有逐步取代windows的趋势.那么linux到底是什么呢?这就不得不提一个人——托瓦兹(脱袜子),linux的核心原型就是由他在1991年提出来的.具体的历史就不在这里讲了. 1.    linux其实就是一个操作系统最底层的核心及其提供的核心工具.目前市场上有很多版本的linux distribution,都可以从网络上下载得到.例如red ha

大数据解密学习体会

近几年大数据越来越火,作为一名程序员一直想系统的学习一下大数据,并且在网上学习了一些关于大数据的课程.但是这些课程都不体系化,感觉很零碎,收益并不是很大.我对大数据感觉还是很茫然. 最近我在51CTO看到了IT18掌徐培成老师的实战大数据课程收获很大.现在我分享一下我我对大数据解密的体会:大数据技术早在1998年被沃尔玛应用到零售业中了:并且在2009年<自然>杂志文章报道谷歌分析以前流行病的病理特征,出来的结果和国家疾控中心数据非常温和,并且有效预测了流行病毒的爆发.总之大数据的应用领域和功