您的位置:永利集团登录网址 > web资讯 > 前端小tips(永利游戏平台:四)

前端小tips(永利游戏平台:四)

2019-10-01 17:07

十年WEB技术发展历程

2015/07/19 · HTML5 · WEB

原文出处: 红河小鱼   

一个小分享,知识有限,抛砖引玉。

这是一个演讲稿,mark一下

永利游戏平台 1

ajax

03年的时候我上六年级,那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,册,账,号。

彼时网吧用的512k的带宽,注册的时候,填了一堆信息,提交,页面跳转,嘣,”您填写的信息有误,请重填”。然后跳转回注册页面,以此循环。我现在时常想,如果当时ajax能普及开来,我就可以省2块钱了。

那么ajax是什么?

首先ajax是一种技术。以往的网页交互方式,用户在点击一个按钮后,比如提交按钮,用户就要等待漫长的数据和服务器的交互,期间用户无法进行任何操作,只能点根烟。而ajax所做的,就是在向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事

其实ajax技术早在1998年的时候就已经由微软实现了,然而直到2005年2月,Adaptive Path公司的Jesse James Garrett发表文章“Ajax: A New Approach to Web Applications”,人们读了后觉得哎哟不错哦这个屌,这之后ajax才大规模普及开来。

ajax的出现,极大了提高了web的用户体验。时至今日,即使国内IT发展再怎么落后,所有网站的登录注册也已经实现了ajax交互。用户点填写完信息后,页面不用刷新就可以知道信息提交成功与否,哪错改哪。

另外ajax作为一种前后端分离的解决方案,也已经被国内大多数不很low的公司所采用,也间接导致了php等网页脚本语言的衰落。(来辩)

 

1、前端的发展史

43.ajax 的过程是怎样的

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

  7. 异步加载和延迟加载

  8. 异步加载的方案: 动态插入 script 标签

  9. 通过 ajax去获取 js 代码,然后通过 eval 执行
  10. script 标签上添加defer 或者 async 属性
  11. 创建并插入iframe,让它异步执行 js
  12. 延迟加载:有些js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的

  13. 前端的安全问题?

  14. XSS

  15. sql注入
  16. CSRF:是跨站请求伪造,很明显根据刚刚的解释,他的核心也就是请求伪造,通过伪造身份提交POST和GET请求来进行跨域的攻击

完成CSRF需要两个步骤:

  1. 登陆受信任的网站A,在本地生成 COOKIE
  2. 在不登出A的情况下,或者本地 COOKIE 没有过期的情况下,访问危险网站B。

JQUERY

早年的js编程,代码的效率是极其低下的,这点尤其体现在操作dom上,开发者想要给一个按钮添加事件,要写长长一大段重复的代码去获取到这个按钮,再写长长一大段重复的代码去添加事件。尽管老油条会将常用的操作封装起来,但是对于不会封装的新手,这无疑是很痛苦的一件事,尤其再加上各种各样的兼容。

2006年,本着拯救菜鸟,让他们do more的宗旨,jquery诞生。jQuery诞生的意义,一是对ie6 7 8 及各种割据一方的浏览器做好了兼容,二是极大简化了dom操作,使开发效率大大提升。jquery很火爆,火爆的有些前端只会写jquery而不会写原生js的程度。时至今日,说jquery write once,see everywhere已经不为过了。

jquery的另一个意义(我认为)在于,它催化了人们对前端的兴趣与探索,相比linux,你用很低的成本,就可以写出一个让不懂编程的妹子说欧巴你碉堡了的效果,让人们觉得哎哟(又)不错哦这个屌。此后大量的类库和基于jquey的插件雨后春笋般诞生,前端行业歌舞升平欣欣向荣,网页开发进入一个新时代。

 

1、前端

这是从维基百科上找到的关于前端的定义,一般来说,计算机程序的界面样式,视觉呈现属于前端。
也就是网站mvc结构中的view部分,但是现在说的view层和原来的view层含义已经不一样了,这个待会我们在介绍angular的时候说。

46.ie 各版本和 chrome 可以并行下载多少个资源

  1. IE6 2 个并发
  2. iE7 升级之后的 6个并发,之后版本也是 6 个
  3. Firefox,chrome也是6个

CHROME

天下武功出谷歌。在ie6,7,8的时代里面,尽管Firefox也缓慢的挑战ie的地位。但和2009年开始Google开始推广的chrome浏览器产生的颠覆性影响比起来,逊色很多。Chrome使用Apple的开源内核webkit,良好的设计标准和市场反应;促进浏览器快速迭代,让IE在windows10中彻底消失。

chrome浏览器的推出,将简化前端的入门程度又推进了一步,其自带的调试工具好用又无脑,我们可以利用其轻松的查看网络状态,加载顺序,进行断点调试等,同时谷歌的插件功能,又给开发者提供了极大便利。

目前chrome最新版开始采用blink内核,测试版本中,已经可以对css3动画进行追踪和调试。在我还没有想象到的时候,chrome已经实现了它。

一句话,没有chrome,就没有新中国,就只能用firefox了。

2、前端/互联网的上古时代

前段时间找到了世界上的第一张网页,现在还可以访问,他 http://info.cern.ch/ ,可以看到,所谓网站就和现在的world类似,只有标记语言和超链接,完全没有动效和样式可言。更不用说代码的复用性,以及局部加载。
这是一个伟大的时刻,标志着万维网的诞生,不过站在历史中往前看,就会觉得那个时代简直是洪荒时期,只是把简单的信息传达出去,连刀耕火种的能力都没有达到,。

47.javascript里面的继承怎么实现,如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承,避免对象共享可以参考经典的extend()函数,很多前端框架都有封装的,就是用一个空函数当做中间变量

GITHUB

随着软件项目的迭代加快,项目版本工具也不断的演进,经历CVS, SVN,GIT。到目前为止CVS差不多已经从互联网行业慢慢消失,SVN作为文件和文档存储存在,由linux内核发明人Linus创建的版本工具GIT现在作为代码版本标准。Github依赖于git成为开发人员团队协作的社区!到2015年1月github上已注册的开发人员超过一千万,开源项目几千万。其中2014中国研发者在github上增⻓长最快。你几乎可以在上面找到一切你想要的代码…比如username..password..

 

3、前端的统一与分割

48. Flash、Ajax各自的优缺点,在使用中如何取舍?

Flash:

  1. Flash适合处理多媒体、矢量图形、访问机器
  2. 对CSS、处理文本上不足,不容易被搜索

Ajax:

  1. Ajax对CSS、文本支持很好,支持搜索
  2. 多媒体、矢量图形、机器访问不足

共同点:

  1. 与服务器的无刷新传递消息
  2. 可以检测用户离线和在线状态
  3. 操作DOM

  4. 前端小tips(永利游戏平台:四)。请解释一下 JavaScript 的同源策略。

概念:
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自NetscapeNavigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制:
我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

OAUTH

OAuth1或OAuth2与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码)。
产生背景:最常见的服务场景,用户需要使用两个不同企业的服务,登录验证A企业,下载内容;然后登录验证B企业,上传内容到B企业服务,复杂又耗时。无论是用户,还是A、B都会想要互通服务。这就产生了核实身份的需求。旧的用户名、密码机制会造成A/B企业有权限查看甚至修改对方的用户资源。为了达到确认身份、服务互通,Google、Yahoo、Microsoft牵头促使OAuth1.0产生。之后的OAuth2.0是各大互联网企业基于https安全的一次新规划。

目前最常见的应用场景主要在授权登录上,如微信,qq,微博等等

html/css/js

刀和火什么时候才到的呢?一直到96年,css的出现,同年,网景公司推出了javascript 之后微软也推出了vbscript 前端届的刀和火出现了,同时意味着正式开始出现前段,这个时候前端的html负责页面结构,决定着网页的结构和内容,是整个网页的躯壳,css负责样式部分,他决定了网站看起来是什么样子,属于前段的皮肤吧,js控制网页的行为,决定做什么一般来说,js负责调用一些前端计算与动态加载,应该属于整个网页的灵魂。只有这三个同时具备的,才能算是一个真正的网站前端。
但是这个时后的网页还有些许的缺陷,不能局部加载,复用性比较差。就拿我们的网银举例子:可看到,基本上所有的界面的头部,底部还有菜单部分,都基本上是一样的,我没道理同样的代码在每个页面上都要写一遍,所以不久,微软就推出了ifram标签,实现了异步的局部加载,就是相当于在网页中嵌套一个网页,切换目录只是切换ifram中的网页,像我们的验印系统和CRM中的局部加载就是这样实现的。

50.GET和POST的区别,何时使用POST?

GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制

GET方式需要使用Request.QueryString 来取得变量的值
POST方式通过Request.Form 来获取变量的值
也就是说Get 是通过地址栏来传值,而 Post 是通过提交表单来传值。

在以下情况中,请使用 POST 请求:

  1. 无法使用缓存文件(更新服务器上的文件或数据库)
  2. 向服务器发送大量数据(POST 没有数据量限制)
  3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

  4. 哪些地方会出现css阻塞,哪些地方会出现js阻塞?

js 的阻塞特性:所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。
由于浏览器为了防止出现 JS 修改 DOM 树,需要重新构建DOM 树的情况,所以就会阻塞其他的下载和呈现。
嵌入 JS 会阻塞所有内容的呈现,而外部 JS 只会阻塞其后内容的显示,2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了?CSS 本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6 下 CSS 都是阻塞加载)
当 CSS 后面跟着嵌入的 JS 的时候,该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面,就不会出现阻塞的情况了。
根本原因:因为浏览器会维持 html 中 css 和 js 的顺序,样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载,所以就会出现上面 CSS 阻塞下载的情况。

JSON

Json虽然是2001年就产生的标准,但被广泛应用是在2008年之后各种Ajax应用、iPhone、Android设备流行之后。旧的服务体系多是企业级,所以XML对java型的企业级服务定位有益。但对于流量限制,语义简单的API服务来说,XML庞大、冗余、不易学又占带宽。

去年我刚工作的时候,后台给我返回一个数组,没有发言权的我在是要遍历这个数组还是转化为json格式之间纠结了很久。

Json的普及,从另一个角度体现了web开发的一个优势,不管你后台是java ruby php还是python,你只要给我一个json格式的接口,我就能撑起整个地球。

ajax

再之后99年W3C发布了第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,意味着ajax的诞生,这在前端史上同样是个里程碑的事件,之前的iframe中部分加载,其实还是直接加载某个完整的html界面。但是如果这个界面中,如果之前的交易想实现这个功能,需要两个页面,第一个页面输入我们需要添加的查询字段,然后点击查询,进行form表单提交,然后我们就跳转到 form表单返回结果页面,从头开始渲染这个页面。如果网速很慢的话,这中间会出现点击搜索,然后一个白屏,之后才出现结果页面。而ajax则可以让我们如网银这般实现真正意义上的局部加载,点击查询的时候,只对下半部分进行刷新,而不用对整个界面重新进行渲染,极大的优化了用户体验。再一点 之前的方法从数据库查回列表数据,需要在服务端重新将数据拼装到页面上,使用ajax技术,这部分的操作被挪到了客户端浏览器上,所以ajax的出现,并不仅仅优化了用户体验,他将很大一部分计算从服务器挪到了前端,使前端能够完成了更多的工作。为日后的前后端分离提供了技术支持。

52.eval是做什么的?

  1. 它的功能是把对应的字符串解析成JS代码并运行
  2. 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)

DJANGO&RAILS

敏捷开发打破了项目研发模式。在2010之后的WEB2.0时代,Html5盛行,前端工作被分离出去,PHP那种网页脚本的优势没那么明显,虽然在CMS和论坛模板上依然有优势。Django和Rails的最大优势在于,他让个人或两三个的小团队,实现整套产品成为可能。以Instagram为例,最初两个python工程师用django快速实现了服务端的所有功能,在用户增长时,再将大访问量和大数据量的服务独立出去。

尽管现实残酷,rails每况日下,IE8和rails谁先消失只是先后问题,但其提供的解决方案还是被很多后生所效仿。人们都会记得这朵昙花。

jquery

然后一直到09年的时候,前端一直稳定发展,没有进行什么大的改变,这段时间市面上主要有两款浏览器,我们称之为IE浏览器和非ie浏览器,所谓神仙打架凡人遭殃,ie浏览器为了抢夺网景公司的市场,开发出了javascript的变种,jscript。虽然两个基本上完全一样,但是语法糖上可能还是有些许的差别,所以,那个时代的前端工程师他们的主要工作就是画页面和踩各种坑,那个时代一个阅历丰富的程序员的一个标志就是熟练掌握两种浏览器之间的差别,且能找到兼容的方法,
jquery的出现在一定程度上缓解了这个问题,正如jquery的logo显示的一样,他封装了write less do more 他致力于用更少的代码实现更多的功能。
jquery其实是一个脚本库,jQuery抽象了复杂的代码和浏览器怪异模式,兼容不同的浏览器,用简短的代码实现动效,用链式语法风格减少了程序员的代码量。使我们有时间做重要的事情.虽然现在市面上的各种框架都能实现jquery的各种功能,但是他凭借较低的学习成本以及多少年来积攒的用户量,依然在现如今的前端圈中占有一席之地

53.Node.js 的适用场景

  1. 高并发
  2. 聊天
  3. 实时消息推送

Bootstrap

2011年Twitter开源的网页端GUI框架。jquery兼容了不同浏览器的js部分,bootstrap则兼容了不同浏览器的css部分。甚至于说,作为一个后端开发,你无需了解css,无需前端,无需设计师,只要看一看bootstrap的文档,就可以搭起一个美观大方的后台管理系统。常见类似的GUI框架还有zurb的foundation,google的materialize,百度也曾出过一个名为GMU的移动端框架。

就我个人来说,我并不喜欢这些gui框架,尽管他们简化了css,实现了一些很炫酷的效果,尽管我在项目中也用到过这些,尽管我不想承认我是绿茶。这些框架最大的缺点就是,千篇一律,所有的页面都是一个样子,一样的nav,一样的sidebar,一样的表单,连鼠标点上去放个光都一模一样。就像我如果长了三条腿(虽然确实长了三条腿)别人会说我很别致让他们眼前一亮,但如果所有人都长了三条腿,web也就失去其魅力了。另一个缺点是臃肿,一个css就走100多k的流量,其js插件又大都依赖jquery,忍心么。

当然,其为了解决响应式提出的栅格化html的思想还是很值得借鉴的。

2、大前端与Anaular

54.JavaScript 原型,原型链 ? 有什么特点?

  1. 原型对象也是普通的对象,是对象一个自带隐式的proto 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链
  2. 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链

  3. 怎么重构页面?

  4. 编写 CSS

  5. 让页面结构更合理化,提升用户体验
  6. 实现良好的页面效果和提升性能

IOS & ANDROID系统的普及

2009年之后IOS和Android的快速发展,导致WEB开发发生以下改变:
1. html5在移动浏览器上优先实现,Android和IOS设备全面支持html5、CSS3,加速了IE消失
2. 上网随时随地发生。鼠标点击、内容繁复的网页越来越简洁,响应式设计快速流行。

  1. APP和服务器交互大部分和网页一样基于HTTP协议,webapp,hybrid app的概念被提出。

关于webapp,这里简单说下web相比原生的优势

  • 跨平台:常说的一次编译,到处运行
  • 免安装:打开浏览器,就能使用
  • 快速部署:升级只需在服务器更新代码,而不像客户端需要更新版本
  • 超链接:可以与其他网站互连,可以被搜索引擎检索

听起来刁刁的,这些优势却经不住推敲。首先,不同系统的用户使用习惯是不同的,ios用户返回按钮习惯在左上角,而安卓用户却习惯在屏幕最下方的位置,产品经理问,那放在哪儿。呵呵哒不知道。其次,曾经看过一个调查报告,问用户更喜欢用客户端还是web端。

喜欢客户端的用户远远超过了web端。你问我喜欢什么,我也是喜欢客户端。你问我为什么,我觉得比较有安全感吧,而且更新版本让我觉得很爽,很有存在感,让我知道我并没有被世界遗忘,让我知道你们产品在更新,在为我操心。另外超链接..我一个客户端要你seo干什么。这还没完,webapp的缺点还有一大把,最大的缺点莫过于没有GPU加速,想要实现一个复杂一些动画,真是要了浏览器亲命了。其次网页是单线程的,加载dom时会阻塞js,导致的结果就是,卡。一卡就烦了,烦了就关了,用户减一。

而hybrid就不同了,hybrid app的意思是混合原生应用,将需要频繁更新的页面作为web放在远程更新。这是一个靠谱的解决方案,BAT有很多案例,如微信发布的JS SDK,掌上百度和淘宝客户端Android版;

当然这里边的坑有很多,有机会,我把我踩过的坑讲给你们听。

1、前端的大爆炸时代

从99年到09年附近基本上没有什么大的变化,一直到谷歌发布了v8浏览器引擎,这个引擎极大的提升了浏览器的计算效率,然后同年ECMA组织标准又发布了第五版javascript标准,马上得益于v8引擎高速的计算效率,有人将vx引擎从客户端搬上了服务端,用于做服务器的软件。
Node.js是一个让JavaScript运行在服务器端的开发平台,它让JavaScript的触角伸到了服务器端,他的特点是单线程,非阻塞,事件驱动机制,由于单线程非阻塞的,所以在进行高并发处理的时候还是蛮有利的,node属于极客追求性能极致的产物,所以缺少服务器健壮性的考虑,就比如由于单线程,没有给每个客户分配线程所以一处崩溃全线崩溃,也就不适合银行这种安全要求比较高的企业。
也许他在服务端的作用并不是十分的完美,但是他的出现对前端的影响类似于蒸汽机对于人类的的影响。09年开始,前端进入工业时代。在这之前可能没有真正的前段工程师这个职位,只是个写页面的,切页面的。node的出现,标志这前端工程师职位的正式确立,为什么这么说呢?只有node之后,前端原来做不到的事情,我们可以做到了,就比如代码混淆合并压缩甚至包括css代码的预处理。也因为nodejs的出现,前段自动化测试工具才得以存在。这些我们在以前是做不到的,node出现以后,也出现了大量的基于node的工具,
如这张图所示,我们可依次了解一下
npm是一个模块管理器,在前端环境工程化开发的时候,用来添加一些依赖的组件。下头的这些工具,如果我们需要用的话,可将使用的文件配置好,然后当前目录下直接运行npm命令就可以安装上。
express是在进行nodejs开发时候的一个框架,应该是类似于jquery之于js吧,现阶段,我们的服务器开发都是java所以也用不到这个框架,有机会的话可以了解了解
grunt 是一个比较早的也比较成熟的对代码进行合并压缩混淆这样一个工具。js用grunt脚本做整个项目的编译,你把源代码的目录以及要压缩哪些文件,不压缩哪些文件,然后将生成的文件放在哪里在配置文件中配置好。然后编译就可以得到最终的代码,读取代码压缩解析编译输出的过程实际上就是在node上完成的,网银系统 的压缩就是用这个工具构建的,他可以将网银初次加载的一百多个文件能减少一半左右。而浏览器每次请求文件的并发量一般允许量是6个文件过多的时候必然会增大请求时间,至于为啥首次加载会有这么多的文件,待会讲后我会详细描述

gulp 然后这个可乐一样的logo叫做gulp他是在grunt问世不久之后出现的,grunt的基础上进行了一定的改进,在grunt如日中天的时候开出了一片天地,他和grunt最直观的差别就是grunt的配置化,在gunt中主要是修改配置文件就好,而gulp则是以代码的形式配置,据说相比较grunt的学习成本更低,还有一点是gulp的是以文件流的形式操作,相比较grunt是先读取文件,然后进行合并,合并之后再写成临时文件,然后读取临时文件,进行混淆再写,然后再把临时文件读取出来,写到你要输出的文件的地方,而gulp则是读取文件然后直接压缩合并再输出到目标文件上。

webpack 编译处理的,前边说过,我们的浏览器目前只支持html css和js这些东西,但是有时候为了便于开发,我们会用新的语言就比如js的超类typescript进行处理,但是typescript的语法特性浏览器并不支持,所以在部署到浏览器之前需要先把ts也就是前边说的typescript解析成js语言,这样浏览器才能识别出来。他和上边两个工具听起来好像比较类似,其实是不一样的,上边主要是用来压缩混淆的,webpack则是用来将浏览器不能识别的抽象类语言编译成浏览器能识别的语言。

karam作为一个平台出现的,类似于tomecat和jsp的关系一样,他可以运行各种各样的测试案例,jasmine则是一种语法,方便测试,用来写断言式的测试。

看一下右边的这三个是css的预处理器 大家知道css是一种图灵不完备的语言,相当与只是把样式放到了对应的选择器下边,而预处理器定义了一种新的语言,他在css的基础上添加了变量 函数以及基本的逻辑判断,这样来处理样式,然后再编译成正常的css文件,供浏览器识别,还有一个好处是,不用太考虑浏览器之间的差别,就比如css这个样式火狐是这种写法,然后ie是另一种写法,这个他会自动生成,但是你用的是ie11的特性,在ie8上依然是没有效果的。目前市面上的css预处理器有很多,但是讨论最多的还是这三个,sass less stylus
sass是最早最成熟的css预处理器语言,可用变量常量混入函数等语功能,能够更有效的写出这些语言来。
less的出现受sass的影响比较大,但是在语法上比较类似于css,所以对于设计人员和开发人员来说,开发相对比较容易。现阶段很多流行的框架中已经能看到他的影子了。
stylus出现的最晚,普及率不如前边两个高,但也是挺好用的,他的特点是能够高效动态使用表达式的方式生成css共浏览器使用

这就是node出现之后衍生出来的一系列产品,还有很多,他们不一定是前段开发所必须用到的,但却能使前段开发更加的系统便捷

56.WEB应用从服务器主动推送Data到客户端有那些方式?

  1. html5 websocket
  2. WebSocket 通过 Flash
  3. XHR长时间连接
  4. XHR MultipartStreaming
  5. 不可见的Iframe
    6.script标签的长时间连接(可跨域)

  6. 事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

  7. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为

  8. 事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件
    3.ev.stopPropagation();
    注意旧ie的方法:ev.cancelBubble = true;

nodejs

我纠结了一会node属不属于前端范畴的问题。我认为是属于的。

解决高并发一直是后台哥哥们乐于讨论的问题,比如咱们的好近实时监控系统,理论上每个连接都会生成一个新线程,每个新线程可能需要 2 MB 配套内存。在一个拥有 8 GB RAM 的系统上,理论上最大的并发连接数量是 4,000 个用户。随着用户的增长,咱们希望监控程序支持更多用户,这样,就必须添加更多服务器。当然,这会增加业务成本,尤其是服务器成本。除了成本上升外,还有一个技术问题:用户可能针对每个请求使用不同的服务器,因此,任何共享资源都必须在所有服务器之间共享,到这里,技术就到了瓶颈。node诞生的初衷,就是为了解决这个问题。node解决这个问题的方法是:更改连接到服务器的方式。每个连接发射一个在 Node 引擎的进程中运行的事件,而不是为每个连接生成一个新的 OS 线程,并为其分配一些配套内存。

nodejs属于服务器端语言,在前后端分离这场圈地运动中是前端的一个有利武器,同时在前端自动化上也提供了大量的可编程工具(grunt,bower,gulp等),淘宝百度对nodejs的热度一直很高,自然而然我认为这是一个趋势。去年美团成立了美团酒店的团队,选择了node作为后台语言,圈走了后台大部分的工作。我在想,前端js加上node再加上对UI的技能需求,以后是不是前端工程师是不是该叫全端工程师了。

P:我我对node只有粗浅的了解,也是以后希望学习的方向,不辩。

h5

前段时间,有一个名词特别的火,叫h5,作为一个前端,觉的h5的不就是是html的第五代标准,html5简称么,技术而已,怎么会这么火?然后我百度了一下h5搜索结果都是ppt上的这种单页程序,不得不说腾讯确实成功,用自己的产品重新定义了h5的含义。所以说起h5的时候,最好要先判断一下他的意图,到底是业务所说的这种程序还是技术上的html5
html5和h5也不是毫无关系的,毕竟h5的出现要依赖于html5的技术当然html5的出现也是为了适应手机端而推出的新的标准。

html有自己的规范标准,那js有没有呢?其实也是有的,96年的时候网景公司推出了javascript语言,然后当年的就提交国际标准化组织,也就是ECMA,希望这种语言成为国际标准,但是由于java的商标归sun公司所有,然后js商标归网景公司所有,同时为了凸显国际标准化组织,所以javascript的版本号,我们称之位ES,ES6是04年提出来的,在ES5也就是我们日常用的js的基础上增加了不少的新特性,方便了工程化开发。但是由于在ie低版本上兼容不是很好,所以同html5和css3一样,主要面向的是手机市场。

而typescript是微软开发的一款语言,他是js的超集合,在es6的基础上添加了静态类型和基于类的面向对象编程。也可以说,他就是未来js的模型。目前三大框架之一的angular2就是在用这种语言,由于他能够实现依赖注入面向对象开发的属性,可以使得java程序员几乎能够无缝上手,只是他是去年才出来的,主要是面对的是手机市场,而且比较激进,所以ie11之前的版本兼容性都不怎么好。但是在可兼容到安卓4.1

58.Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

Ajax 是什么:

  1. 通过异步模式,提升了用户体验
  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
  3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

Ajax 的最大的特点:

  1. Ajax可以实现动态不刷新(局部刷新)
  2. readyState 属性状态 有5个可取值: 0 = 未初始化,1 = 启动, 2 = 发送,3 = 接收,4 = 完成

Ajax 同步和异步的区别:

  1. 同步:提交请求 -> 等待服务器处理 -> 处理完毕返回,这个期间客户端浏览器不能干任何事
  2. 异步:请求通过事件触发 -> 服务器处理(这是浏览器仍然可以作其他事情)-> 处理完毕
    ajax.open方法中,第3个参数是设同步或者异步。

Ajax 的缺点:

  1. Ajax 不支持浏览器 back 按钮
  2. 安全问题 Ajax 暴露了与服务器交互的细节
  3. 对搜索引擎的支持比较弱
  4. 破坏了程序的异常机制
  5. 不容易调试

解决跨域问题:

  1. jsonp
  2. iframe
  3. window.name、window.postMessage
  4. 服务器上设置代理页面

  5. 对网站重构的理解

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下,对网站进行优化,在扩展的同时保持一致的 UI。

对于传统的网站来说重构通常是:

  1. 表格(table)布局改为 DIV + CSS
  2. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对 IE6 有效的)
  3. 对于移动平台的优化
  4. 针对于 SEO 进行优化
  5. 深层次的网站重构应该考虑的方面
  6. 减少代码间的耦合
  7. 让代码保持弹性
  8. 严格按规范编写代码
  9. 设计可扩展的API
  10. 代替旧有的框架、语言(如VB)
  11. 增强用户体验
  12. 通常来说对于速度的优化也包含在重构中
  13. 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
  14. 程序的性能优化(如数据读写)
  15. 采用CDN来加速资源加载
  16. 对于JS DOM的优化
  17. HTTP服务器的文件缓存

  18. HTML5的优点和缺点

BIG DATA

大数据大概是过去几年最火热的名词,我一大批同学听说数据挖掘年薪30万都嗷嗷嗷去做数据库了。
大多数时候,我们在谈大数据其实都是在谈在海量数据下的数据挖掘、数据分析、智能推荐、实时分析等。不同公司的技术方案不同,我只列两个国内成功的案例:
• 京东个性化电商,场景包括基于行为、偏好、地域、时间、好友关系等维度,向不同的用户推荐不同的产品,不同用户搜索产品排序也不同…
• 百度地图东莞8小时迁徙图;百度搜索智能提醒
• 360手机卫士,电话号码防骚扰功能是通过用户的地域、身份、骚扰趋势,将标记的2.56亿个电话号码选出1000个和用户关联度最高的,写入用户手机的10k的文本里,达到不联网不做任何网络交互的情况下,为用户防骚扰

SPA的意义

spa也就是single page application 单页程序
在我们大部分人的印象中,前段只是mvc的view部分,对不对,浏览器发送请求的时候,服务端进行mvc处理,利用jsp/php之类,动态生成html语言,然后在浏览器上渲染出来。这样有个不好的地方就是基本上服务端把所有的东西都给做完了,1、服务器的压力过大,2、前后端分工并不明确,3、每次加载渲染时间相对较长。尤其是手机端,在4g出现以前加载一个页面是一件十分感人的事情,用户体验特别差。angularJs等框架出现后解决了这个问题,他会在首次加载的时候加载大部分依赖的js然后我们就可以在前段实现控制,类似于mca和核心沟通一样,浏览器和服务端的的沟通也只是报文的处理,这样服务端和前段的开发就不再形成阻塞,约定好接口形式,然后同时开发,都开发好都在进行接口调试,这样也提升了效率,
这是一个余额查询的调用形式,

操作交易其实也类似,我向特定的接口发送json串,然后后台返回操作成功与否,我们根据返回报文的情况做不同的处理或弹出错误信息或跳转到对应界面,或者是跳转到错误界面上。这样前端就负责了网站的页面域用户的一切交互,而后台负责对数据进行安全处理,把视图与视图的控制交由前端管理,同时当我们跳转页面的时候也不是重新加载一个新的界面,而是加载一个页面片段,然后将其嵌套进当前界面中,这个过程中避免了页面的重新加载与渲染,js的那些全局变量也不需要重新赋值

优点:

网络标准统一、HTML5本身是由W3C推荐出来的。
多设备、跨平台
即时更新
提高可用性和改进用户的友好体验
有几个新的标签,有助于开发人员定义重要的内容
可以给站点带来更多的多媒体元素(音频和视频)
可以很好的代替Flash和Silverlight
被大量应用于移动应用程序和游戏

HTML5+CSS3

这是这几年被说烂了的一个词,人人都在说HTML5,问HTML5是什么,他们也说不清楚,就是酷,就是炫,就是酷炫。

在我看来,HTML5只是一个三人成虎的东西,它吸引的眼球远超过了它提供的功能,HTML5只是提供了一些新的API,就等于一个app从1.0升级到2.0增加了附近的人功能而已。而且其提供的API,也就是在移动端试一试水,在pc端因为兼容的问题,始终不能被明媒正娶。pc端的开发还是以HTML4.0+CSS2为基准渐进增强。至于css3,它最被人关注的动画,也是flash玩剩下的东西。

移动端的飞速发展催化了HTML5的发展,HTML5的发展也促使各浏览器趋于标准化。

这条标准化路上,微信功不可没,1024,围住神经猫,淘宝十年,LEXUS NX这些融合了大量HTML5+CSS3元素的页面让人印象深刻。

此外,微软抛弃IE代号,开发edge,各大浏览器厂商的不断标准化,HTML5草案定稿,ES6草稿的不断实现与完善,前端之路看起来是一条京畿坦途,我充满期待。

缺点:

安全方面:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket这样的功能很容易被黑客利用,从而盗取用户的信息和资料
完善性方面:许多特性各浏览器的支持程度不同
技术门槛方面:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage等新特性,后台甚至浏览器原理的知识,机遇的同时也意味着挑战
性能方面:某些平台下的引擎问题导致HTML5性能低下
浏览器兼容性方面:最大缺点,IE9以下的浏览器几乎都不兼容

未来

3D页游?WebOS? 虚拟现实?

最后,随着用户硬件性能的提升,网络带宽的越来越粗,传感系统,Retina,WebGL技术的日渐成熟,再加上O2O的蓬勃发展,上边这些会成为现实么?

1 赞 3 收藏 评论

永利游戏平台 2

扩展

优点 - 跨平台的使用。比如你开发了一款HTML5的游戏,可以轻易的一直到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以他得跨平台行非常强大。 - 自适应网页。可以自动识别屏幕宽度,并作出相应调整的网页设计。网站为不同的设备提供不同的网页,如专门提供mobile版本活着iPhone/iPad版本。但是这样需要同时维护多个版本,会大大增加架构设计的复杂度。

本文由永利集团登录网址发布于web资讯,转载请注明出处:前端小tips(永利游戏平台:四)

关键词: