学习web前端开发心得 前端如何提升用户体验

对于前端开发比较关注的小伙伴们一定非常关心学习web前端开发心得 前端如何提升用户体验，今天我爱编程网小编为大家整理了以下内容，下面一起来看看吧。

JavaScript与WEB前台开发课程实训总结怎么写

1 摘要：写一下网站的简介，开发采用了什么技术等。
2 目录。
3 技术介绍：介绍JavaScript和web前端相关的技术，可以去摘抄的多一点，让内容显得饱满充实。
4 网站整体设计：采用画图工具绘制网站的架构图，跟做数据表设计差不多的类型，并且对整体架构做一个详细的文字说明。
5 网站模块详情设计：详细介绍每个页面的每个功能，以及实现的过程，附上截图，主要的源码即可。
6 调试bug：实训过程中出现的问题记录下来，包括解决方案。
7 附录：心得体会、源码（可要可不要）等一堆东西。

如何系统地学习 JavaScript

自从AJAX开始流行后，人们发现利用JavaScript可以给用户带来更好的体验，甚至利用这一优点开发了大型网页游戏，于是这门小语言被重视了起来。现在，很多公司会招专门的JavaScript工程师，通常JavaScript是WEB前端开发的必备技能。简单介绍了JavaScriptr的好处，并不代表大家就会去学习甚至把它学好，兴趣是很关键的，我认为兴趣是最好的老师，它是你专心做一件事并把它做好的动力。另外，大家要相信小语言有大作为，我就曾用Greasemonkey写过一些非常实用的工具，比如你可以用JavaScript+Greasemonkey写在线网页游戏的外挂程序。下面说说本人学习JavaScript的历程和心得吧。
入门学会DIV+CSS布局
使用DIV+CSS布局标准网页，可以使前端XHTML代码更少、结构更清晰，这有利于轻松用JavaScript操作DOM，比如，要展示一个3行3列的列表，如果用传统的表格布局，现在要你用JavaScript动态生成这个列表，那么就需要一个循环嵌套，如果采用li结构加CSS浮动布局，一次循环就好了。当然，WEB标准化不是一定不能使用表格，我的意思是结构清晰的XHTML更易于把JavaScript效果或功能整合到项目中。
掌握几种开发测试工具
作为一个开发人员，熟悉测试工具是必须的，这有助于提高你发现问题和解决问题的效率，对于特别大的项目更是如此。JavaScript和XHTML开发测试利器我就先推荐两个最常用的，它们是：Web Developer和Firebug。
熟悉JavaScript每一个方法的作用
这一要求听起来似乎有点不太实际，我想这个要求对于像C#、JAVA这些大型语言来说确实是，因为这些语言类库实在太庞大了，相信没有人可以全面记住它，而且也是没有必要全部记住，比如用JAVA做网页与手机开发所关注的类库是不一样的。而JavaScript则不是，它的内置方法函数真的不多，先全面熟悉一下，开发起来也将得心应手，比如，你一开始可能认为JavaScript有trim()这个很多语言都有的去行头行尾空格的方法，当你了解JavaScript内置函数库后你会发现原来在JavaScript中这些方法是要自己去实现。再比如，如果你是从其它比较强大的语言转过来玩JavaScript，你又可能认为JavaScript应该有MD5加密的方法，当然这也是没有的，但有人用JavaScript实现了这样的方法，即JavaScript MD5。说到底JavaScript内置方法少的可怜，但很多牛人写了一些新方法增加JavaScript功能，比如prototype框架主要是对JavaScript基础函数进行原型扩展的。
了解DOM编程
了解DOM编程算是学习JavaScript过程比较重要的课程，因为JavaScript除了编写一些纯数据处理的逻辑外，更多的是在动态更改XHTML的结构和内容，以达到界面动态更新的目的，而这些工作都要依赖DOM编程。jQuery框架在这方面封装的相当好，提供了丰富的DOM操作方法，可以让你轻松找到页面任何地方的一个DOM节点（XHTML标签），然后进行相关操作（增、删、改、查）。对于有过用其它语言操作XML文档经验的朋友，相信这一块很快上手。
接触并使用AJAX
在今天，学习了JavaScript而不使用AJAX，那是埋没JavaScript优势了（AJAX本身并不能算是JavaScript内容）。AJAX对于用户以及服务器来说都是有好处的，对于用户，提供更好的用户体验，最典型的一个应用场景：注册页面的用户名可用性预检测，传统的可能会遇到这样的问题：用户填写了一堆资料后提交表单，结果被服务器告知这个用户被注册了，要用户重新填写资料注册，这对于大型多用户网站那是很致命的，因为用户输10个用户名可能有一半已被使用了。对于服务器来说，减少网页流量，因为AJAX后，一般是按需加载数据的，不会因为局部更新而重新加载整个页面。比如一个网页占三屏高，我们可以默认只加载第一屏的内容，当用户拉动滚动条往下的时候，再加载二三屏的内容。另外像WEB在线地图应用也是AJAX使用的典范。
提高深入理解JavaScript this关键字
JavaScript this的作用与指向跟很多真正面向对象的开发语言是有很大差别的，它不始终指向当前对象，是会变化的。如果不注意这个问题，就有可能遇到看似没错的代码报错或不执行等问题。
学习JavaScript OOP编程
OOP是个好东西，它使程序员思考问题更有组织性，代码的组织也更清晰。JavaScript 也可以OOP，但与一些传统的OOP语言同样存在较大差别，所以要真正用熟JavaScript OOP也是需要下点功夫的。
了解闭包JavaScript闭包也是被谈得比较多的一个话题，闭包使JavaScript变量作用域变得复杂起来，但这一特性又使这门语言变的更灵活了。
学习规范开发
团队精神相信大家是听过不少了，就职一个公司做开发，当然离不开团队，团队要想合作愉快，每个成员的编码必需符合一定规范，这也是每个公司对程序员的基本要求。关于规范通常指变量命名、文件组织、注释规范等，这方面知识与其它语言的规范是有相通性的。
找本算法的书读一读
我认为学会并使用一门语言并不是什么难事，难的应该是用语言这基本的语法与语句去解决一些复杂的问题。要解决一些复杂的问题，可能会用上一些算法，有些算法实现可能是一个团队在做的，比如中科院中文分词的具体实现，另外像游戏常用自动寻径A*算法等。也许你认为你不可能在JavaScript开发上遇到这么复杂的问题，其实这还要看你在做什么项目，如果你是在开发大型网页游戏，通常面临更多具有挑战性的难题，如果你有读过一些算法书籍，了解一些常见问题的解决方法，在开发过程中自然会如虎添翼。另外，熟悉算法显然对于你日后接触其它开发语言也是有帮助的。
习惯兼容、BUG问题做好笔记
CSS与JavaScript浏览器兼容问题最好做好笔记，因为这些问题，或者说BUG是比较诡异的，这些问题浏览器不会提示你错在哪里，IDE也不会提示你，特别是CSS兼容问题，这就会导致你在开发过程碰到这样的问题会卡老半天得不到解决。即使之前解决过同类问题，以后可能又会碰上，结果之前没有做好笔记加强记忆，注定你要再受罪一次，因为这些兼容问题不是一两个，临时记忆效果是不明显的。以我经验，很多问题是在IE6下发生的，现在IE6连微软自己都希望加速它灭亡，这对于前端开发的我们来说当然是一个好消息。
阅读优秀的代码，比如jQuery
阅读优秀代码绝对也是自我提高的好方法，这不仅可以了解优秀代码的组织规范，更可以了解一些功能的实现思路。比如jQuery就是一个非常值的学习的JavaScript框架。当然了，要阅读这样专业的JavaScript框架，JavaScript基础要扎实，不然看的过程中会遇到太多疑问，甚至对自己的信心也是一种打击。
注意在JavaScript入门之前避免直接使用JavaScript框架做开发
如果你没有任何JavaScript基础，请不要直接使用JavaScript框架做开发，我认为这可能会误导你对一门语言的认识，比如你直接使用了jQuery用点连起来的语句写法，你是否会认为这是JavaScript语法的一种呢？再比如你使了prototype你不要把框架扩展后的基类方法认为是JavaScript内置的。我认为JavaScript框架是用来提高效率的，它绝对不是JavaScript入门应该学习的。
网上找的很多例子可能不是跨浏览器兼容的
有很多JavaScript效果源码是N年前某网友写的，N年前是IE的天下，于是一些前端懒得解决脚本跨浏览器兼容问题，使写出来的脚本只适用于IE。

前端如何提升用户体验

AJAX

看到这里肯定有人忍不住笑出声，的确这已经不算什么新技术，但要让我站在用户的角度来评价网站技术上的变化中给访问者带来最大友好性的一项，我肯定会选AJAX。

记得在我刚刚开始学会上网时候，不管是注册页面还是登录都是我最烦的，那时候网速又不快，打开一个注册页面就要几秒时间，然后从上往下有几十个选项要全部填满，比如其中有一项让我填写“密码保护问题”，这个设计简直让人想吃电脑，因为很多人一看这种问题应该都会和我一样随便写几个数字就提交，然后等几秒加载完网页提示“密码保护问题”不允许有数字，同时之前填写的十几项数据全部清空需要重新再来一遍，再花几分钟写完之后提交又提示不允许有字母，再来一遍，有时候还会提示字符太短太长有空格超时之类，总之如果你第一次注册这种页面，至少要花掉十几分钟，而且还是在重复做一件事。从网站运营者角度来看这也很烦，重复十几分钟填写表单很容易就失去很多潜在用户。

在AJAX的异步请求出现之后，这种情况明显的改善，给用户的体验感最明显。用户并不知道何时已经提交请求，就拿刚才表单的例子来说，如果每填写一项都会在当前表单的最后提示具体错误类型(在用户未点击时已经异步提交了请求并且用返回数据更新部分页面)，这就给用户很直观的提示，这种即时的互动让访问者能够很直观的感受到这是一个友好的网站。(当然用javascript也能做到部分表单验证，这只是举一个例子)。在不重新加载整个页面，通过操作DOM来改写小部分数据这点上也能给访问者带来极大的交互感，现在流行的微博就是最好的例子，在发送微博/评论/转发之后用户会发现不用刷新等待整个页面加载，操作之后立刻会有小部分的页面发生变化，虽然看起来微不足道，但对一个访问者来说，这足以让他们欣喜。

网页字体

网站中所有的文字内容表达方式都是通过字体，合理的字体无疑会给用户更好的体验感。在业内来说豆瓣可能是对字体研究最多的一个网站，拿豆瓣读书都来他们用Helvetica和Arial这两种差别非常小的字体，这种非衬线字体很容易让人一目了然同时富有一些科技感，豆瓣本身就是以图片加上简短语句组成，让人能够从字体中快速找到重心是设计的目标所在。

有人担心非衬线用作正文对阅读体验有影响，实际上不难发现国外很多网站都用非衬线字体来处理正文，当然也不排除他们可能考虑的更多是英文。其实我还是非常喜欢非衬线体，它们看起来更富美感，而且如今大量的文字在互联网上比较少见，一些活泼具有现代感的非衬线字体也逐渐被更多的开发者认同而且使用。

除去这些，字体还可以在选择上再细分一些，记得曾经看过一篇统计，不同的字体会影响用户对站点权威性的信赖程度。比方说在一个公司网站上大量使用类似于幼圆、Cursive一类字体，很容易让访问者不信任网站，当然如果是以娱乐为主的网站也不能过于严肃和简朴，在使用时既要考虑到大众用户的接受程度，也要知道自己的网站是什么定位，当然技术性的问题也不能忽略，像是火狐比IE区分sans-serif要更模糊一些，有的字体“O”和“0”、“L”和“1”容易让人难以区分(代码较多的站点需要考虑)等等，这样综合对比选择得到的字体无疑能让网站更有魅力，从而留下更多的用户。顺便一提，在使用字体时注意版权。

加载速度

很多用户在还未见到你出色的设计和内容之前就已经离开了页面，这是因为网站加载时间实在是太长，已使访问者失去耐心。其实很多的访客不关心脚本和图片的加载顺序，他们只要看到网站的整体结构能够迅速的加载出来就可以开始浏览，即便是其他元素逐渐加载也可以接受，基于这点，我们可以使用很多延时加载的方法来使用户更快的见到页面。除此之外还有很多因素可能会对加载速度造成影响，也有逐一优化的办法，这里就不再细述。 我爱编程网

结构设计

不知道大家发现没有，近来很多网站都喜欢把菜单fixed在顶部，只要这个菜单选择项不是太多，访客对这样的固定菜单接受程度还是很高的，这只是设计中的一个小例子，相类似的有很多，比如在表单中以深浅颜色区分每一行，以提高可阅读性;在激活窗口时为当前控件添加一个边框，使用户能够更建议的分辨自己在操作哪个窗口等等。很多的设计与排版方式都已经得到了大众认可，可以作为网站设计时的参考。

网站结构设计的好看不好看对访客来说虽然有影响，但也不至于立刻离开，而且即便是非常精致的页面却对用户不怎么友好，想必也不会有多少人愿意访问。

举个例子，以前我用好搜(360搜索)的时候总感觉怪怪的，没有google和百度顺手，研究了一段时间之后才发现好搜的的主页搜索框比百度和google要低一些，Google到顶部固定菜单的距离是286px，百度是192px(未登录238px)，而好搜则是328px。相比之下，好搜的搜索框更趋向于屏幕中间，而百度与Google则是在屏幕中上方，对于已经常年习惯了百度和Google搜索的用户来说，想要改变这个习惯来适应好搜多少有些困难，除此之外搜索框还有结果页也有几个问题不一一细述，360这样做无外乎两点，一个是不在乎/不知道/不关心用户体验，一个就是故意有所不同，想要培养自己的用户习惯。(在我看来也不怎么成功)

细节决定成败

乔布斯的父亲是个木匠，曾经教给乔布斯一个理念，就是橱柜的背面里层也要细致处理甚至是打磨光滑，即便用户看不见。在理想主义的伟大试验品“麦金塔”出世之后，有人甚至感叹，就连电路板上的电路图都能当作艺术品，的确如此，乔布斯就曾经开除一个对电路图美学设计不满的员工。一个伟大产品的诞生并不是一蹴而就的，必然经过了长期的沉淀积累与琢磨，但仅此依旧不能称之为伟大，只能算成功。一个产品细节上的最后润色可能才是决定它价值的关键。对于WEB开发者来说，更是如此。

以上就是我爱编程网小编为大家带来的内容了，希望能够帮助到大家，了解更多前端开发资讯敬请关注我爱编程网。