精华内容
下载资源
问答
  • 大家对github不要畏惧,可以很容易找到一些小的项目来练手,传自己的github上,一些同学可能苦于找不合适的小项目,我这里给大家推荐一些适合练手的小项目: 联机五子棋(简单的c实现) , NosqlAttack (python...

    代码随想录刷题网站上线咯:programmercarl.com,200道力扣题目刷题顺序,详细题解,支持C++、Java、Python、Go、JS等多语言版本,一个你只要发现,就会收藏的硬核算法学习网站。

    大家好,我是程序员Carl,毕业先后在腾讯百度工作多年,看过很多社招和校招的简历,这篇文章我来总结一下程序员的简历应该怎么写,有哪些注意事项,还给出了我自己的简历模板,好了,我只能帮到这了。

    简历基调

    程序员的简历力求简洁明了,不用设计上过于复杂,如果放照片的话,除了照片 其他不用再有彩色的地方了。

    下面也提供了简历的模板

    校招生一页简历就够了,社招的话两页简历便可。

    有的校招生说自己的经历太多了,简历要写出两三页,看完之后基本不是内容太多了,就是太啰嗦了,例如校园活动一大堆
    既然是面试技术岗位,其他的就一笔带过就好。

    谨慎使用精通两字

    应届生或者刚毕业的程序员在写简历的时候 切记不要写精通某某语言,如果真的学的很好,推荐写熟悉

    但是有的同学可能仅仅使用一些语言例如go或者python写了一些小东西,或者了解一些语言的语法,就直接写上 熟悉C++、JAVA、GO、PYTHON ,这也是大忌,如果C++更了解的话,建议写 熟悉C++,了解JAVA、GO、PYTHON

    这里词语的强烈程度: 精通 > 熟悉(推荐使用)>掌握(推荐使用)> 了解(推荐使用)

    这里还有做好心理准备就是 一旦我们写了熟悉某某语言,这门语言就一定是面试中重点考察的一个点,例如写了熟悉C++, 那么继承、多态、封装、虚函数、C++11的一些特性、STL 就一定会被问道。

    所以简历上写着熟悉哪一门语言,在准备面试的时候重点准备,其他语言几乎可以不用怎么看,面试官在面试中通常只会考察一门编程语言。

    拿不准的绝对不要写在简历上

    不要为了简历上看上去很丰富,就写很多内容上去,内容越多,面试中考点就越多,简历中突出自己技能的几个点,而不是面面俱到。

    想想看 面试官一定是拿着你的简历开始问问题的,如果因为仅仅想展示自己多会一点点的东西就都写在简历上,等于给自己挖了一个巨坑。

    例如仅仅部署过nginx服务器,就在简历上写熟悉nginx,那面试官可能上来就围绕着nginx一波询问,同学们如果招架不住,然后说 我仅仅部署过,底层实现我都不了解。想想看那场面有多尴尬。

    同时尽量不要写代码行数10万+ 在简历上,这就过于提高了面试官的期望,首先就是代码行数10W+ ,无从考证。

    而且这无疑大大提高的面试官的期望和面试官问问题的范围,这相当于告诉面试官我写代码没问题,你就尽管问吧。

    然后简历上也没有重点的话,面试官就开始铺天盖地问起来,恐怕同学回答的效果也不会好。

    项目经验应该如何写

    项目经验中要突出自己的贡献,不要描述一遍项目就完事了,要突出自己的贡献,是添加了哪些功能,还是优化了那些性能指数,最后再说说受益怎么样,例如这个功能被多少人使用,例如性能提升了多少倍。

    其实很多同学的一个通病就是在面试中说不出自己项目的难点, 项目经历写了一大堆,各种框架数据库的使用都写上了,却答不出自己项目中的难点。

    有的同学心里会说,自己的项目没有什么难点,就是按照功能来做,遇到不会配置的不会调节的,就百度一下。

    其实大多数人做项目的时候都是这样的,不是每个项目都有什么难点,可是为什么一样的项目经验,别人就难点上就能说出一二三来呢。 下面我们来说一下

    做项目的时候时刻保持着对难点的敏感程度,很多我们费尽周折解决了一个问题,然后自己也不做记录,就忘掉了,此时如果及时将自己的思考过程记录下来,就是面试中的重要素材,养成这样的习惯非常重要

    很多同学埋怨自己的项目没难点,其实不然,找到项目中的一点,深挖下去就会遇到难点,解决它 就可以拿来在面试中来说,例如使用java完成的项目,在深挖一下 Java内存管理,看看是不是可以减少一些虚拟机上内存的压力。

    所以很多时候 不是自己的项目没有难点,而是自己准备的不充分

    项目经验是面试官一定会问的,那么不是每一个面试都是主动问项目中有哪些亮点或者难点,这时候就需要我们自己主动去说自己项目中的难点。

    在这里我们说一个面试中作为面试者如何变被动为主动的技巧,例如自己的项目是一套分布式系统,我们在介绍项目的时候主动说 项目中的难点就是分布式数据一致性的问题。

    此时就应该知道面试一官定会问 你是如何解决数据一致性的? 如果你对数据一致性协议的使用和原理 足够的了解,就可以和面试关侃侃而谈。

    我们在简历中突出项目的难点在与数据一致性,而我们之前就精心准备一致性协议,数据一致性相关的知识,就等着面试官来问,这样的简历才是好的简历,而不是简历上泛泛而谈什么都说,最后什么也不了解。

    面试一共就三十分钟或者一个小时,说两个两个项目中的难点,既凸显出自己技术上的深度,同时项目中的难点是最好被我们自己掌控的,因为这块是面试官必问的,就是我们可以变被动为主动的关键。

    真正好的简历是 当同学们把自己的简历递给面试官的时候,基本都知道面试官看着简历都会问什么问题,然后将面试官的引导到自己最熟悉的领域,这样同学们才会占有主动权。

    而不会让面试官问了很多自己不会的内容。而简历上写很多范范的内容,什么都写一点,这会放大面试官问问题的范围,而且稍稍往深一问,同学们就回答不上来的话,那这场面试可能机会就不大了,希望大家知道这么个道理。

    博客的重要性

    可以把自己的博客地址,Github地址,甚至微博(如果发了很多关于技术的内容)

    通过博客和github 面试官就可以快速判断同学们对技术的热情,以及学习的态度,可以让面试官快速的了解同学们的技术水平。

    如果有很多高质量博客和漂亮的github的话,及时面试现场发挥的不好,面试官通过博客也会知道这个这问同学基础还是很扎实,只是发挥的不好而已。可以看出记录和总结的重要性。

    写博客,不一定非要是技术大牛才写博客,大家都可以写博客来记录自己的收获,每一个知识点 大家都可以写一篇技术博客(自己刷过的题,自己准备面试时候的知识点等等)

    如果从来没有写过的话,我建议现在大家就去注册一个博客,CSDN或者博客园都是可以的。

    不是十分建议自己搭建博客网站,因为浏览量会特别的低,不容易曝光自己,提升自己的知名度。

    一些同学应该还没有github账户 ,或者已经有了,但github上空空如也什么也没有,那么没有github账户的大家现在就要去注册一个。

    大家对github不要畏惧,可以很容易找到一些小的项目来练手,传到自己的github上,一些同学可能苦于找不到合适的小项目,我这里给大家推荐一些适合练手的小项目:

    即使不做项目,在学习涉及模式的时候将自己的所学的设计模式整理出来,依然也是自己的github上的项目,例如:

    面试只有短短的30分钟或者一个小时,如何把自己掌握的技术更好的展现给面试官呢,博客、github都是很好的选择,如果把这些放在简历上,面试官一定会看的,这都是加分项。

    简历模板

    在这里插入图片描述
    想要获取简历模板word版本,可以关注【代码随想录】公众号,后台回复:【简历模板】,就可以获取该简历模板

    这里是简历模板中markdown的代码 Github地址

    大家可以fork到自己github仓库上,然后可以根据自己的情况自行修改。 (别忘了顺便给一个star,哈哈)

    简历的word版本,我也分享出来,点击这里下载

    总结

    好简历的敲门砖,同事也不要在简历上花费过多的精力,好的简历以及面试技巧都是锦上添花,真的求得心得的offer靠的还是真才实学, 希望通过这篇文章,大家可以在重审一遍自己的简历,发现哪里的不足,面试前多准备多练习。

    我已经陆续将我的题解按照由浅入深的刷题顺序编排起来,整理成册,这份刷题顺序和题解在公众号里已经陪伴了上万录友。

    PDF中不仅有刷题大纲、刷题顺序,还有详细图解,每一本PDF发布之后都广受好评,这也是Carl花费大量时间写题解的动力。

    PDF部分截图:

    pdf

    说了这么多还是眼见为实,下载地址,赶快去看一看,你会发现相见恨晚!

    如果感觉题解对你有帮助,不要吝啬给一个👍吧!

    展开全文
  • 此次,世界卫生组织将疫情列为“国际关注的突发公共卫生事件”( PHEIC),意味着该事件“严重、突然、不同寻常、意料之外”,作为国际经贸往来的钮带,出口也受到一定程度的冲击和影响。 在疫情的影响下,从...

    出品 | CDA数据科学研究院
    版权归原作者所有,转载请注明来源

    “在过去的几周中,我们目睹了一种以前未知的病毒的出现,该病毒已升级为史无前例的疫情爆发,并已得到史无前例的应对。”
    ——世卫组织总干事谭德赛(Tedros Adhanom Ghebreyesus)

    就在10多天前,我们甚至没想过,2020竟以这样的方式“魔幻”开局:

    一只叫作“新型冠状病毒“的黑天鹅扑面而来,就像开启了传说中的潘多拉魔盒,用一只黑暗之手,撕开了2020的大门。

    因为病毒,大家闭门不出,昔日热闹的营业场所空空荡荡,但大街上依然有快递员的奔波。天猫超市承诺不打烊,在盒马鲜生,你每天稍微晚一点都抢不到新鲜蔬菜。

    疫情肆虐、武汉封城、街巷冷清。
    这是“宅”年,我们难得的慢下来、沉静下来。
    人人自危、千里驰援,冷暖自知。
    这是“难”年,我们久违的冷下来,思考起来。

    从短期来看,疫情如同一场脉冲,显著地冲击着经济的律动。从长期来看,疫情也是历史的浪花,时间会熨平一切。其实,我们或许并不纠结于看得见的疫情,但或许却在焦虑着看不见的远方。对企业、对个人,对国家,这都是一场没有硝烟的战斗。凯恩斯有云:在长期里面,一切皆有可能发生……

    **我们为小伙伴们盘点和梳理了“受疫情影响最大的10大行业与10大职业”。**这一次,我们试着从人的活动半径与行为、经济的运行规律、宏观中观微观的传导逻辑、危与机的变量转换等四个层面,去思考受疫情影响最大的行业与职业。

    PART 1

    穹顶之下,受疫情影响最大的10大行业

    黑夜给了我们黑色的眼睛,我们却要用它来寻找光明

    疫情的传染性越强,人的活动半径受到的冲击就越大,与之相关的行业承受的压力也越大。从经济学的角度,经济是由消费、投资、出口三架马车构成的,这次疫情显然直接冲击着与人和消费相关的行业

    第1个受影响的行业:电影行业

    我们第一次知晓一个叫作“贺岁档”的名词,或许,还是从冯小刚导演开始的。

    **其实,电影之于我们,是一个并不太容易抵挡的诱惑。**毕竟,光影之间,那些儿时的梦想与憧憬、英雄情结,甚至是窃窃的幻想,似乎都能在电影中满足。尽管时光变化,审美亦在变化,但过年时,与家人一起看几场欢乐的电影,放松365天下来的崩紧的神经,总不失为一场美丽的犒劳。

    **每一年的贺岁档,都是神仙打架的场面,但今年,却并不乐观。**整个贺岁档在全年票房收入中占据重要地位,仅在2019年就占到全年总收入642.66亿的9%。

    对影院行业来说,疫情冲击下,多部影片选择撤档,大年初一票房仅181万,而在一年前的同一天,这个数字是14.58亿元,差距极为悬殊。

    2020年的这场“武汉疫情”,不仅威胁着我们的健康,对于本就处于寒冬多时的中国影视市场而言无疑雪上加霜。

    或许,我们都欠着2020年,一张电影票。

    第2个受影响的行业:餐饮行业

    民以食为天。

    **作为满足“衣食住行“的基础需求的行业,一个天字,尽显餐饮行业的重要性。**柴米油盐酱醋茶,开门七件事始终是绕不过去的。今年,繁忙的年夜饭消停了,本该是最热闹的餐厅,现在却基本上空无一人。

    “目前最大的压力还是养人啊,2万多人,1万多人在宿舍,1万多人在家。一个月发工资就得1.56个亿,如果两个月、三个月那得多少?时间短了行,时间长了咱也扛不住啊”
    ——餐饮界老将、西贝创始人贾国龙

    最近,西贝创始人贾国龙的一席话,引起了大家的广泛关注,也道出了企业的成本窘境和经营难题。**这个春节,十几亿国人被迫宅在家中,没有了人情往来,没有了亲朋相聚,自然没有了觥筹交错。**更糟的是,许多原定的婚宴和商务往来也被取消,大量餐厅饭馆停止营业,一层层传导之下,餐饮行业受到的冲击,可想而知。

    第3个受影响的行业:交通运输行业

    03年的非典,虽然也受影响,但却没有大规模的隔离防控。

    眼下,为了避免自身感染,降低与传染源接触的概率,各地纷纷对人口流动实施严格控制。人们也减少外出旅游、探亲等活动,全国的高铁、水路、公路、航空运输客流都出现显著下降,为了支持疫情,多家企业实行退票免费,相关企业均有损失。

    交通运输行业本质上是承载“人的流动”的行业,出行需求减少,人的流动没了,意味着短期内钱的流动、物的流动都在停滞,可以想象,即使在疫情控制后,人们对于疾病的恐惧仍然会导致大家会减少类似行为。

    很多地方已经实施“隔离”措施,不少疫情严重的城市甚至直接“封城”,交通的影响是全方位的,是每个人都身在其中的。我们期待疫情迅速得到控制,让这静滞的一切,再次流动起来。

    第4个受影响的行业:零售行业

    此次的新型冠状病毒是一种通过空气、飞沫传染的致死性高的呼吸道传染性疾病,这使得人口聚集型的服务类产业受到严重冲击,其中最典型的便是零售行业。

    在零售行业,很多商家为了布局春节消费黄金周,提前准备了大量烟酒茶糖干货水果,现在,人们取消了串门拜年,年货严重滞销。人们宅在家里,心理上也不具备消费的冲动,超市老板更需要时间去消化这些堆积如山的年货。

    另一方面,零售行业其实也是国家应对重大灾难的基础建设的一部分,如何发挥好社区商业的便利性、亲民性,在非常时期起到食品供应、稳定民心、维护社会秩序的重要作用,也是值得我们思考的。

    第5个受影响的行业:旅游行业

    相比其它行业来说,旅游行业是一个需求弹性更敏感的行业。

    换句话说,旅游行业是一个可选消费项目,是大家在满足了基本的生活需求之后的服务延伸与扩展。在马斯洛的五层需求模型中,旅游代表着更高级的需求。

    春节本来是是除了“十一”和“五一”之外的重要旅游黄金周,受疫情冲击,基本上A级以上景区都关闭了,传统旺季颗粒无收,由于各地文娱项目叫停,人们陆续中止出行计划。

    与旅游相关的景区服务、酒店分包、机票分包等行业,也都呈现出一荣俱荣,一损俱损的态势。17年前的非典,旅游行业也是率先恢复的行业之一,这一次,我们也期待着旅游业尽早解冻,再现繁荣。

    第6个受影响的行业:制造业

    为了防范疫情扩散,全国春节假期延长3天,湖北省的开工时间不早于2月13日,部分省市复工时间进一步推迟一周,这使得制造业的经营节奏被打乱。

    春节假期结束后,各地可能面临“用工荒”的问题,同时,消费需求减少,部分经济活动中断,工人返城和工厂复工时间不统一,也会对组织生产产生不利影响。

    制造业是一个相对重资产的行业,即使生产和经营部分停摆,企业这个时候仍然要缴纳社保、税金,维持房租、厂房、利息等开支,很多中小型制造业本就高债务短现金流,受到的冲击也相对更大。

    第7个受影响的行业:原油及大宗商品

    新型冠状病毒的蔓延,导致市场避险情绪明显上升,被称为恐慌指数的VIX一度飙升至3个月来的新高。随着疫情的暴发、扩散和蔓延,自2020年1月20日起,国际原油价格迅速下跌,布伦特原油一度跌到了每桶60美元下方。

    原油作为传统风险资产,与大宗商品一样,对宏观变动极为敏感,由于中国是全球第二大原油消费国,由疫情引发的短期内的经济扰动因素或将削弱能源需求。

    **在疫情影响下,商品之王原油和金属之王铜,都出现了持续的杀跌。**同时,交通运输受阻,将对国内原油及成品油的消费产生一定的压力。对于国际原油市场因中国疫情而持跌的情况,据报道,投资银行巴克莱表示,市场反应可能过度了,与2003年SARS爆发相比,冠状病毒对经济的实际影响可能不那么严重,因为中国采取了措施。

    第8个受影响的行业:出口行业

    我国是全球商品出口的第一大国,中国经济在全球链条中举足轻重,出口作为经济三驾马车之一,牵一发动全身。

    出口的需求大多来自海外,而生产在国内。此次,世界卫生组织将疫情列为“国际关注的突发公共卫生事件”( PHEIC),意味着该事件“严重、突然、不同寻常、意料之外”,作为国际经贸往来的钮带,出口也受到一定程度的冲击和影响。

    在疫情的影响下,从我国出发的货物、产品、集装箱、包裹等等,进出境时可能会被要求消毒或检验,这意味着出口的成本增加,出口的难度在提升。

    同时,部分国家或许会考虑减少或暂停与疫情相关的商品的进口,而节后由于部分劳务输出大省的工人无法按时返乡,一些出口型企业原有的出口订单或许还将按期交货,工人的工资还得照发,这也对企业的运营提出了新的挑战。

    第9个受影响的行业:地产业

    1月26日晚间,中国房地产业协会紧急向会员单位并全行业发出号召,暂时停止售楼处销售活动,待疫情过后再行恢复。

    由于疫情带来的连锁冲击,短期之内,整体经济发展减缓,人们的收入降低,对房价的预期也同步降低。

    人们腰包的收入直接决定了对房子的需求与实际消费能力,由于疫情减少了交易,而交易是财富的永动机,当交易停滞,收入减少,财富缩水,地产业也难以独善其身。

    **人们买房是为了生活而美好,但却不会冒着生命危险去看房。当人们不再看房,不再买房,成交就会不复存在。**再叠加上目前“房住不炒”的整体调控政策,地产业的投资属性和金融属性不断降低,会让房价上涨幅度有限,也有利于房价稳定。

    第10个受影响的行业:银行业

    与2003年相比,我国的经济总量早已不可同日而语,这意味着整个经济系统对抗风险以及应对重大灾害的能力远胜于以往。

    但当下的时点上,宏观经济也面临着新的挑战与冲击,一方面,我们处于经济新旧动能切换的档口,实现高质量发展,我们需要找到新的产业去承载新的发展动力。另一方面,上一轮经济周期中,我们的地产、汽车、基建、公路等行业的建设已经处于历史高位,基于投资拉动的链条,其全要素生产率也处于边际效用递减的区间。同时,在疫情的冲击下,中小企业受到的冲击明显大于国有企业和大型企业,我们也需要更多的货币政策、财政政策,去平滑经济和企业运营的剧烈波动。

    银行为百业之母,实体经济的冲击必将折射到金融市场。房租、财务费用、税费、工资薪酬、库存,都是企业主不得不面对的现实,当企业的日子不好过,欠银行的贷款和利息便会承压,银行的日子也会跟着企业而起伏。

    2003年非典时间,国家迅速拿出了一系列的政策全力应对,此次疫情对经济的冲击是大概率事件。风雨共担,向光而行,现在这场疫情,各个行业环环相扣,谁也不能独善其身。企业是民生之本,背后是数以万计的家庭。我们国家不会坐视不管,会采取各种措施稳定经济,帮助企业度过难关。

    一方面,国家可以采取适度宽松的货币政策,帮助企业缓解融资压力,降低资本成本,并鼓励各级金融机构通过各种手段向实体经济投放融资,减经企业因疫情冲击带来的经营压力。其次,财政政策可以相机决策,除了支持抗疫所需的财力外,还可以定向针对那些受到疫情明显负面影响的行业和地区减免税收,帮助中小型企业渡过难关。再者,国家可以鼓励并提倡基于线上场景的网络消费,既可以支持新经济的发展,也可以为化解疫情、实时转换商业模式、满足新的消费需求来创造缓冲空间。最后,国家可以为受疫情影响的城市失业人员、农民等提供临时性的生活补贴,以及更加完善的社会保障。

    PART 2

    不破不立,受疫情影响最大的10大职业

    一切终将过去,在普遍的恐慌中,新的职业机会也在悄然来临

    悲观者看到问题,乐观者总在问题中寻找机会。

    强者之所以强大,就在于当别人恐慌时,他们会把冷静的思考,延伸至势不可挡的未来。毕竟,没有谁可以拒绝未来。

    疫情对消费行为产生影响,从短期来看,疫情冲击着包括10大行业在内许多职场人,然而不破不立,疫情也对未来的商业模式和行业趋势产生影响,只要有需求存在,就一定会有满足需求的新的商业形式。商业世界的迭代与变革,永无止境。

    大疫面前,关乎健康,关乎生命,在冲突与困境中,我们重新思考生命、思考人生、思考未来,这些新的心理预期与价值观,与新的消费需求叠加,新的职业机会破土而生。时间,是我们最好的朋友。

    第1个存在机遇的职业:医生及智能诊疗从业人员

    大疫当前,争分夺秒奋战在一线的医生和护士成为新时代的英雄,承担着救死扶伤的使命,为每个家庭带来希望。

    为了提高“抗”疫能力,人们开始关注大众防护、医用防护耗材、疫苗、诊断检测、抗病毒药物、中药、糖皮质激素等物资,也更关注医生的建议和整个医护群体。

    医生及智能诊疗职业方兴未艾,有些轻症病人只要在家隔离,在远程智能诊疗和智能看护的支持下,就可以避免交叉和重复感染,未来,对于普通患者就可以广泛开展远程医疗服务,由医生在线配合,更好的配置宝贵的医疗资源。

    我们相信,经历这一次疫情,中国的医疗体系的改革会被加速推动,各地医疗人员的互动、资源的复用、互联网的参与、民间力量的介入,将带来全新的面貌。

    第2个存在机遇的职业:在线教育从业者

    疫情之下“停课不停学”,在线教育行业成为新型冠状病毒下最美“逆行”行业。

    1月27日晚,教育部发布《关于2020年春季学期延期开学的通知》,要求部属各高等学校、地方所属院校、中小学校、幼儿园等适当推迟春季学期开学时间。同时,多地暂停线下培训活动,并鼓励尽可能利用互联网和信息化教育资源为学生提供学习支持。

    在线教育从业者迎来了新的机遇,互联网改变了知识的摄取路径与知识传播路径,一个线下教室或许最多容纳几百人,而一位线上老师可以同时跟上万人甚至数十万人同时上课,这是更有效率的学习模式,也让教育资源前所未有的便捷化。

    居家隔离和避免人口大规模流动不仅使线上教育迎来蓬勃发展,这种更具效率的教育资源配置方式,或许也会像2003年非典后的电商行业一样,迎来新的发展契机。

    第3个存在机遇的职业:人工智能及数据分析从业人员

    武汉作为中部地区特大城市,人口达到千万级别,而且是九省通衢,在春运期间被封城,确实是人类有史以来的罕见事件。如果每个人的数据都能被准确定位和追踪,对于疫情的整体防控,无疑将产生巨大的价值。

    日益膨胀的城市对于城市的数据化、智能化提出了新需求,大数据对于人口流动目的地及滞留时间的监测至关重要,直接关系到传染源的防控,而人工智能则对于配置应急医疗。、生活用品供应链、物流信息、信息溯源等形成巨大助力。在未来,智能连接一切,可以想像未来的大数据及人工智能从业者面临着巨大的人才缺口。

    火热的职业需求之下,一技傍身永远是最硬核的。未来,各个行业的工作底层逻辑也越来越有“数据分析”的范式,没有数据运营理念的企业,无疑将会被后浪拍打到沙滩上,而考取CDA数据分析师证书,则成为了职场人士提高职业竞争力、为未来储备电能的极佳方式。

    第4个存在机遇的职业:无人零售、无人餐饮、机器人快递从业人员

    在整个疫情之中,我们尽量避免人与人的传播。

    病毒巨大的传染性,也让我们更加希望通过“无人”服务,来极大的中断传染的媒介,得到更加安全和省心的优质服务。

    无人零售、无人餐饮、机器人快递这些相关的从业机会,也在疫情中突显出旺盛的潜在需求,人类的智力和体力被极大释放出来,可以用到更具有内涵价值的事情上。

    第5个存在机遇的职业:远程办公、家庭办公及视频会议从业人员

    人们虽被疫情隔离在家里,但工作和生活却要继续。

    社会越发达,人的独立性就越强,尽管窗外疫情肆虐,大家却可以通过多人协作任务管理工具、远程办公软件、家用办公设备及视频电话会议等等,从容不迫的组织起工作。轻轻一按鼠标,无纸化的办公更具效率。

    线上协同工作,是未来工作的主流。可能最开始的契机是因为躲避疫情,而一旦普及和成熟后,发现这可能是一个更有效率更具成本的工作方式。

    **在未来,每个人都是一个接口,可以自由的对接整个行业。**通过在线办公,企业也可以灵活的根据项目组织和调配全行业最合适的人员,实现最有价值的链接和对接。

    第6个存在机遇的职业:健身及保健类从业人员

    这次疫情,让我们有更多机会直面生死,直面健康。

    健康本是一个老生常谈的问题,但在重大灾难和重大事件的折射下,在我们静默在家与家人朝夕相处的映衬下,一切显得那么可贵。我们也曾经那般热烈的讨论过996的问题,但现在,我们有更多的机会反诸自身、洞察己心。

    此次疫情给健身行业及保健类从业人员带来全新的机会,没有什么比生命和健康更值得去追寻,我们终于发现,健康才是我们最大的竞争力。

    第7个存在机遇的职业:公共事务应急管理及社区网格化管理从业人员

    从部落、社区到城市,特大城市的公共管理与城市治理,一直是人类历史上一直在经历着的命题。

    这次疫情让我们更关注公共事务应急管理及社区网络化管理的从业者,在灾难、疫情、防控、防灾、应急、民生等方面,如何更好地服务于城市人口,更智能化地治理城市,蕴育着巨大的产业机会。

    当高密度的人口,遇到公共危机的考验,公共事务管理的反馈和监管机制,以及应急机制,社区网格化管理等,都突显了很多新的问题。然而,有问题的存在的地方,就有新的机会与场景,与问题共舞,我们最终才能“长袖擅舞“。

    第8个存在机遇的职业:心理医生及私人医生

    春节本是一年当中最详和、最幸福的时光,可一场疫情打乱了节奏。

    疫情来势汹汹,比疫情更可怕的是恐慌和焦虑情绪的泛滥,人们需要心理医生和私人医生来排解内心的苦闷,对抗负面情绪,提高战胜疫情的信心。

    与此同时,可以想像的是,尽管疫情过去,经历过疫情的医护人员、疑似感染者、长期宅家的普通人、部分特殊行业的工作者,也会需要一个相当长的缓冲和过度期。而疫情过后,人们逐步回归现代社会的高压力与快节奏,在疫情的“创伤”之下,我们需要更强大的内心,也会对心理医生及私人医生产生更多的需求。

    第9个存在机遇的职业:短视频、直播及VR、AR、 线上娱乐从业者

    徐峥的《囧妈》退出春节的影院档,与今日头条签约进行线上免费投放,看似是一个应急事件,其实背后折射着线上娱乐对线下娱乐的替代。

    在疫情面前,线下人流高密度的应用场景急剧被压缩,这对于短视频、直播及VR、AR、线上娱乐从业者来说,也是一个利好。虚拟世界,也可以展现现实世界的美,再加上5G的成熟,让一切变得更有想象力。

    另一方面,4K高清与5G时代的到来,传统线下院线的压力也会越来越大,如何更好地吸引用户,更高效地提高线下观影的体验,如何与人们的手机、智能电视等小屏幕竞争,也成为摆在线下影院面前的一道难题。

    第10个存在机遇的职业:上门服务、同城跑腿、订制服务从业者

    这次疫情让大家被迫宅家,这是一段不小的隔离期。

    反过来,我们可能会想,我们真的需要这么多出门服务吗?

    虽然足不出户,但可以用另一种方式实现流动-----尽管呆在家中,但我们对上门服务、同城跑腿、订制服务的需求却在大增,这种成规模的服务还可以快速降低成本,实现集群效应,也带来新的机会。

    未来,当我们需要清洁、需要保姆、需要护工,需要蔬菜配送,我们可以更多的考虑上门服务与订制。尽管缺少了面对面的亲密与社交感,但对于整体的效率提升,以及实现个性化的需求来说,都是非常值得尝试的方式。

    我们相信,在未来,各种新型技术会不断应用在如何更好地服务14亿人口上来,以人工智能、大数据、区块链为核心的新经济技术动力,也会爆发出更大的威力,以其澎湃动力,更好地服务于实体经验,深刻的改变着我们的商业、企业与产业。

    最后的最后,每个小伙伴的行业与职业不同,眼中的世界也并不相同。对我们来说,更重要的不在于打量当下,而在于着眼未来,对每一个企业,每一个个体来说,对疫情的关注,都会最终落到对自身的关注上。只要脚在动,我们总会看到路的。

    那么,你所在的行业受疫情大吗?疫情对你的职业有哪些影响?疫情过后,你会考虑换个工作吗?或许,换个新的生活方式?

    随着春节返工潮的到来,百业待兴,是时候让我们多关注一下自己的未来了!

    2020年,疫情来得让我们措手不及,但我们众志成城齐抗疫,胜利终将属于我们。在这之前,就让我们好好做个宅男宅女,让胖上去的体重,通过学习瘦回来。待到”出关“之际,我们不再原地踏步,我们已经更代升级!

    展开全文
  • matlab人脸识别论文

    万次阅读 多人点赞 2019-10-11 17:41:51
    这一任务主要受到光照、噪声、面部倾斜以及各种各样遮挡的影响。 2.人脸表征(Face Representation) (也称人脸特征提取) :即采用某种表示方法来表示检测出人脸与数据库中的已知人脸。通常的表示方法包括几何特征(如...

    摘 要

     本文设计了一种基于BP神经网络的人脸识别系统,并对其进行了性能分析。该系统首先利用离散小波变换获取包含人脸图像大部分原始信息的低频分量,对图像数据进行降维;再由PCA算法对人脸图像进行主成分特征提取,进--步降低图像数据的处理量;最后使用经过训练后的BP神经网络对待测人脸进行分类识别。详细介绍了离散小波变换PCA特征提取以及BP神经网络分类设计。通过系统仿真实验与分析发现:人脸特征的提取是该系统的关键;同时,由于人脸灰度信息的统计特征与有监督训练BP神经网络分类器,使该系统只在固定类别,并且光照均匀的人脸识别应用场景中具有较高的识别准确率。因此,很难在复杂环境中应用。
    

    关键词:人脸识别;人工神经网络;离散小波变换; PCA; BP神经网络
    Abstract
    In this paper, a face recognition system based on BP neural network is designed and its performance is analyzed. The system first uses discrete wavelet transform to obtain the low-frequency components which contain most of the original information of the face image, and then uses PCA algorithm to extract the principal component features of the face image, progressively reducing the processing capacity of the image data. Finally, the trained BP neural network is used to classify and recognize the tested face. Discrete wavelet transform PCA feature extraction and BP neural network classification design are introduced in detail. Through the system simulation experiment and analysis, it is found that the extraction of facial features is the key of the system. At the same time, because of the statistical features of gray information and the supervised training of BP neural network classifier, the system only has a high recognition accuracy in fixed categories and uniform illumination of face recognition application scenarios. Therefore, it is difficult to apply in complex environment.

    Key words: face recognition; artificial neural network; discrete wavelet transform; PCA; BP neural network
    1绪论

      人脸识别是模式识别研究的一个热点,它在身份鉴别、信用卡识别,护照的核对及监控系统等方面有着I泛的应用。人脸图像由于受光照、表情以及姿态等因索的影响,使得同一个人的脸像矩阵差异也比较大。因此,进行人脸识别时,所选取的特征必须对上述因素具备-一定的稳定性和不变性。主元分析(PCA)方法是一种有效的特征提取方法,将人脸图像表示成一一个列向量,经过PCA变换后,不仅可以有效地降低其维数,同时又能保留所需要的识别信息,这些信息对光照、表情以及姿态具有一定的不敏感性。 在获得有效的特征向量后,关键问题是设计具有良好分类能力和鲁棒性的分类器、支持向量机(SVI )模式识别方法,兼顾调练误差和泛化能力,在解决小样本、非线性及高维模式识别问题中表现出许多特有的优势。
    

    1.1人脸识别技术的细节

    一般来说,人脸识别系统包括图像提取、人脸定位、图形预处理、以及人脸识别(身份确认或者身份查找)。系统输入一般是一张或者一系列含有未确定身份的人脸图像,以及人脸数据库中的若干已知身份的人脸图像或者相应的编码,而其输出则是一系列相似度得分,表明待识别的人脸的身份。
    1.2人脸识别技术的广泛应用

    一项技术的问世和发展与人类的迫切需求是密切相关的,快速发展的社会经济和科学技术使得人类对安全(包括人身安全、隐私保护等)得认识越来越重视。人脸识别得一个重要应用就是人类的身份识别。一-般来说, 人类得身份识别方式分为三类:
    1.特征物品,包括各种证件和凭证,如身份证、驾驶证、房门钥匙、印章等;
    2.特殊知识,包括各种密码、口令和暗号等;

    3.人类生物特征,包括各种人类得生理和行为特征,如人脸、指纹、手形、掌纹、虹膜. DNA、签名、语音等。前两类识别方式属于传统的身份识别技术,其特点是方便、快捷,但致命的缺点是安全性差、易伪造、易窃取。特殊物品可能会丢失、偷盗和复制,特殊知识可以被遗忘、混淆和泄漏。相比较而言,由于生物特征使人的内在属性,具有很强的自身稳定性和个体差异性,因此生物特征是身份识别的最理想依据。基于以上相对独特的生物特征,结合计算机技术,发展了众多的基于人类生物特征的身份识别技术,如DNA识别技术、指纹识别技术、虹膜识别技术、语音识别技术和人脸识别技术等。生物识别技术在上个世纪已经有了- -定得发展,其中指纹识别技术已经趋近成熟,但人脸识别技术的研究还处于起步阶段。指纹、虹膜、掌纹等识别技术都需要被识别者的配合,有的识别技术还需要添置复杂昂贵的设备。人脸识别可以利用已有的照片或是摄像头远距离捕捉图像,无需特殊的采集设备,系统的成本低。并且自动人脸识别可以在当事人毫无觉察的情况下完成身份确认识别工作,这对反恐怖活动有非常重要的意义。基于人脸识别技术具有如此多的优势,因此它的应用前最非常广阔,已成为最具潜力的生物特征识别技术之一
    1.3人脸识别技术的难点

      虽然人类可以毫不困难地根据人脸来辨别一个人,但是利用计算机进行完全自动的人脸识别仍然有许多困难。人脸模式差异性使得人脸识别成为-个非常困难的问题,表现在以下方面:
    
      1.人脸表情复杂,人脸具有多样的变化能力,人的脸上分布着Ii十多块面部肌肉,这些肌肉的运动导致不同面部表情的出现,会造成人脸特征的显著改变。
    
      2.随着年龄而改变,随着年龄的增长,皱纹的出现和面部肌肉的松驰使得人脸的结构和纹理都将发生改变。
    
      3.人脸有易变化的附加物,例如改变发型,留胡须,戴帽子或眼镜等饰物。4.人脸特征遮掩,人脸全部、部分遮掩将会造成错误识别。
    
      5.人脸图像的畸变,由于光照、视角、摄取角度不同,可能造成图像的灰度。
    

    1.4国内外研究状况

    人脸识别是人类视觉最杰出的能力之-。 它的研究涉及模式识别、图像处理、生物学、心理学、认知科学,与基于其它生物特征的身份鉴别方法以及计算机人机感知交互领域都有密切联系。人脸识别早在六七十年代就引起了研究者的强烈兴趣。20世纪60年代,Bledsoe 提出了人脸识别的半自动系统模式与特征提取方法。70年代,美、英等发达国家开始重视人脸识别的研究工作并取得进展。1972 年,Harmon 用交互人脸识别方法在理论上与实践上进行了详细的论述。同年,Sakai 设计了人脸图像自动识别系统。80年代初
    T. Minami 研究出了优于Sakai的人脸图像自动识别系统。但早期的人脸识别一般都需要人的某些先验知识,无法摆脱人的干预。进入九十年代,由于各方面对人脸识别系统的迫切需求,人臉识别的研究变的非常热门。人脸识别的方法有了重大突破,进入了真正的机器自动识别阶段,如Kartbunen-Loeve变换等或新的神经网络技术。人脸识别研究

    得到了前所未有的重视,国际上发表有关人脸识别等方面的论文数量大幅度增加,仅从1990年到2000年之间,sCl 及EI可检索到的相关文献多达数千篇,这期间关于人脸识别的综述也屡屡可见。国外有许多学校在研究人脸识别技术,研究涉及的领域很广。这些研究受到军方、警方及大公司的高度重视和资助,国内的一些知名院校也开始从事人脸识别的研究。

      人脸识别是当前模式识别领域的一个前沿课题,但目前人脸识别尚处于研究课题阶段,尚不是实用化领域的活跃课题。虽然人类可以毫不困难地由人脸辨别一个人,但利用计算机进行完全自动的人脸识别存在许多困难,其表现在:人脸是非刚体,存在表情变化:人脸随年龄增长面变化:发型、眼镜等装饰对人脸造成遮挡:人脸所成图像受光照、成像角度、成像距离等影响。人脸识别的困难还在于图像包括大量的数据,输入的像素可能成百上千,每个像素都含有各自不同的灰度级,由此带来的计算的复杂度将会增加。现有的识别方法中,通过从人脸图像中提取出特征信息,来对数据库进行检索的方法速度快,而利用拓扑属性图匹配来确定匹配度的方法则相对较快。
    

    1.5人脸识别的研究内容

    人脸识别技术(AFR)就是利用计算机技术,根据数据库的人脸图像,分析提取出有效的识别信息,用来“辨认”身份的技术。人脸识别技术的研究始于六十年代末七十年代初,其研究领城涉及图像处理、计算机视觉、模式识别、计算机智能等领城,是伴随着现代化计算机技术、数据库技术发展起来的综合交叉学科。
    1.5.1人脸识别研究内容

      人脸识别的研究范围广义上来讲大致包括以下hi个方面的内容。
    
      1.人脸定位和检测(Face Detection) :即从动态的场景与复杂的背景中检测出人臉的存在并且确定其位置,最后分离出来。这一任务主要受到光照、噪声、面部倾斜以及各种各样遮挡的影响。
    
      2.人脸表征(Face Representation) (也称人脸特征提取) :即采用某种表示方法来表示检测出人脸与数据库中的已知人脸。通常的表示方法包括几何特征(如欧氏距离、曲率、角度)、代数特征(如矩阵特征向量)、固定特征模板等。
    
      3.人脸识别(Face Recogni tion) :即将待识别的人脸与数据库中已知人脸比较,得出相关信息。这一过程的核心是选择适当的人脸表征方法与匹配策略。
    
      4.表情姿态分析(Expression/Gesture Analysis) :即对待识别人脸的表情或姿态信息进行分析,并对其加以归类。
    
    
      5.生理分类(Physical Classi fication) :即对待识别人脸的生理特征进行分析,得出其年龄、性别等相关信息,或者从几幅相关的图像推导出希望得到的人脸图像,如从父母图像推导出孩子脸部图像和基于年龄增长的人脸图像估算等。
    
      人臉识别的研究内容,从生物特征技术的应用前景来分类,包括以下两个方面:人脸验证与人脸识别。
    
      1.人脸验证((Face Veri ficat ion/Authenticat ion):即是回答“是不是某人?"的问题.它是给定一幅待识别人脸图像,判断它是否是某人的问题,属于一对一的两类模式分类问题,主要用于安全系统的身份验证。
    
      2.人脸识别(Face 。Recognition) :即是回答“是谁”的问题。它是给定-幅待识别人脸图像,再已有的人脸数据库中,判断它的身份的问题。它是个“-对多”的多类模式分类问题,通常所说的人脸识别即指此类问题,这也是本文的主要研究内容。
    

    1.5.2人脸识别系统的组成

      在人脸识别技术发展的几十年中,研究者们提出了多种多样的人脸识别方法,但大部分的人脸识别系统主要由三部分组成:图像预处理、特征提取和人脸的分类识别。一个完整的自动人脸识别系统还包括人脸检测定位和数据库的组织等模块,如图1.1.其中人脸检测和人脸识别是整个自动人脸识别系统中非常重要的两个环节,并且相对独立。下面分别介绍这两个环节。
    

    人脸检测与定位,检测图像中是否由人脸,若有,将其从背景中分割出来,并确定其在图
    像中的位置。在某些可以控制拍摄条件的场合,如警察拍罪犯照片时将人脸限定在标尺内,此时人脸的定位很简单。证件照背景简单,定位比较容易。在另一些情况下,人脸在图像
    中的位置预先是未知的,比如在复杂背景下拍摄的照片,这时人脸的检测与定位将受以下因素的影响: :

      1.人脸在图像中的位置、角度、不固定尺寸以及光照的影响:
    
      2.发型、眼睛、胡须以及人脸的表情变化等,3.图像中的噪声等。
    
      特征提取与人脸识别,特征提取之前一般都要敌几何归一化和灰度归一化的工作。前者指根据人脸定位结果将图像中的人脸变化到同一位置和大小:后者是指对图像进行光照补偿等处理,以克服光照变化的影响,光照补偿能够一定程度的克服光照变化的影响而提高识别率。提取出待识别的人脸特征之后,即进行特征匹配。这个过程是一对多或者一对一的匹配过程,前者是确定输入图像为图象库中的哪一个人(即人脸识别),后者是验证输入图像的人的身份是否属实(人脸验证).  
    

    以上两个环节的独立性很强。在许多特定场合下人脸的检测与定位相对比较容易,因此“特征提取与人脸识别环节”得到了更广泛和深入的研究。近几年随着人们越来越关心各种复杂的情形下的人臉自动识别系统以及多功能感知研究的兴起,人脸检测与定位才作为一个独立的模式识别问题得到了较多的重视。本文主要研究人脸的特征提取与分类识别的问题。

    2基于bp神经网络的人脸识别算法

      虽然人脸识别方法的分类标准可能有所不同,但是8前的研究主要有两个方向,一类是从人脸图像整体(Holistic Approaches)出发,基于图像的总体信息进行分类识别,他重点考虑了模式的整体属性,其中较为著名的方法有:人工神经网络的方法、统计模式的方法等。另一类是基于提取人脸图像的几何特征参数(Feature-Based Approaches), 例如眼、嘴和鼻子的特征,再按照某种距离准则进行分类识别。这种方法非常有效,因为人脸不是刚体,有着复杂的表情,对其严格进行特征匹配会出现困难。面分别介绍- -些常 用的方法,前两种方法属于从图像的整体方面进行研究,后三种方法主要从提取图像的局部特征讲行研究。
    
    
      2.1基于特征脸的方法
    

    特征脸方法(cigenface)是从生元分析方法PCA c Principal ComponentAnalysis 导出的一种人脸分析识别方法,它根据一-组人脸图像构造主元子空间,由于主元具有人脸的形状也称作特征脸。识别时将测试图像投影到主元子空间上得到了-组投影系数,然后和各个已知人的人脸图像进行比较识别,取得了很好的识别效果。在此基础上出现了很多特征脸的改进算法。

      特征脸方法原理简单、易于实现,它把人脸作为一个整体来处理,大大降低了识别复杂度。但是特征脸方法忽视了人脸的个性差异,存在着一定的理论缺陷。研究表明:特征脸方法随光线角度及人脸尺寸的影响,识别率会有所下降。
    

    2.2基于bp神经网络的方法

    一、实验要求采用三层前馈BP神经网络实现标准人脸YALE数据库的识别,编程语言为C系列语言。
    二、BP神经网络的结构和学习算法实验中建议采用如下最简单的三层BP神经网络,输入层为,有n个神经元节点,输出层具有m个神经元,网络输出为,隐含层具有k个神经元,采用BP学习算法训练神经网络。BP神经网络的结构BP网络在本质上是一种输入到输出的映射,它能够学习大量的输入与输出之间的映射关系,而不需要任何输入和输出之间的精确的数学表达式,只要用已知的模式对BP网络加以训练,网络就具有输入输出对之间的映射能力。BP网络执行的是有教师训练,其样本集是由形如(输入向量,期望输出向量)的向量对构成的。在开始训练前,所有的权值和阈值都应该用一些不同的小随机数进行初始化。BP算法主要包括两个阶段:

    2.2.1向前传播阶段

    ①从样本集中取一个样本(Xp,Yp),将Xp输入网络,其中Xp为输入向量,Yp为期望输出向量。
    ②计算相应的实际输出Op。在此阶段,信息从输入层经过逐级的变换,传送到输出层。这个过程也是网络在完成训练后正常运行时执行的过程。在此过程中,网络执行的是下列运算:

    (2) 向后传播阶段
    ①计算实际输出Op与相应的理想输出Yp的差;
    ②按极小化误差的方法调整权矩阵。这两个阶段的工作一般应受到精度要求的控制

    (1)作为网络关于第p个样本的误差测度(误差函数)。

    (2)如前所述,之所以将此阶段称为向后传播阶段,是对应于输入信号的正常传播而言的,也称之为误差传播阶段。为了更清楚地说明本文所使用的BP网络的训练过程,首先假设输入层、中间层和输出层的单元数分别是N、L和M。X=(x0,x1,…,xN-1)是加到网络的输入矢量,H=(h0,h1,…,hL-1)是中间层输出矢量,Y=(y0,y1,…,yM-1)是网络的实际输出矢量,并且用D=(d0,d1,…,dM-1)来表示训练组中各模式的目标输出矢量。输出单元i到隐单元j的权值是Vij,而隐单元j到输出单元k的权值是Wjk。另外用θk和Φj来分别表示输出单元和隐单元的阈值。于是,中间层各单元的输出为:

    (3)而输出层各单元的输出是:

    其中f(*)是激励函数,采用S型函数:

    2.2.2在上述条件下,网络的训练过程如下:

    (1) 选定训练集。由相应的训练策略选择样本图像作为训练集。
    (2) 初始化各权值Vij,Wjk和阈值Φj,θk,将其设置为接近于0的随机值,并初始化精度控制参数ε和学习率α。
    (3) 从训练集中取一个输入向量X加到网络,并给定它的目标输出向量D。
    (4) 利用式(3)计算出一个中间层输出H,再用式(4)计算出网络的实际输出Y。
    (5) 将输出矢量中的元素yk与目标矢量中的元素dk进行比较,计算出M个输出

    误差项:

    对中间层的隐单元也计算出L个误差项:

    (6) 依次计算出各权值和阈值的调整量:

    (8) 当k每经历1至M后,判断指标是否满足精度要求:E≤ε,其中E是总误差函数。

    如果不满足,就返回(3),继续迭代。如果满足,就进入下一步。
    (9) 训练结束,将权值和阈值保存在文件中。这时可以认为各个权值已经达到稳定,分类器形成。再一次进行训练时,直接从文件导出权值和阈值进行训练,不需要进行初始化。

    YALE数据库是由耶鲁大学计算视觉与扼制中心创立,包括15位志愿者,每个人有11张不同姿势、光照和表情的图片,共计165张图片,图片均为80*100像素的BMP格式图像。我们将整个数据库分为两个部分,每个人的前5幅图片作为网络的训练使用,后6副图片作为测试使用。测试样例:

    输入输出:

      神经网络在人脸识别应用中有很长的历史。早期用于人脸识别的神经网络主要是Kohonen自联想映射神经网络,用于人脸的“回忆”。所谓“回忆”是指当输入图像上的人脸受噪声污染严重或部分缺损时,能用Kohonen网络恢复出原来完整的人脸。Intrator 等人用一个无监督/监督混合神经网络进行人脸识别。其输入是原始图像的梯度图像,以此可以去除光照的变化。监督学习目的是寻找类的特征,有监督学习的目的是减少训练样本被错分的比例。这种网络提取的特征明显,识别率高,如果用几个网络同时运算,求其平均,识别效果还会提高。
    
      与其他类型的方法相比,神经网络方法在人脸识别上有其独到的优势,它避免了复:杂的特征提取工作,可以通过学习的过程获得其他方法难以实现的关于人脸识别的规律和规则的隐性表达。此外,神经网络以时示方式处理信息,如果能用硬件实现,就能显著提高速度。神经网络方法除了用于人脸识别外,还适用于性别识别、种族识别等。
    

    2.3弹性图匹配法

    弹性图匹配方法是-种基于动态链接结构DLA C Dynamic Link Architecture的方法。它将人脸用格状的稀疏图表示,图中的节点用图像位置的Gabor小波分解得到的特征向量标记,图的边用连接节点的距离向量标记。匹配时,首先J找与输入图像最相似的模型图,再对图中的每个节点位置进行最佳匹配,这样产生-一个变形图,其节点逼近模型图的对应点的位置。弹性图匹配方法对光照、位移、旋转及尺度变化都敏感。此方法的主要缺点是对每个存储的人臉需计算其模型图,计算量大,存储量大。为此,Wiskott 在原有方法的基础上提出聚東图匹配,部分克服了这些缺点。在聚束图中,所有节点都已经定位在相应目标上。对于大量数据库,这样可以大大减少识别时间。另外,利用聚束图还能够匹配小同人的最相似特征,因此可以获得关于未知人的性别、胡须和眼镜等相关信息。
    2.4基于模板匹配的方法
    模板匹配法是一-种经典的模式识别方法,这种方法大多是用归一一化和互相关,直接计算两副图像之间的匹配程度。由于这种方法要求两副图像上的目标要有相同的尺度、取向和光照条件,所以预处理要做尺度归一化和灰度归一化的工作。最简单的人脸模板是将人脸看成-一个椭圆,检测人臉也就是检测图像中的椭圆。另一种方法是将人脸用一-组独立的小模板表示,如眼睛模板、嘴巴模板、鼻子模板、眉毛模板和下巴模板等。但这些模板的获得必须利用各个特征的轮廓,而传统的基于边缘提取的方法很难获得较高的连续边缘。即使获得了可靠度高的边缘,也很难从中自动提取所需的特征量。模板匹配方法在尺度、光照、旋转角度等各种条件稳定的状态下,它的识别的效果优于其它方法,但它对光照、旋转和表情变化比较敏感,影响了它的直接使用。2.5基于人脸特征的方法人脸由眼睛、鼻子、嘴巴、下巴等部件构成,正因为这些部件的形状、大小和结构上的各种差异才使得世界上每个人脸千差万别,因此对这些部件的形状和结构关系的几何描述,可以作为人脸识别的重要特征。几何特征最早是用于人脸检测轮廓的描述与识别,首先根据检测轮廓曲线确定若干显著点,并由这些显著点导出- -组用于识别的特征度量如距离、角度等。采用儿何特征进行正面人脸识别一般是通过提取人眼、口、鼻等重要特征点的位置和眼睛等重要器官的几何形状作为分类特征。
    定位眼睛往往是提取人脸几何特征的第-步。由于眼睛的对称性以及眼珠呈现为低灰度值的圆形,因此在人脸图像清晰瑞正的时候,眼睛的提取是比较容易的。但是如果人脸图像模糊,或者噪声很多,则往往需要利用更多的信息(如眼睛和眉毛、鼻子的相对位置等),而且.这将使得眼睛的定位变得很复杂。而且实际图像中,部件未必轮廓分明,有时人用眼看也只是个大概,计算机提取就更成问题,因而导致描述同-一个人的不同人脸时,其模型参数可能相差很大,面失去识别意义。尽管如此,在正确提取部件以及表情变化微小的前提下,该方法依然奏效,因此在许多方面仍可应用,如对标准身份证照片的应用。

    2.5九个人脸库介绍

    1. FERET人脸数据库
      http://www.nist.gov/itl/iad/ig/colorferet.cfm
      由FERET项目创建,此图像集包含大量的人脸图像,并且每幅图中均只有一个人脸。该集中,同一个人的照片有不同表情、光照、姿态和年龄的变化。包含1万多张多姿态和光照的人脸图像,是人脸识别领域应用最广泛的人脸数据库之一。其中的多数人是西方人,每个人所包含的人脸图像的变化比较单一。

    2. CMU Multi-PIE人脸数据库
      http://www.flintbox.com/public/project/4742/
      由美国卡耐基梅隆大学建立。所谓“PIE”就是姿态(Pose),光照(Illumination)和表情(Expression)的缩写。CMU Multi-PIE人脸数据库是在CMU-PIE人脸数据库的基础上发展起来的。包含337位志愿者的75000多张多姿态,光照和表情的面部图像。其中的姿态和光照变化图像也是在严格控制的条件下采集的,目前已经逐渐成为人脸识别领域的一个重要的测试集合。

    3. YALE人脸数据库(美国,耶鲁大学)
      http://cvc.cs.yale.edu/cvc/projects/yalefaces/yalefaces.html
      由耶鲁大学计算视觉与控制中心创建,包含15位志愿者的165张图片,包含光照、表情和姿态的变化。
      Yale人脸数据库中一个采集志愿者的10张样本,相比较ORL人脸数据库Yale库中每个对象采集的样本包含更明显的光照、表情和姿态以及遮挡变化。

    4. YALE人脸数据库B
      https://computervisiononline.com/dataset/1105138686
      包含了10个人的5850幅在9种姿态,64种光照条件下的图像。其中的姿态和光照变化的图像都是在严格控制的条件下采集的,主要用于光照和姿态问题的建模与分析。由于采集人数较少,该数据库的进一步应用受到了比较大的限制。

    5. MIT人脸数据库
      由麻省理工大学媒体实验室创建,包含16位志愿者的2592张不同姿态(每人27张照片),光照和大小的面部图像。

    6. ORL人脸数据库
      https://www.cl.cam.ac.uk/research/dtg/attarchive/facedatabase.html
      由英国剑桥大学AT&T实验室创建,包含40人共400张面部图像,部分志愿者的图像包括了姿态,表情和面部饰物的变化。该人脸库在人脸识别研究的早期经常被人们采用,但由于变化模式较少,多数系统的识别率均可以达到90%以上,因此进一步利用的价值已经不大。
      ORL人脸数据库中一个采集对象的全部样本库中每个采集对象包含10幅经过归一化处理的灰度图像,图像尺寸均为92×112,图像背景为黑色。其中采集对象的面部表情和细节均有变化,例如笑与不笑、眼睛睁着或闭着以及戴或不戴眼镜等,不同人脸样本的姿态也有变化,其深度旋转和平面旋转可达20度。

    7. BioID人脸数据库
      https://www.bioid.com/facedb/
      包含在各种光照和复杂背景下的1521张灰度面部图像,眼睛位置已经被手工标注。

    8. UMIST图像集
      由英国曼彻斯特大学建立。包括20个人共564幅图像,每个人具有不同角度、不同姿态的多幅图像。

    9. 年龄识别数据集IMDB-WIKI
      https://data.vision.ee.ethz.ch/cvl/rrothe/imdb-wiki/
      包含524230张从IMDB和Wikipedia爬取的名人数据图片。应用了一个新颖的化回归为分类的年龄算法。本质就是在0-100之间的101类分类后,对于得到的分数和0-100相乘,并将最终结果求和,得到最终识别的年龄

    3matlab分析人脸方法介绍
    人脸识别之一:查找图片中的人脸并用方框圈出
    这种类似于智能手机拍照时,屏幕里那个框任务头部的红框。大致步骤为:获取RGB图片—>转换为灰度图像—>图像处理—>人脸识别。代码如下:clear all
    clc

    %获取原始图片
    i=imread(‘face.jpg’);
    I=rgb2gray(i);
    BW=im2bw(I); %利用阈值值变换法将灰度图像转换成二进制图像
    figure(1);
    imshow(BW);
    %最小化背景
    [n1 n2]=size(BW);
    r=floor(n1/10);
    c=floor(n2/10);
    x1=1;x2=r;
    s=r*c;

    for i=1:10
    y1=1;y2=c;
    for j=1:10
    if(y2<=c || y2>=9c) || (x11 || x2r10)
    loc=find(BW(x1:x2,y1:y2)==0);
    [o p]=size(loc);
    pr=o*100/s;
    if pr<=100
    BW(x1:x2,y1:y2)=0;
    r1=x1;r2=x2;s1=y1;s2=y2;
    pr1=0;
    end
    imshow(BW);
    end
    y1=y1+c;
    y2=y2+c;
    end
    x1=x1+r;
    x2=x2+c;
    end
    figure(2)
    subplot(1,2,1);
    imshow(BW)
    title(‘图像处理’);
    %人脸识别
    L=bwlabel(BW,8);
    BB=regionprops(L,‘BoundingBox’);
    BB1=struct2cell(BB);
    BB2=cell2mat(BB1);

    [s1 s2]=size(BB2);
    mx=0;
    for k=3:4:s2-1
    p=BB2(1,k)*BB2(1,k+1);
    if p>mx && (BB2(1,k)/BB2(1,k+1))<1.8
    mx=p;
    j=k;
    end
    end
    subplot(1,2,2);
    title(‘人脸识别’);
    imshow(I);
    hold on;
    rectangle(‘Position’,[BB2(1,j-2),BB2(1,j-1),BB2(1,j),BB2(1,j)],‘EdgeColor’,‘r’)实验效果图:

             从实验效果图中,可以看出红框框出了人脸部分。
    

    人脸识别之二:由输入的人像识别出数据库中人像
    这种情况类似于手机人脸解锁,通过当前的人脸去和保存的人脸做比对来实现解锁等功能;从网上看了好多资料,由于个人能力有限大多都没仿真出来,最后通过学习PCA算法,了解到可通过PCA算法对输入矩阵降维,提取特征值和特征向量的方式来做人脸比对。具体的PCA的东西在这里不作介绍,主要介绍一下如何实现人脸比对。
    大致步骤:制作人脸数据样本—>PCA提取样本数据特征值—>人脸比对1.人脸样本
    从网上搜集了10张人脸图片,来制作成样本。

                         %读取转换10张图片,生成数据矩阵function ImgData = imgdata()  
    

    %导入图片
    picture1 = rgb2gray(imread(‘1.jpg’));
    picture2 = rgb2gray(imread(‘2.jpg’));
    picture3 = rgb2gray(imread(‘3.jpg’));
    picture4 = rgb2gray(imread(‘4.jpg’));
    picture5 = rgb2gray(imread(‘5.jpg’));
    picture6 = rgb2gray(imread(‘6.jpg’));
    picture7 = rgb2gray(imread(‘7.jpg’));
    picture8 = rgb2gray(imread(‘8.jpg’));
    picture9 = rgb2gray(imread(‘9.jpg’));
    picture10 = rgb2gray(imread(‘10.jpg’));
    [m,n] = size(picture1);
    picture_ten = {picture1,picture2,picture3,picture4,picture5,picture6,picture7,picture8,picture9,picture10};
    for i=1:10
    %把mn的矩阵变换成1(mn)的矩阵
    ImgData(i,:) = reshape(picture_ten{i},1,m
    n);
    end
    %数据范围缩小到0到1之间
    ImgData = double(ImgData)/255;

    PCA分析function Cell_ten = PCA(imgdata,k)
    [m,n] = size(imgdata);
    img_mean = mean(imgdata); %计算每列平均值
    img_mean_ten = repmat(img_mean,m,1); %复制m行平均值至矩阵img_mean_ten
    Z = imgdata - img_mean_ten;
    T = Z’Z;%协方差矩阵
    [V,D] = eigs(T,k); %计算T中最大的前k个特征值与特征向量
    img_new = imgdata
    V*D; %低维度下的各个人脸的数据
    Cell_ten = {img_new,V,D};3.通过输入测试人脸从数据库中找到相对应人脸function face= facefind(Cell_ten,testdata)%此函数代码借鉴于他人,还未征求其同意,这里就暂时略过这里testdata是测试图片的数据4.主程序调用img=imgdata(); %图片矩阵数据
    Cell_ten=PCA(img,2);% PCA
    face1=facefind(Cell_ten,imread(‘test.jpg’));%识别
    subplot(1,2,1)
    imshow(‘test.jpg’)
    title(‘测试图像’)
    subplot(1,2,2)
    imshow(strcat(num2str(face1),’.jpg’))
    title(‘数据库图像’)测试效果: 使用这个方式可以实现简单的人脸识别,但精确度不高;

    4 分析算法
    在人脸识别系统中有许多关键环节,其中最重要的莫过于特征提取。利用主成分分析法(PCA)进行特征提取是目前应用最多的提取方法。作为一种科学的统计方法,它在模式识别、信号处理、数字图像处理等等领域都有广泛涉猎。基于PCA中空间原始数据主要特征提取,减少数据冗余的思想,一些在低维特征空间的数据被处理,并合理保留了原始数据中有用的信息,数据空间中维数过高的问题也得以解决。
    4.1  主成分分析的基本原理

    实际上主成分分析就是一种数学降维演算方法,用若干个综合变量来代替原本更多的变量,让这些综合变量尽可能的实现对原有变量信息的取代,并保持彼此之间不存在关联。这种多变量化为少数相互无关的变量且信息量不变的统计分析方法就叫做主成分分析法。
      假设F1表示原变量的首个线性组合所组成的主要成分指标,就有F1=a11X1+a21X2+…ap1Xp。根据这个数学式可知,如果在每一个主成分中提取一个信息量,即可用方差(F1)进行度量,随着方差F1的增大,F1所包含的信息也就越多,同时它的线性组合选取也可表示为X1、X2…XP,它们都被称为方差F1中的第一主成分。如果第一主成分不足以代表原有的P个变量信息时,就可以考虑选取F2,即第二个线性组合,借由它来反映原本的有效信息。在F2中可以不显示第一主成分中已有的信息,以数学语言来表达要求的话即Cov(F1,F2)=0,其中F2为第二主成分。所以按照实际原变量的变化需求,就可以构造出多个主成分指标。
      4.2人脸识别的技术特点

    人脸识别是模式识别中的重要分支,它是指通过计算机系统来分析人脸图像,从中获取有价值的识别信息,从而辨识身份。所以说从技术特点上来看,人脸识别具有以下几个关键特色。
     1、PCA算法
    算法大致步骤:
    设有m条n维数据。
    1)将原始数据按列组成n行m列矩阵X;
    2)将X的每一行(这里是图片也就是一张图片变换到一行)进行零均值化,即减去这一行的均值(样本中心化和标准化);将所有的样本融合到一个矩阵里面特征向量就是变换空间的基向量U=[u1,u2,u3,u4,…],脑袋里面要想到一个样本投影变换就是该空间的一个点,然后对于许多点可以用KNN等不同的方法进行分类。
    3)求出协方差矩阵C=1mXXTC=1mXXT C=\frac {1 }{m } XX^TC=m1XXT;
    4)求出协方差矩阵的特征值及对应的特征向量;
    5)将特征向量按对应特征值大小从上到下按行排列成矩阵,取前k行组成矩阵P;
    6)Y=PXY=PX Y=PXY=PX即为降维到kk kk维后的数据。
      对数据进行中心化预处理,这样做的目的是要增加基向量的正交性,便于高维度向低纬度的投影,即便于更好的描述数据。
      对数据标准化的目的是消除特征之间的差异性,当原始数据不同维度上的特征的尺度不一致时,需要标准化步骤对数据进行预处理,使得在训练神经网络的过程中,能够加速权重参数的收敛。
      过中心化和标准化,最后得到均值为0,标准差为1的服从标准正态分布的数据。
      求协方差矩阵的目的是为了计算各维度之间的相关性,而协方差矩阵的特征值大小就反映了变换后在特征向量方向上变换的幅度,幅度越大,说明这个方向上的元素差异也越大(越有投影的必要,矩阵相乘的过程就是投影),故而选取合适的前k个能以及小的损失来大量的减少元数据的维度。

    2、PCA原理推导
    基于K-L展开的PCA特征提取:

    5.算法优化方法
    我用了三种方法对其进行优化
    1.采用动量梯度下降算法训练 BP 网络。
    训练样本定义如下:
    输入矢量为
    p =[-1 -2 3 1
    -1 1 5 -3]
    目标矢量为 t = [-1 -1 1 1]
    2. 采用贝叶斯正则化算法提高 BP 网络的推广能力。在本例中,我们采用两种训练方法,即 L-M 优化算法(trainlm)和贝叶斯正则化算法(trainbr),用以训练 BP 网络,使其能够拟合某一附加有白噪声的正弦样本数据。其中,样本数据可以采用如下MATLAB 语句生成:
    输入矢量:P = [-1:0.05:1];
    目标矢量:randn(’seed’,78341223);
    T = sin(2piP)+0.1randn(size§);
    3. 采用“提前停止”方法提高 BP 网络的推广能力。对于和例 2相同的问题,在本例中我们将采用训练函数 traingdx 和“提前停止”相结合的方法来训练 BP 网络,以提高 BP 网络的推广能力。在利用“提前停止”方法时,首先应分别定义训练样本、验证样本或测试样本,其中,验证样本是必不可少的。在本例中,我们只定义并使用验证样本,即有
    验证样本输入矢量:val.P = [-0.975:.05:0.975]
    验证样本目标矢量:val.T = sin(2
    pival.P)+0.1randn(size(val.P))
    值得注意的是,尽管“提前停止”方法可以和任何一种 BP 网络训练函数一起使用,但是不适合同训练速度过快的算法联合使用,比如 trainlm 函数,所以本例中我们采用训练速度相对较慢的变学习速率算法 traingdx 函数作为训练函数。
    参考文献

    [1] HongZiquan.AlgbricFeatureExcaciofmftfoReonino[JPatteo Recognition. 1991. 22 (1) :43~44.
    [2] Yuille A L Detcction Templates for Face Recognitio[JCognitive Neuroscience , 1991. 191-200
    [3]卢春雨张长水局城区城特征的快速人脸检测法[D北京:清华大学学报.1999.96 (1) ;4-6.
    [4]陈刚,减飞虎实用人脸识别系统的本征脸法实现[D]2001年5月230():45-46.
    [
    5]杜平,徐大为,刘重庆,基F整体特征的人脸识别方法的研究[12003年6月49 (3) ;382-383.
    [6] Chow G, Li X. Towards A System for Automatic Facial Feature Detctio[U] 1993. 2903)2-3.
    [7]杨变若,王煎法,杨未来人脸全局特iE识别研究[Z]1997年11月3(5):; 871-875.
    [8]边肇棋,张学工阎平凡等模式识别D]北京:清华大学出版社2000 302)16-17.

    致 谢

      从毕业设计的选题到论文的指导到最后定稿,期间遇到了无数的困难和阻碍,也曾想过对自己降低要求,也曾想过放弃最初想要坚持的设计,但是最后在孙老师和同学的鼓励和陪伴下,努力克服了所有的困难,独立完成了毕业设计和论文的书写。尤其是要感射我的论文指导老师孙老师,不厌其烦的对我的设计进行指导修改,耐心的帮助我改进设计帮助我搜集相关的资料,感谢孙老师如母亲--般的关怀,在孙老师身上不仅学习到了对学术严谨的态度,更被孙老师亲切无私的个人魅力所感染。
    
      还要感谢我的同学和其他所有的老师,他们严谨的学术态度,宽容待人严于律己的处世风范都使我受益良多。
    
    展开全文
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。 3 如何解决跨域? 能说1,2,7,8就行。 1、 通过jsonp跨域 2、CORS 3、 document.domain + iframe跨域 4、 location...

    前端面试汇总(2020年)

    大纲

    1、前言

    2、前端工程化

    3、前端设计模式

    4、前端安全性问题

    5、前端跨域问题

    6、前端数据加密

    7、前端http相关问题

    8、*前端基础知识点面试题

    9、前端技术栈问题

    前言

    由于新冠肺炎疫情,现在成天呆在家里,加上也要准备面试,就在家里看面试题,看着网上一堆面试题,决定收集常见题目汇总一下。关于面试大纲,我认为每个人都是千差万别的。因为面试官都是对简历所写的项目经验进行深挖或者对你所掌握的基本技能进行考察。

    前端工程化

    1

    什么是"前端工程化"?

    前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间,而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。

    2

    如何做"前端工程化"?

    前端工程化就是为了让前端开发能够“自成体系”,个人认为主要应该从模块化组件化规范化自动化四个方面思考。

    前端设计模式

    前端常见的设计模式主要有以下几种,具体设计模式查看这篇文章
    1. 单例模式
    2. 工厂模式
    3. 策略模式
    4. 代理模式
    5. 观察者模式
    6. 模块模式
    7. 构造函数模式
    8. 混合模式

    前端安全性问题

    这个是老的话题,有的在初中级前端面试中可能不会提到。但是在高级面试的时候,你要说出前端安全性问题防御,及前端常见安全性问题的攻击原理是什么。

    1

    xss跨站脚本攻击原理?如何进行?防御手段?

    如何进行:如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点,进而添加一些代码,嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

    主要原理:过于信任客户端提交的数据!

    防御手段:不信任任何客户端提交的数据,只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

    2

    CSRF跨站请求伪造原理?如何进行?防御手段?

    如何进行:当你在某网页登录之后,在没有关闭网页的情况下,收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

    点击链接,会利用浏览器的cookie把密码改掉。

    主要原理:在没有关闭相关网页的情况下,点击其他人发来的CSRF链接,利用客户端的cookie直接向服务器发送请求。

    防御手段:

    检测Referer

    Anti-CSRF token机制

    业务上要求用户输入原始密码(简单粗暴),攻击者在不知道原始密码的情况下,无论如何都无法进行CSRF攻击。

    3

    Sql脚本注入原理?如何进行?防御手段?  

    如何进行:利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。

    主要原理:通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令

    防御手段:

    使用预编译,绑定变量(推荐)。

    检查数据类型。

    过滤特殊字符和语句。

    页面不错误回显。

    4

    web上传漏洞原理?如何进行?防御手段?  

    如何进行:用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力。

    主要原理:当文件上传时没有对文件的格式和上传用户做验证,导致任意用户可以上传任意文件,那么这就是一个上传漏洞。

    防御手段:

    1. 最有效的,将文件上传目录直接设置为不可执行,对于Linux而言,撤销其目录的'x'权限;实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理,一是方便使用缓存加速降低能耗,二是杜绝了脚本执行的可能性;
    2. 文件类型检查:强烈推荐白名单方式,结合MIME Type、后缀检查等方式;此外对于图片的处理可以使用压缩函数或resize函数,处理图片的同时破坏其包含的HTML代码;
    3. 使用随机数改写文件名和文件路径,使得用户不能轻易访问自己上传的文件;
    4. 单独设置文件服务器的域名;

    前端跨越问题

    1

    什么是跨域?  

    由浏览器同源策略限制的一类请求场景,当不同地址,不同端口,不同级别,不同协议就会构成跨域。

    2

    什么是同源策略?  

    所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。

    3

    如何解决跨域? 能说1,2,7,8就行。

    1、 通过jsonp跨域

    2、CORS

    3、 document.domain + iframe跨域

    4、 location.hash + iframe

    5、 window.name + iframe跨域

    6、 postMessage跨域

    7、 nginx代理跨域

    8、 nodejs中间件代理跨域

    9、 WebSocket协议跨域

    前端数据加密问题

    1

    一般如何处理用户敏感信息?  

    前端一般使用md5、base64加密、sha1加密,想要了解详情请自行百度。

    前端http相关问题

    1

    HTTP常用状态码及其含义?  

    1xx:指示信息--表示请求已接收,继续处理

    100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新)

    101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新)

    2xx:成功--表示请求已被成功接收、理解、接受

    200 OK 一切正常,对GET和POST请求的应答文档跟在后面。

    201 Created 服务器已经创建了文档,Location头给出了它的URL。

    202 Accepted 已经接受请求,但处理尚未完成。

    203 Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝(HTTP 1.1新)。

    204 No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。

    205 Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容(HTTP 1.1新)。

    206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它(HTTP 1.1新)。

    3xx:重定向--要完成请求必须进行更进一步的操作

    300 Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。

    301 Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。

    302 Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求http://host/~user(缺少了后面的斜杠),有的服务器返回301,有的则返回302。严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

    303 See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取(HTTP 1.1新)。

    304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。

    305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取(HTTP 1.1新)。

    307 Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时 才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。(HTTP 1.1新)

    4xx:客户端错误--请求有语法错误或请求无法实现

    400 Bad Request 请求出现语法错误。

    401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。

    403 Forbidden 资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

    404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。

    405 Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用。(HTTP 1.1新)

    406 Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容(HTTP 1.1新)。

    407 Proxy Authentication Required 类似于401,表示客户必须先经过代理服务器的授权。(HTTP 1.1新)

    408 Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。(HTTP 1.1新)

    409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。(HTTP 1.1新)

    410 Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。(HTTP 1.1新)

    411 Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。(HTTP 1.1新)

    412 Precondition Failed 请求头中指定的一些前提条件失败(HTTP 1.1新)。

    413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头(HTTP 1.1新)。

    414 Request URI Too Long URI太长(HTTP 1.1新)。

    416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。(HTTP 1.1新)

    5xx:服务器端错误--服务器未能实现合法的请求

    500 Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。

    501 Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求。

    502 Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。

    503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。

    504 Gateway Timeout 由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新)505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。(HTTP 1.1新)

    2

    websocket和轮询及长轮询区别  

    轮询如下:

    客户端:啦啦啦,有没有新信息(Request)服务端:没有(Response)客户端:啦啦啦,有没有新信息(Request)服务端:没有。。(Response)客户端:啦啦啦,有没有新信息(Request)服务端:你好烦啊,没有啊。。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:好啦好啦,有啦给你。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:。。。。。没。。。。没。。。没有(Response) ---- loop

    长轮询如下:

    客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request)服务端:额。。 等待到有消息的时候。。来 给你(Response)客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) -loop

    websocket如下:

    websocket解决了HTTP的这几个难题。 首先,被动性,当服务器完成协议升级后(HTTP->Websocket),服务端就可以主动推送信息给客户端啦。

    所以上面的情景可以做如下修改。

    客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request)服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)客户端:麻烦你有信息的时候推送给我噢。。服务端:ok,有的时候会告诉你的。服务端:balabalabalabala服务端:balabalabalabala服务端:哈哈哈哈哈啊哈哈哈哈服务端:笑死我了哈哈哈哈哈哈哈

    3

    Http和Https的区别?  

    1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

    2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

    3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

    4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

    *前端基础知识点面试题

    1

    HTML/5、CSS/3相关  

    一、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

      新特性:

      HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
      拖拽释放(Drag and drop) API
      语义化更好的内容标签(header,nav,footer,aside,article,section)
      音频、视频API(audio,video)
      画布(Canvas) API
      地理(Geolocation) API
      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
      sessionStorage 的数据在浏览器关闭后自动删除
      表单控件,calendar、date、time、email、url、search
      新的技术webworker, websocket, Geolocation

      移除元素:
      纯表现的元素:basefont,big,center,font, s,strike,tt,u;
      对可用性产生负面影响的元素:frame,frameset,noframes;
      h5新标签兼容:
      IE8/IE7/IE6支持通过document.createElement方法产生的标签,
      可以利用这一特性让这些浏览器支持HTML5新标签,
      当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
     
      如何区分:
      DOCTYPE声明\新增的结构元素\功能元素

    二、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

      CSS 选择符:

      1.id选择器( # myid)

       2.类选择器(.myclassname)

      3.标签选择器(div, h1, p)

      4.相邻选择器(h1 + p)

      5.子选择器(ul > li)

      6.后代选择器(li a)

      7.通配符选择器( * )

      8.属性选择器(a[rel = "external"])

      9.伪类选择器(a: hover, li:nth-child)

      可以继承的属性:

      可继承的样式: font-size font-family color, UL LI DL DD DT;

      不可继承的样式:border padding margin width height ;

      优先级:

      !important > id > class > tag

      important 比 内联优先级高,但内联比 id 要高

      CSS3新增伪类举例:

      p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

      p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

      p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

      p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

      p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

      :enabled :disabled 控制表单控件的禁用状态。

      :checked 单选框或复选框被选中。

    三、CSS3有哪些新特性?

    更详细的请见:https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

      CSS3实现圆角(border-radius),阴影(box-shadow),

      对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

      transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

      增加了更多的CSS选择器 多背景 rgba

      在CSS3中唯一引入的伪元素是::selection.

      媒体查询,多栏布局

      border-image

    四、解释盒模型宽高值得计算方式,边界塌陷,负值作用,box-sizing概念? 

      1. 盒模型:IE 678 下(不添加doctype) 使用ie盒模型,宽度 = 边框 + padding + 内容宽度; chrom、IE9+、(添加doctype) 使用标准盒模型, 宽度 = 内容宽度。 
      2. box-sizing : 为了解决标准黑子和IE盒子的不同,CSS3增添了盒模型属性box-sizing,content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型; 
      3. 边界塌陷:块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷。 
      4. 负值作用:负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。

    五、BFC(Block Formatting Context) 是什么?应用? 

      1. BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它规定了内部的Bloc-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 
      2. 应用场景: 
      1. 解决margin叠加的问题 
      2. 用于布局(overflow: hidden),BFC不会与浮动盒子叠加。 
      3. 用于清除浮动,计算BFC高度。

    六、如何实现浏览器内多个标签页之间的通信?

      调用localstorge、cookies等本地存储方式

    七、简要说一下CSS的元素分类

      块级元素:div,p,h1,form,ul,li;
      行内元素 : span,a,label,input,img,strong,em;

    八、解释下浮动和它的工作原理?清除浮动的方法

      浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

      1.使用空标签清除浮动。

      这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

      2.使用after伪对象清除浮动

     该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

        #parent:after{

      content:".";

      height:0;

      visibility:hidden;

      display:block;

      clear:both;

     }

      3.设置overflow为hidden或者auto

      4.浮动外部元素

    九、CSS隐藏元素的几种方法(至少说出三种)

      Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
      Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
      Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
      Position:不会影响布局,能让元素保持可以操作;
      Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

    十、如何让一个盒子水平垂直居中

    复制代码

    复制代码

    //已知宽高<div class="div1"></div><style>
        .div1{
            width:400px;
            height:400px;
            position:absolute;
            left:50%;
            top:50% 
            margin:-200px 0 0 -200px;    }   
    </style>//未知宽高<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
            .div1{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                border: 1px solid #000;
                width: 400px;
                height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>//未知宽高方法二:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
            .div1{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border: 1px solid #000;
                width: 400px;
                height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>

    2

    JS部分

    1、cookie、localStorage、sessionStorage的区别和使用?

    cookie:是存储在本地的数据,有时候也用cookies,通常经过加密,应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage:仅在客户端保存(即浏览器),不参与和服务器的通信;没有时间限制,即使浏览器关闭,数据依然存在;
       创建和访问localStorage:
            1)、设置数据:
            var forgetData = {phone:vm.phone};        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存储在localStorage里边的本地数据;JSON.Stringfy(forgetData)是将数据转化为字符串格式;
                获取数据:
            vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //将字符串转化为JSON化;
            2)、设置:localStorage.name = "zhao";
                 获取:localStorage.name    //zhao        localStorage.setItem(key,value);//设置数据        localStorage.getItem(key);//获取数据        localStorage.removeItem(key);//删除单个数据        localStorage.clear();//清除所有localStorage的数据
    
        sessionStorage:当用户的浏览器窗口关闭时,数据会被清除;
        
        共同点:都是保存在浏览器端,且同源的。
        区别:
            cookie数据始终在同源的http请求中携带9即使不需要),即cookie在浏览器和服务器之间来回传递;cookie数据还有路径的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据大小不能超过4K,同时因为每次http请求都会携带cookie,所以cookie只能保存很小的数据。
            sessionStorage和localStorage不会自动把数据发给服务器,只在本地保存,虽然也有大小限制,但是要比cookie大得多,可以达到5M或者更大。
            数据有效期不同,sessionStorage仅在当前浏览器窗口关闭前有效,不能持久保存;localStorage:始终有效,浏览器窗口关闭也一直保存;cookie:只在cookie设置的过期时间之前保存,即使浏览器窗口关闭。
            作用域不同,sessionStorage在不同浏览器窗口的数据不能共享,即使是同一个页面;localStorage在所有的同源窗口中都是共享的;cookie也是在同源窗口中共享的,

    2、如何实现浏览器多标签页之间的通信?

        调用localStorage、cookie本地存储方式。

    3、JavaScript的typeof返回类型有哪些?

    Object(null和Array)、number、undefined、string、Boolean、function

    4、类型转换

    强制转换:parseInt();parseFloat();number();

    5、数组的方法

    var list = [1,2,3];list.pop();//删除数组的最后一个元素 var list = [1,2];list.unshift(0,1);//头部添加  var list = [0,1,1,2,3];list.push(4,5);//尾部添加   var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把两个数组连接起来 //var arr = [1,2,3,4,5];  //var list = [1,2,3];list.join("-");    //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值来替换该位置的数。var arr = list.splice(0,1);//删除 var list = [2,3];  var arr = [1];可以删除任意数量的项,只需指定2个参数;要删除的第一项的位置和要删除的项数。例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);//插入,var list = [1,2,4,6,3]; 可以向指定位置插入任意数量的项,需要3个参数,起始位置、0(要删除的项数)、要插入的任意数量的项。例如splice(2,0,4,6);会从第二个位置插入4和6;list.splice(2,1,4,6);//替换,var list = [1,2,6,3]; 可以向指定位置插入任意数量的项,同时删除任意数量的项,需要3个参数,起始位置、要删除的项数、要插入的任意数量的项。例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();//按照第一个数字大小进行排序;function compare(a,b){
        return a-b;//正序;
        return b-a;//倒序;}list.sort(compare);

    6、ajax请求时get和post的区别?

    get:从服务器上获取数据,传送数据量小,安全性低,请求会被缓存,缓存是针对URL进行缓存的,get请求参数直接加在URL地址后面,一种参数组合就会产生一种URL的缓存,重复的请求结果是相同的;post:向服务器发送数据;传送数据量大,请求不会被缓存,参数封装在二进制的数据体中,服务器也不会记录参数,相对安全,所以涉及用户隐私的数据都要用post传送;

    7、ajax请求时,如何解释json数据?

    使用eval方法解析的时候,eval();不会去判断该字符串是否合法,而且json对象里的js方法也会被执行,这是非常危险的;推荐使用JSON.parse(); JSON.parse();把字符串转化成json。

    8、call和apply的区别?

    共同点:
        都可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
        另一种说法,都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行。
    不同点:
        apply();//最多只能有两个参数--新this对象和一个数组argArray,如果给该方法传递多个参数,则把参数都写进这个数组里边,当然,即使只有一个参数,也要写进数组里边。
        call();//可以接收多个参数,第一个参数apply()一样,后面则是一串参数列表。
        实际上,apply和call的功能是一样的,只是传入的参数列表的形式不同。

    9、http常用状态码?

        100  Continue  继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息    200  OK   正常返回信息    201  Created  请求成功并且服务器创建了新的资源    202  Accepted  服务器已接受请求,但尚未处理    301  Moved Permanently  请求的网页已永久移动到新位置。    302 Found  临时性重定向。    303 See Other  临时性重定向,且总是使用 GET 请求新的 URI。    304  Not Modified  自从上次请求后,请求的网页未修改过。    400 Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。    401 Unauthorized  请求未授权。    403 Forbidden  禁止访问。    404 Not Found  找不到如何与 URI 相匹配的资源。    500 Internal Server Error  最常见的服务器端错误。    503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

    10.你有哪些性能优化的方法?

        (详情请看雅虎14条性能优化原则)。
    
          (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
    
          (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
    
          (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
    
          (4) 当需要设置的样式很多时设置className而不是直接操作style。
    
          (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
    
          (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
    
          (7) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

    11.深拷贝和浅拷贝

        基本类型指的是简单的数据段,引用类型指的是多个值构成的对象;    var name = "John"; // 基本类型值
    
        var obj = new Object(); 
        obj.name = "John"; 
        // obj 为引用类型值
        
        在复制变量中,对于基本类型来说,两者互不影响,    var num = 1;    var num1 = num; // num1 = 1;
    
        var num1 = 3; // num还是1,不会变
        
        浅拷贝和深拷贝的区别:
        对于浅拷贝来说,对于一个数组(数组是一个对象),只要我们修改了一个拷贝数组,原数组也会跟着改变。
        因为他们引用的是同一个地址的数据,拷贝的时候并没有给b数组创造独立的内存,只是把a数组指向数据的指针拷贝给了b;
        而深拷贝就与其相反,将会给b数组创造独立的内存,并且将a数组的内容一一拷贝进来,两者互不影响。
        
        实现深拷贝:
        一:层级拷贝,用递归实现;
        二:JSON解析        var b = JSON.parse(JSON.stringify(a));        

    3

    其他  

    一、怎么让Chrome支持小于12px 的文字?

    这个我们在做移动端的时候,设计师图片上的文字假如是10px,我们实现在网页上之后。往往设计师回来找我们,这个字体能小一些吗?我设计的是10px?为啥是12px?其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,在浏览器中只会显示12px,那么如何解决这个坑爹的问题呢?

    我们的做法是:

    针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放!

    <style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms博客测试10px</span></p>

    二、IOS手机浏览器字体齿轮

    修改-webkit-font-smoothing属性,结果是:-webkit-font-smoothing:none:无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑

    三、如何修改chrome记住密码后自动填充表单的黄色背景?

    大体可以通过input : -webkit-autofill来进行修改!

    input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}

    四、谷歌浏览器运行下面代码,并解释!

    [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

    运行上面代码之后,会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢?

    首先我们来看

    [].forEach.call(),关于call()和apply(),我前面有文章也写过,具体可以看http://www.haorooms.com/post/js_constructor_pro

    [].forEach.call()等价于Array.prototype.forEach.call()

    其次我们来看$$("*")

    你可以在你的Chrome浏览器控制台中输入$$('a'),然后你就能得到一个当前页面中所有锚元素的列表。

    $$函数是许多现代浏览器命令行API中的一个部分,它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数,然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方,你可以使用document.querySelectorAll('')来代替$$('')

    为元素添加颜色

    为了让元素都有一个漂亮的边框,我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外,因此它并不影响元素的属性或者元素在布局中的位置,这对于我们来说非常有用。这个属性和修改border属性非常类似,因此下面的代码应该不会很难理解:

    a.style.outline="1px solid #"+ color

    真正有趣的地方在于定义颜色部分:

    (~~(Math.random()*(1<<24))).toString(16)

    ~~的作用相当于parseInt,和我前面讲解的“|”功能类似,关于运算符“I” ,可以去看看!

    通过上面代码可以获取到一个随机的颜色值!

    五、input [type=search] 搜索框右侧小图标如何美化?

    美化效果如下图:

    enter image description here

    右侧默认的比较难看的按钮,美化成右侧效果。

    input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}

    用到的是伪元素::-webkit-search-cancel-button,关于什么是伪类和为元素,请看:http://www.haorooms.com/post/css_wl_wys

    六、iOS safari 如何阻止“橡皮筋效果”?

    可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

    但是,我们遇到的问题不是这样,我是要解决弹跳导致弹出层(position:absolute)的覆盖层高度小于100%;

    针对这个问题,我想到的解决方案如下:

    方法一: 把position:absolute改成position:fixed,并在弹出层之后,设置body的高度是100%;overflow是hidden。

    方法二:

    思路是获取苹果浏览器导航栏的高度。然后滚动的时候,重新获取其高度。在导航栏高度变小的时候,给弹出层增加高度的百分比!

    代码如下:

    //ios safari 伸缩判断var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
            $(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
                        globleflag=false//此处写处理逻辑}else{
                     globleflag=true//此处写处理逻辑}}});

    七、实现点击文字,文字后面radio选中效果

    这个效果是前端很经常用到和遇到的效果了,实现这个效果的方式也很多,很多朋友用js和jquery来实现,但是最简单的,我们可以直接用lable标签的 for 属性来实现。

    看下下面例子:

    <form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>

    label 的for属性后面跟着input的id,就可以点击label,来触发input效果了,大家可以试一试!

    八、网站中,图片文件(jpg,png,gif),如何点击下载?而非点击预览?

    我们平时在网站中的图片,假如我们要下载,如下写:

    <ahref="haorooms博客.jpg">下载</a>

    我们点击下载按钮,只会预览“haorooms博客.jpg”这张图片,并不会出现下载框,另存为那种?那么我们如何做呢?

    我们只需要如下写

    <ahref="haorooms博客.jpg"download>下载</a>

    就可以下载了。点击如下进行尝试吧!下载

    不但如次,我们还可以指定文件名称,如下写法:

    <ahref="haorooms博客.jpg"download="haoroom前端博客图片下载">下载</a>

    测试如下:下载

    上面就是指定下载的写法!

    九、Math.min()比Math.max()大

    Math.min()<Math.max()// falseMath.min()>Math.max()// true

    因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

    前端技术栈问题

    1

    vue相关问题?  

    更多前端技能请关注公众号”极致简文“

    往期精彩回顾

    React组件与生命周期

    React函数组件和Class组件以及Hooks

    2020年最火爆的Vue.js面试题

    Redux使用之我要买个女朋友(入门篇)

    关注公众号,精彩不间断

    展开全文
  •  结尾处加空div标签 clear:both 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取高度 优点:简单、代码少、浏览器支持好、不容易出现怪问题 缺点:不少初学者不理解原理;...
  • 测试开发需要学习的知识结构

    万次阅读 多人点赞 2018-04-12 10:40:58
    Beizer 指出了适合使用判定表设计测试用例的条件: ①规格说明以判定表形式给出,或很容易转换成判定表. ②条件的排列顺序不会也不影响执行哪些操作. ③规则的排列顺序不会也不影响执行哪些操作. ④每当某一规则的...
  • 让人很容易误解的TCP拥塞控制算法

    万次阅读 多人点赞 2017-02-18 07:59:09
    比较肤浅的认知角度,一般很容易将“好”和“快”紧密联系在一起,但事实上,站在更高的层次,你看到的将不再是一个独立的进程,而是一整机器里面所有的进程!CFS到底好在哪里?  从其名字上就可以看出,其好处在于...
  • 话不多说 先来带大家分析一下这个赛题 赛题出来的时候,估计会有很多人来选这道题还有F题(测纸,具体原因参考18年省赛题),因为这道题看似很容易,毕竟题目第一个基础是发射炮弹哈哈哈哈, 那么其实这个赛题出来的...
  • 影响力在职场的重要性

    千次阅读 2018-06-10 22:02:32
    运用一些别人所乐于接受的方式,改变他人的思想和行动,具体有个性、思想,以及行动。 这些方式包括:举例引证、造成恐惧、赞美肯定、权势财富等。   影响力的6大武器 互惠 承诺一致 社会认同 喜好 权威 ...
  • 如何快速成为Python工程师?

    千次阅读 2018-11-08 15:40:19
    Python是一门简单的编程语言,学习相对更加轻松容易,初学者很容易入门,但想要学好,成为一名优秀的Python工程师就不是那么容易的事情了,需要受到很多因素的影响,以下是成为一名优秀的Python工程师需要满足的条件...
  • 沉默王二的黄金时代

    千次阅读 多人点赞 2015-11-19 18:37:06
    我写这篇文章的缘由是什么,其实也和上面这些废话有关系,这就好比,你xxoo的时候要有前戏(这™有点太直接),或者说你屙屎之前可能要先放点五谷杂粮之气外面(这话听起来怎么像在骂我自己)。
  • 影响力--经典语句摘录

    千次阅读 2018-05-22 21:06:10
    我认为在要别人帮忙的时候, 要是能给一个理由, 成功的概率就会更大。 “价格贵=东西好”原则的后一种做法(吸引淘便宜货的买家)。例子: 20世纪30年代, 有两个兄弟在西德和哈里开了一家男装裁缝店, 每当西德有...
  • Python是一门简单的编程语言,学习相对更加轻松容易,初学者很容易入门,但想要学好,成为一名优秀的Python工程师就不是那么容易的事情了,需要受到很多因素的影响,以下是成为一名优秀的Python工程师需要满足的条件...
  • 软件工程期末复习总结

    万次阅读 多人点赞 2016-07-03 15:22:39
    )增量模型的灵活性可以使其适应这种变化的能力大大优于瀑布模型和快速原型模型,但也很容易退化为边做边改模型,从而是软件过程的控制失去整体性。 增量模型的使用范围: ( 1 )进行已有产品升级或新版本开发,...
  • 当妈妈后,经常有机会和别人探讨孩子的教育问题。我和好些爸爸妈妈达成的共识是,孩子第一重要的品质是善良。这么多年来,自己做人也走了不少弯路,一个比较深刻的认识是:聪明容易,善良不易。处处可见精明能干、视...
  • 内向的性格对我人生的影响

    千次阅读 2019-03-07 15:20:48
    家庭环境影响,我一直是一个内向不爱说话的人,有时可羡慕人家会表达,会说话。 上初三的时候,因为初二是数学课代表,经常去数学老师办公室,慢慢地初三的班主就在那时认识了我,等升初三的时候, 我 自然而然...
  • 影响力》读书笔记

    千次阅读 多人点赞 2019-06-23 13:46:05
    毕业之后少看书,每年能看3本已经不错了。偶然的机会,我在我们公司图书借阅系统看到了这本书,就借来看了。看这本书之前,我以为这是一本想要成为一个优秀的人要具有哪些品格的书籍。但是后来看的时候却发现了...
  • 努力工作时容易掉进的几个陷阱

    千次阅读 多人点赞 2019-01-03 09:48:42
     这里汇报的具体内容包括:工作的进展、遇到的问题、影响进度的突发事件、工作成果等。  这里有两点需要注意的误区: 不主动汇报。 如果上级/领导来问你工作进度的时候,即使你回答的再”完美“,也不会拿100...
  • 第十五届智能车规则浅谈

    千次阅读 2020-03-09 11:21:20
    第十五届智能车疫情影响,终于在千呼万唤中姗姗来迟。细读规则,便会发现今年的智能车和往年有所不同。 今年的组别设置有竞速组4组:基础四轮组、直立电磁组、双车接力组、声音信标组;创意1组:AI电磁组。 此外...
  • 产品读书《影响力》

    千次阅读 2019-05-15 17:45:33
    作者简介 罗伯特•B•西奥迪尼是(Robert B. Cialdini)是全球知名...我选择阅读这本书的理由荒唐,前两天刚刚被无良商家的甜言蜜语“骗”走口袋里的500元,上网搜了一下“我们是如何被说服买东西的”,出来一篇...
  • 其作品一经问世便受到广大读者的喜爱和追捧。并被翻译成几十种文字,创造“人类出版史的奇迹”。时至今日,卡耐基的著作仍在持续畅销中。 排行榜Number 4、《会说话的人,人生都不会太差》   梁实秋...
  • <!--google_ad_client = "pub-0241434510974184";/* 博客文章广告728x90, */google_ad_slot = "7316585398";google_ad_width = 728;...// --> 1、男人很容易喜欢一个女人,却不轻易深爱一个女人。2、男人在
  • 程序员如何提高影响力2.0

    千次阅读 2016-01-12 20:37:53
    尽管之前已经有一篇非常不错的关于《如何提高影响力》的文章,但是那篇文章缺少一些理论的支持。不知道你发现了没有你在Github上的代码并不比别人差,但是无论你怎么努力你都换取不了同样的关注。当别人开始使用微信...
  • 授权转载自将门创投(ID:thejiangmen)人工智能和自动化的...技术的蓬勃发展让我们生活的世界充满了无限的可能和希望,从自动驾驶汽车医学影像AI,从用户推荐系统个性化定制服务,这一切的技术在促进生产力的同
  • 算法越学越扎心,有没啥破解之法?

    万次阅读 多人点赞 2020-03-10 00:36:58
    对于算法的学习,我也是从一个小白一步步走来,当然,现在仍然菜,,,不过,鉴于我觉得还有一些人比我更菜了,我决定谈谈我算法学习过程走过的坑,以及自己总结的一些经验。 切勿盲目刷题:刷题前的知识积累 说...
  • 牛逼!Java 从入门精通,超全汇总版

    万次阅读 多人点赞 2021-05-06 19:40:33
    Java 基础语法(Java标识符、Java 修饰符、Java 变量、关键字、Java 注释) 关于 Java 变量,可以参考这篇文章 Java 中的变量有很多,很容易让初学者不知所措,这里我写了一篇 Java 变量解惑的相关文章 Java 中到底...
  • 一篇很受触动的文章-关于成功因素

    千次阅读 多人点赞 2013-06-12 00:41:15
    引导语:一个人生活的环境,对他树立理想和取得成就有着重要的影响。坚忍,是成大事者的共同特征。没有足够的知识储备,一个人难以在工作和事业中取得突破性进展,难以向更高地位发展。      【意志力】    ...
  • 本文来自作者 吴海林 在 GitChat 上分享 「弱矩阵组织下,项目经理如何最大程度影响项目」,「阅读原文」查看交流实录。...项目管理的组织结构多,为什么我们今天着重探讨弱矩阵组织下的项目管理?在弱矩
  • 虽然自然生物技术(15年引影响因43)高于自然(38分)5分多,但多文章仍是自然拒稿转投的产物。自然主刊的认可度和传播影响是其它杂志无法比拟的。 自然通讯( Nature Communication )。开创性研究成果,主要承接自然...
  • 视频: 凯利-麦格尼格尔谈自控力 有趣的总结 PPT分享 本书简介 《自控力》是一本帮助我们提升自控力的书籍,在本书的每一章节都会提出一个与自控力相关的问题,并进行深度剖析,找出...比如,你什么时候最容易屈...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 143,788
精华内容 57,515
关键字:

很容易受到别人影响