baby | IT-北北报

为什么我们还在使用那些陈旧的技术

2017/12 29 16:12

好久不见,技术又革新了吗?我今天来的目的就是解释一下如下几个问题:

1.为什么很多企业单位还在使用Win7,甚至是WinXP,政府机构尤为突出?

2.为什么很多公司前端程序员还在使用jQuery?

3.为什么我们的父母坚决抵制把钱存在互联网金融?

future-2

最近产生了改了一批旧代码,有一些感触,为什么我们还在使用那些陈旧的技术?

最近帮朋友解决一个小问题,看了一下某国有企业的ERP系统代码,我的天哪,是.net写的,而且是WebForm写的,这如果在10年前,绝对属于新技术,从asp时代走到HTML与Server分层书写,能用这种技术写出这么庞大的系统,今天一定是年近四旬的大神了……哈哈哈。

还是最近,梳理了一个用requirejs写的项目,项目写的很复杂,能看出来设计是用心了的,放在三五年前,requirejs的模块化开发的思想还算是先进技术,可是当时写的人如果不在了,后人的维护成本将急剧增加。

我不禁反思,是技术进步太快还是我们转向太慢?这些年究竟发生了什么?经过长时间的琢磨与梦研,我得出了一些不确定正确的观点:

1.利益方与思维习惯的阻力令人发指,让旧技术得以保留。

政府为啥用旧系统?企事业单位为啥用古老的管理系统?原因主要有二。

其一,当时花巨资采购的时候级级拨款,层层审批,绑定了一批利益群体,没有人愿意站出来花力气革新,因为你行将搬起石头砸了自己的脚,试想为什么这批系统刚用了2年就又换新(如果这个系统是2年前开始使用的,那么它一定是3年前开始编写的)?于是再拖一年再升级吧,不然财务支出上无法向上级汇报,一年后经过各种复杂审批,终于决定升级系统,于是开始了漫长的招标过程,这其中又有太多的商业利益,折腾一年半载终于有了候选乙方,开始做需求调研吧,开会、出差、各种讨论会议,快的话又经过了三五个月才能进入编码阶段,反而编码倒是蛮快,经常是催催催(程序员加班的根源),可能三四个月就完成了,这时候你会发现离上一个系统最少三四年时间已经过去了。

其二,我都使用了三四年的Win7和ERP系统,如果换了又要产生新的学习成本,可能触及很多老员工老领导的习惯问题,所以在这方面革新也会受到不小的阻力,很可能新系统在上线后很长一段时间使用不起来,大家还是习惯在老系统上办公,直到有一天下了死命令,必须使用新系统进行办公,否则……,于是大家硬着头皮开始用。

2.商业价值是陈旧的技术的保护伞

对于程序员还在使用陈旧技术编程的问题,首先我要恭喜你,因为你还在维护陈旧的代码,起码说明了一点,在商业上这批代码还有价值,还有金主替他买单,不然没人会逼着你改这些目不忍视的代码。因为当年这系统就是用jQuery写的,你要维护他,就必须用jQuery,重写一遍的代价太大了,而且存在了几代程序员的更替,很多坑都不得而知,经常会出现改了一行代码,莫名的程序就运行不起来了……于是商业的保护伞也触发了人类惰性的根源,既然老技术也不错,很多地方都在用,就一直沿用吧……

3.固守的思维方式是时间给的烙印

互联网金融近几年大行其道,当你劝说你的父母把积蓄放到上边能获得比银行更高的收益的时候,他们表现的往往是坚决抵制,誓死不从。最常见的理由是 —— 不安全!对于70年之前的人,他们在银行体系下受益并生存了长达几十年之久,你让他们放弃简直是颠覆性的,当然不乏有思想开放的一些人,他们最先拥抱变化,甚至创造变化,想想互联网界如今顶端的大佬,马云、马化腾、柳传志无疑都是那个年代思潮的先驱。可视99%的人都是凡人,我们不能责怪他们冥顽不灵,因为你没有生活在他们当时的年代,很多事情你无法理解。

殊途同归,这三个问题,最主要的原因我姑且都归咎于是思想的滞后导致行动的滞后,而思想又是最难以改变的东西,都说“江山易改本性难移”就是这个道理了。时代的车辙滚滚向前,走出安逸区,不停的刷新自己的认知,去学习,去积累,去升华自己,才能成为那1%的阶级跃迁者。

 

欢迎关注公众号,我们会不定期分享前沿技术、学习资料,在前端的道路上一起成长

qrcode_public

 

 

Webkit内核-Render树

2017/03 22 17:03

RenderObject类

RenderObject是Render树的节点基础类,提供了一组公共的接口。

webkit0

 

在DOM树中,分为“可视节点”与“非可视节点”,比如”head”、“script”就是典型的“非可视节点”,而“body”、“div”、“canvas”等这些节点通常情况下为“可视节点”,这些节点会呈现一块区域。

对于“可视节点”,Webkit会为他们创建相应的RenderObject对象,一个RenderObject对象保存了为绘制DOM节点所需要的各种信息,如样式布局信息,元素颜色信息。页面上所有的节点构成了RenderObject树,这里要注意,RenderObject树节点和DOM节点不是一一对应关系,下边三个原则会被创建RenderObject节点:

  • DOM树的document节点;
  • DOM树中的“可视节点”;Webkit不会为非可视节点创建RenderObject节点;
  • 某些情况下Webkit匿名RenderObject节点,这些节点不应用于DOM树中的节点,典型的例子是RenderBlock节点。

 

 

匿名RenderBlock对象

 

CSS中有块级元素和内嵌(inline)元素之分。内嵌元素表现的是行布局形式,就是说这些元素以行进行显示。以 div 元素为例,如果设置属性 style 为 display:inline 时,则那是内嵌元素,那么它可能与前面的元素在同一行;如果该元素没有设置这个属性时,则是块级元素,那么在新的行里显示。

 

RenderBlock用来是用来表示块级元素, 为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象,因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以,当它包含两种元素的时候,那么它会为相邻的内嵌元素创建一个块级RenderBlock节点,然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女。

 

影子DOM

对于影子DOM,就是在DOM节点中还没有实际appendChild的节点,它可能是由createElement方法产生的内容,Javascript代码没有办法访问影子DOM,Webkit需要创建并渲染RenderObject对象,但是不需要把它转换为RenderObject节点。

 

Element类

 

RenderObject对象包含Element类,每个Element对象都会递归调用”attach”函数,该函数检查Element对象是否需要创建RenderObject节点,如果需要会使用NodeRenderingContext类来根据DOM节点的类型来创建RenderObject节点。

 

层次和RenderLayer对象

 

网页是可以分层的,这有俩点原因,一是方便网页开发者开发网页并设置网页层次,二是为了Webkit在处理时更便捷。

在某些类型的RenderObject节点或具有某些CSS样式的RenderObject节点出现时,Webkit就会为这些节点创建RenderLayer对象。RenderLayer创建的基本原则如下:

  • DOM树中Document节点对应的RenderView节点;
  • DOM树中的Document的子女节点,也就是HTML节点对应的RenderBlock节点;
  • 显示的指定CSS位置的RenderObject节点;
  • 有透明效果的RenderObject节点;
  • 节点有溢出(overflow)、alpha或反射等效果的RenderObject节点;
  • 使用Canvas 2D和3D(WebGL)技术的RenderObject节点;
  • Video节点对应的RenderObject节点。 

 

为了直观感受这三种树,如下给出了这三种树及其它们之间的对应关系:

webkit1

 

由此可见他们三者相互之间并不是一一对应的关系。

 

 

 

欢迎关注公众号,我们会不定期分享前沿技术、学习资料,在前端的道路上一起成长

qrcode_public

Webkit内核-节点渲染与JS执行原理

2017/03 09 09:03
webkit-logo

简介

在Webkit中,节点的渲染是由HTMLContructionSite类来完成的,该类包含一个DOM树的根节点HTMLDocument对象,其它的元素都是它的后代元素。

因为HTML文档的Tag标签是有开始结束标记的,所以构建过程使用栈结构是再合适不过的。HTMLContructionSite类中包含一个HTMLElementStack变量,它是一个保存元素节点的栈,在其中的元素就是当前有开始标记但还没有结束标记的的元素节点。

 

实例

一个HTML片段如:

 

<body><div><img></img></div></body>

解释器先做入栈操作,当解释到img元素的开始标记时,栈中的元素就是body、div和img,当遇到img的结束标记时,img出栈,img是div的子元素,当遇到div的结束标记时,div出栈,表明div和它的子女都已经处理完毕,以此类推。

根据DOM标准中的定义,节点有很多中类型、属性,所以他们有一个基础的父类 — Node类。

在Webkit中,DOM中的接口Interface对应于C++的类,Node类是其它类的基类,Node类实际上继承自EventTarget类,它表明Node类能够接受事件;同时,Node类还继承自另外一个关键的基类 — ScriptWrappable,这个与Javascript引擎密切相关。

webkit-nodeElement

Javascript的执行

在HTML解释器工作中,可能会有Javascript代码需要执行,它发生在将字符串解析成词语后创建节点时。这也是为什么全局执行的Javascript代码不能访问DOM树的原因,因为DOM在那个时间点还没有被创建出来。

Webkit将DOM树创建过程中需要执行的Javascript代码交给HTMLScriptRunner类来负责。原理就是利用Javascript引擎来执行Node节点中包含的代码。

因为JS代码可能会调用”document.write”等方法来修改文档结构,所以JS代码的执行会阻碍后面节点的创建,同时也会阻碍后边资源的下载,这也是JS阻塞加载的原理所在。

所以会有俩点建议:

1.将script标签加上”async”属性,说明这是一个可以异步执行的JS代码;

2.将script元素放在body的最后。(更推荐一些)

然而Webkit在这方面进行了一些优化,当遇到需要执行的JS代码时,Webkit会先暂停执行,使用预先扫描器HTMLPreloadScanner类扫描后面的词语。如果Webkit发现有其它资源需要加载,则使用资源加载器HTMLResourcePreloader类来请求资源,在这之后才执行JS代码。预先扫描并不会真实创建节点,所以速度较快。但是并不是所有渲染引擎都做了相关优化,所以第二种方式会更被推荐一些。

 

DOMContentLoaded

当Dom树创建完成后,Webkit触发了”DOMContentLoaded”事件,这就是我们熟悉的window.onload函数,此时一些代码才会在资源加载完成后执行,避免了DOM还没创建就出现操作的问题。

 

另外您可以关注我的公众号,更多技术文章将通过公众号进行分享

qrcode_public



无觅相关文章插件,快速提升流量