【转载华为云社区】听完了课，会了；动手做，又不会。前端开发如何能够真正上路走一程？下面是我的一些感悟和建议1.需求引导2.用趁手的工具3.学以致用4.量力而行1.需求引导恩格斯说，社会一旦有技术上的需要，则这种需要会比十所大学更能把科学推向前进。我说，一旦有了实际的需求，则这种需求会比你多上十节课更能把你的前端开发能力推向前进。有了需求，就有了项目，只有在项目中，才能培养人、锻炼人的开发能力没有需求怎么办？有条件要上，没有条件创造条件也要上。有需求要上，没有需求创造需求也要上。在你的生活中、工作中，带着一双发现的眼睛，去发掘需求。还是一时半会找不到需求？没关系，那就好好利用目前课程中的习题和考核题。比如，做一个轮播图，是不是一个需求？对你是一个挑战吗？你会好好珍惜这个需求吗？2.用趁手的工具老师曾经教我们说，开始学习开发时，要用文本编辑器，一个单词一个单词的敲。这是让我们做到脚踏实地，打好基础。在开始阶段不要好高骛远。在这个基础阶段之后，我们需要用好趁手的工具。磨刀不误砍柴工，是一个很朴素的道理。因为当你的编码工具用的有如行云流水、势如破竹时，绝对有助于你的创造力的发挥但当你编码磕磕绊绊、婆婆妈妈的时候，你会渐渐开始不耐烦，甚至有些泄气工具有很多，Visual Studio Code是其中很不错的一款查看一下他的keyboard shortcuts，看看哪些是自己在日常场景中经常使用的用起来，练习到熟练运用的阶段，会感觉事半功倍，心情舒畅3.学以致用技术不是学会的，是用会的孔子曰 学而不思则罔，思而不学则殆我说 学而不用则忘 用而不学则跟不上时代的步伐HTML里我们学过各种标签，以一个轮播图来说，哪些HTML标签可以用来搭个基本的结构？有了基础结构，如何与CSS结合起来实现结构的布局定位如何实行预期的展示效果HTML和CSS的结合，要达到预期的效果，是一个不断体会CSS属性含义的过程是一个不断用心调整的过程这个过程会比较繁琐、会耗费不少耐心但也只有经过这样一个痛苦的过程，才有可能进步JS作为编程语言，这里不多说了它不仅仅是让网页动起来，它可以成为操作HTML和CSS的上帝之手4.量力而行当你的目标，大大超出了你目前的能力而你又不愿意调整，结果会是心力交瘁、疲于奔命、苟延残喘当这样的情况发生时，降低自己的目标先从相对简单的小目标做起，做好，做熟给自己信心坚持你会前进，你会有更大的成就

摘要：本文将分享一些前端性能优化的常用手段，包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制，以及代码方面的性能优化等方面。base64：尤其是在移动端，小图标可以base64（webpack），大图片慎用（如果加载速度过于慢的，而且很重要的图片，可以用base64）1、减少HTTP的请求次数和传输报文的大小CSS Sprite（雪碧图、图片精灵）技术使用字体图标（Icon Font）或者SVG等矢量图+减少HTTP请求次数或者减少请求内容的大小+渲染更快：因为它们是基于代码渲染的，而对于位图（png/jpg/gif）是需要先把图片编码在渲染+不容易是帧变形+也可以使用webp格式图片，这种格式要小一些（但是需要服务器端支持这种格式的请求处理）图片懒加载（延迟加载）技术+第一次加载页面的时候不去请求真实的图片，提高第一次渲染页面的速度，请求图片的额外消耗尽可能不要处理+当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载（节约流浪，也能减少对服务器的请求压力）+ 对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）音视频文件取消预加载（preload='none'），这样可以增加第一次渲染页面的速度，当需要播放的时候在加载客户端和服务器端的数据传输尽可能基于JSON格式完成，XML格式比JSON格式要大一些（还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多）把页面的css/js等文件进行合并压缩合并：争取css和js都只导入一个（webpack可以实现并合并压缩哦）压缩：基于webpack可以压缩，对于图片自己找工具先压缩，可以使用服务器的GZIP压缩图片BASE64（用BASE64码代表图片，减少HTTP，增加浏览器渲染速度，所以真是项目中，尤其是移动端，如果图片加载缓慢，BASE64一下就好了，；但是base64会导致文件中心的代码超级恶心，不利于维护和开发，所以减少使用）；webpack中科院配置图片2、设置各种缓存、预处理和长连接机制不经常更改的静态资源做缓存处理（一般做的是304或者ETAG等协商缓存）建立Cache-Control 和Expires HTTP的强缓存DNS缓存或者预处理（DNS Prefetch），减少DNS的查找设置本地的离线存储（manifest）或者把一些不经常更改的数据做本地临时存储（webstorage，indexdb）等有钱就做CDN（地域分布式服务器），或者加服务器建立Connection：keep-alive Tcp长连接使用HTTP2版本协议（现在用的一般都是http1.1），可以多条tcp通道共存=>管道化链接一个项目分为不同的域（不同的服务器），例如：资源web服务器、数据服务器，图片服务器，视频服务器等，合理利用服务器资源，但是导致过多的DNS解析Cache-Control的优先级高于Expires基于本地存储，做数据的存储3、代码方面的性能优化减少对闭包的使用（因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出“栈溢出”），减少闭包的嵌套（减少作用域链的查找层级）对于动画来说：能用css解决的不用js（能够用transform处理的，不用传统的css样式，因为transform开启硬件加速，不会引发回流，或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置造成影响），能用 requestAnimationFrame解决的不用定时器+用requestAnimationFrame还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，知道回复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理避免使用iframe（因为iframe会嵌入其他页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染进度会变慢）减少直接对DOM的操作（原因是减少DOM的回流和重绘...），当代项目基本基于mvvm，mvc数据驱动视图渲染的，对DOM的操作框架本身完成，性能要好很多低耦合高内聚（基于封装的方式：方法封装，插件，组件，框架，类库等封装，减少页面中的冗余代码，提高代码使用率）尽可能使用事件委托避免出现死循环或者嵌套循环（嵌套循环会成倍增加循环的次数）项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞（异步操作基于Promise设计模式来管理）JS中不要使用with避免使用css表达式函数的防抖和节流减少使用eval（主要原因是防止压缩代码的时候，由于符号书写不合规，导致代码混乱）图片地图：对于多次调取使用的图片（尤其是背景图），尽可能把它提取成为公共的样式，而不是每一次重新设置background减少filter滤镜的使用尽可能减少选择器的层级尽可能减少table布局手动回收堆栈内存（赋值为null）栈溢出：死递归function func(){     func(); } func();解决方案：function func(){     setTimeout(func,0); } func();相互引用：引用类型之间的相互调用，形成嵌套式内存let obj1={     name:'obj1', }; let obj2={     name:'obj2',     x:obj1 } obj1.x=obj2;

在Web应用中，HTTP请求是无状态的。即：用户第一次发起请求，与服务器建立连接并登录成功后，为了避免每次打开一个页面都需要登录一下，就出现了cookie，Session。CookieCookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。Cookie存储的数据量有限，且都是保存在客户端浏览器中。不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用Cookie实际上只能存储一小段的文本信息。例如：登录网站，今输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是Cookie。SessionSession是另一种记录客户状态的机制，它是在服务端保存的一个数据结构（主要存储的的SessionID和Session内容，同时也包含了很多自定义的内容如：用户基础信息、权限信息、用户机构信息、固定变量等），这个数据可以保存在集群、数据库、文件中，用于跟踪用户的状态。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。用户第一次登录后，浏览器会将用户信息发送给服务器，服务器会为该用户创建一个SessionId，并在响应内容（Cookie）中将该SessionId一并返回给浏览器，浏览器将这些数据保存在本地。当用户再次发送请求时，浏览器会自动的把上次请求存储的Cookie数据自动的携带给服务器。服务器接收到请求信息后，会通过浏览器请求的数据中的SessionId判断当前是哪个用户，然后根据SessionId在Session库中获取用户的Session数据返回给浏览器。例如：购物车，添加了商品之后客户端处可以知道添加了哪些商品，而服务器端如何判别呢，所以也需要存储一些信息就用到了Session。如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。TokenHTTP请求都是以无状态的形式对接。即HTTP服务器不知道本次请求和上一次请求是否有关联。所以就有了Session的引入，即服务端和客户端都保存一段文本，客户端每次发起请求都带着，这样服务器就知道客户端是否发起过请求。这样，就导致客户端频繁向服务端发出请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否。而Session的存储是需要空间的，频繁的查询数据库给服务器造成很大的压力。在这种情况下，Token应用而生。Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌。当客户端第一次访问服务端，服务端会根据传过来的唯一标识userId，运用一些算法，并加上密钥，生成一个Token，然后通过BASE64编码一下之后将这个Token返回给客户端，客户端将Token保存起来（可以通过数据库或文件形式保存本地）。下次请求时，客户端只需要带上Token，服务器收到请求后，会用相同的算法和密钥去验证Token。最简单的Token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由Token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接Token请求服务器)。使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：客户端使用用户名跟密码请求登录服务端收到请求，去验证用户名与密码验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者数据库里客户端每次向服务端请求资源的时候需要带着服务端签发的 Token服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据APP登录的时候发送加密的用户名和密码到服务器，服务器验证用户名和密码，如果成功，以某种方式比如随机生成32位的字符串作为Token，存储到服务器中，并返回Token到APP，以后APP请求时，凡是需要验证的地方都要带上该Token，然后服务器端验证Token，成功返回所需要的结果，失败返回错误信息，让他重新登录。对于同一个APP同一个手机当前只有一个Token；手机APP会存储一个当前有效的Token。其中服务器上Token设置一个有效期，每次APP请求的时候都验证Token和有效期。下面这个例子，可以很好的理解：『给我来份煎饼（token我是你对面摊卖烤冷面的，scope赊账）』『好』『鸡蛋（token我是你对面摊卖烤冷面的，scope赊账）』『好』『再加个鸡蛋（token我是你对面摊卖烤冷面的，scope赊账）』『好』最终得到一份普通煎饼，外加两个鸡蛋……如果服务器重启或者因为其他理由，服务器端已保存token丢失。那么用户需 要重新登录和认证。『给我来份煎饼（token我是你对面摊卖烤冷面的）』『那个……我没见过你』

【WEB前端全栈成长计划】第二阶段•最终考核打卡帖又是收获知识的一个月时间，WEB前端全栈成长计划第二阶段课程内容已经全部更新完毕。感谢大家积极的学习态度，遇到问题及时在群内提出，使得你们和华为可以共同进步！再次感谢大家：◎积极完成每章的随堂测验打卡，做到了课后的知识强化与巩固；◎认真完成每周读书笔记打卡，将自己的学习心得总结下来；◎高效完成阶段任务技术文章打卡，分享自己学习前端的经验。现在，大家迎来了第二阶段考核，让我们来看一下考核的具体内容▶考核打卡时间：2020.08.07-2020.08.16 23:59 ▶考核评分时间：08.16-08.28（考核内容众多，老师正在抓紧时间评分中~）▶考核途径：点击下方链接，选择【第二阶段考核作业】https://classroom.devcloud.huaweicloud.com/classdetail/8c41ce15bb824341aa6ef29e104f38dd/job▶考核要求：进入考核页面后，点击“查看习题描述”，详细阅读考核要求和评判标准后再进入考核，提交机会有2次，请大家认真作答。▶打卡要求：1.20000字符内：在本帖下方，回复考核答题页面截图1张+提交程序运行后的截图1张（如需上传多张截图，请一张张上传到同一楼层/回复帖中，多次回复占楼视为无效）2.20000字符外：在本帖下方，回复运行后截图2张，将本地编辑源代码和运行结果图片以压缩包的形式上传到回复帖中注意：本次考试标准代码是可以在20000字符内完成的，建议大家使用后台提交之后截图上传▶打卡方式：方式1：***正确的回复格式：华为云ID+姓名（显示在考核证书上面名字）+考核答题截图（2张）例：华为云ID：grandmaster  姓名：云上花木兰截图均放在一个楼层中，多次占楼无效哈~方式2：***正确的回复格式：华为云ID+姓名（显示在考核证书上面名字）+运行截图（2张）+以自己名字命名的源代码压缩包华为云ID：grandmaster  姓名：云上花木兰云上花木兰压缩包重要提示：请严格按照回复示例进行回复，本次为阶段末考核项目，如果没有按照要求的格式进行回复，版主将不予提示，同时不计入考核结果，会影响考核证书及奖品的发放哦~▶考核评分：提交考核内容后由专家老师根据评分标准评分，满分100分，分数将于开始审核后15个工作日内公布，分数会公布在博客里面，具体请大家留意小助手信息。▶评分标准：1、完成一个轮播图功能，与classroom首页轮播图越接近得分越高，classroom首页其他部分不作要求，不影响评分；2、轮播图功能上越接近首页页面的轮播图的各项功能，得分越高；3、不能使用任何javascript框架和工具库，只能使用原生javascript语言完成；4、代码书写越规范，得分越高；5、轮播图的图片尽量使用classroom线上的图片。▶考核奖励：◎参与最后考核并回复本帖，就可得到电子版证书（证书上会根据大家的回复的真实姓名填写信息，请大家在留信息时注意）参与考核，人人有份，证书由1号小助手微信点对点发放，没添加小助手微信的朋友添加一下hwcloud01，证书将在第一阶段结束后15个工作日内发放，请大家耐心等待小助手的通知哦~◎考核分数≥60分并回复本帖，另外奖励华为云定制数据线一条（数量有限，先到先得，按回帖时间发放，占楼无效！），友情提示：20000字符以内合格几率更高哦~◎本阶段会有专家老师评审出1位“最佳代码”（提交代码分数最高）获奖者，还会额外得到华为云双肩包+2000码豆哦~        ◎参与考核即可获得20积分累计到总积分中，赢取最后积分大奖；大家别忘了随堂测验，读书笔记和技术文章回复打卡截止日期为8月16日23:59，抓紧时间打卡呀~最佳博文还可能得到HUAWEI GT智能手表哦~积分排行细则积分排行榜奖品▶积分奖品彩蛋：【WEB前端全栈成长计划】追加福利，快来围观~本次积分前100名的用户，可享受申请云享专家直通车的权益。本次云享专家直通车，是让各位优秀的开发者进行申请后直接通过初审，进行终审。本次申请成为云享专家，可以获得礼品+100代金券。专家资料介绍链接：https://bbs.huaweicloud.com/blogs/112362?from=singlemessage&isappinstalled=0云享专家申请链接：https://bbs.huaweicloud.com/community/certifiedinfo活动注意事项1.由于本帖回复内容为阶段考核测试内容，并涉及到个人隐私，已设置回帖仅版主可见，请大家放心回复2.请大家务必在考核规定时间8月16日 23:59内完成考核回帖打卡，否侧将影响证书和奖品的发放3.积分和考核奖品信息我们会在考核阶段结束后15个工作日内整理完毕，发放奖品4.第三阶段课程将于8月下旬开课，详细报名情况和课程安排请大家先了解课程大纲  https://developer.huaweicloud.com/resource/roadmap/website.html

在Web应用中，HTTP请求是无状态的。即：用户第一次发起请求，与服务器建立连接并登录成功后，为了避免每次打开一个页面都需要登录一下，就出现了cookie，Session。CookieCookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。Cookie存储的数据量有限，且都是保存在客户端浏览器中。不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用Cookie实际上只能存储一小段的文本信息。例如：登录网站，今输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是Cookie。SessionSession是另一种记录客户状态的机制，它是在服务端保存的一个数据结构（主要存储的的SessionID和Session内容，同时也包含了很多自定义的内容如：用户基础信息、权限信息、用户机构信息、固定变量等），这个数据可以保存在集群、数据库、文件中，用于跟踪用户的状态。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。用户第一次登录后，浏览器会将用户信息发送给服务器，服务器会为该用户创建一个SessionId，并在响应内容（Cookie）中将该SessionId一并返回给浏览器，浏览器将这些数据保存在本地。当用户再次发送请求时，浏览器会自动的把上次请求存储的Cookie数据自动的携带给服务器。服务器接收到请求信息后，会通过浏览器请求的数据中的SessionId判断当前是哪个用户，然后根据SessionId在Session库中获取用户的Session数据返回给浏览器。例如：购物车，添加了商品之后客户端处可以知道添加了哪些商品，而服务器端如何判别呢，所以也需要存储一些信息就用到了Session。如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。TokenHTTP请求都是以无状态的形式对接。即HTTP服务器不知道本次请求和上一次请求是否有关联。所以就有了Session的引入，即服务端和客户端都保存一段文本，客户端每次发起请求都带着，这样服务器就知道客户端是否发起过请求。这样，就导致客户端频繁向服务端发出请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否。而Session的存储是需要空间的，频繁的查询数据库给服务器造成很大的压力。在这种情况下，Token应用而生。Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌。当客户端第一次访问服务端，服务端会根据传过来的唯一标识userId，运用一些算法，并加上密钥，生成一个Token，然后通过BASE64编码一下之后将这个Token返回给客户端，客户端将Token保存起来（可以通过数据库或文件形式保存本地）。下次请求时，客户端只需要带上Token，服务器收到请求后，会用相同的算法和密钥去验证Token。最简单的Token组成:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，由Token的前几位+盐以哈希算法压缩成一定长的十六进制字符串，可以防止恶意第三方拼接Token请求服务器)。使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：客户端使用用户名跟密码请求登录服务端收到请求，去验证用户名与密码验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者数据库里客户端每次向服务端请求资源的时候需要带着服务端签发的 Token服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据APP登录的时候发送加密的用户名和密码到服务器，服务器验证用户名和密码，如果成功，以某种方式比如随机生成32位的字符串作为Token，存储到服务器中，并返回Token到APP，以后APP请求时，凡是需要验证的地方都要带上该Token，然后服务器端验证Token，成功返回所需要的结果，失败返回错误信息，让他重新登录。对于同一个APP同一个手机当前只有一个Token；手机APP会存储一个当前有效的Token。其中服务器上Token设置一个有效期，每次APP请求的时候都验证Token和有效期。下面这个例子，可以很好的理解：『给我来份煎饼（token我是你对面摊卖烤冷面的，scope赊账）』『好』『鸡蛋（token我是你对面摊卖烤冷面的，scope赊账）』『好』『再加个鸡蛋（token我是你对面摊卖烤冷面的，scope赊账）』『好』最终得到一份普通煎饼，外加两个鸡蛋……如果服务器重启或者因为其他理由，服务器端已保存token丢失。那么用户需 要重新登录和认证。『给我来份煎饼（token我是你对面摊卖烤冷面的）』『那个……我没见过你』

前端编程中的AJAX服务器　　什么是服务器：咱们的页面来源于服务器;实例(在phpnwo上面存放一个页面)，　　咱们把页面放在互联网的服务器上，就有了自己的网站了。　　1.异步同步　　生活中的同步：　　生活中的异步：　　在JavaScript语言中，同步和异步的概念刚好相反。　　这JavaScript中同步就是：你不执行完上面的代码，那么下面的代码你就别执行;一步一步执行，这就是同步。　　异步就是可以一块执行的代码;　　进程的概念　　进程≠程序　　程序从开始到结束的一次执行过程叫做进程　　一个进程当中，程序同时运行的多个分支，叫做线程　　多线程异步执行，可以提高程序的效率　　AJAX的重要性　　在许多数企业看来AJAX的使用熟练程度 === 你的工作经验。　　2.什么是AJAX　　ajax是前后端数据交互的重要手段　　Ajax 全称为：“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML)， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。　　一.Ajax 概述　　Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串 技术的集合，主要有：　　1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为　　2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求;　　3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据;　　4.其它 JavaScript，解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。　　由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：　　1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可);　　2.用户体验极佳(不刷新页面即可获取可更新的数据);　　3.提升 Web 程序的性能(在传递数据方面做到按需放松，不必整体提交);　　4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);　　而 Ajax 的不足由以下几点：　　1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);　　2.前进、后退的功能被破坏(因为 Ajax 永远在当前页，不会几率前后页面);　　3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);　　4.开发调试工具缺乏(相对于其他语言的工具集来说，JS 或 Ajax 调试开发少的可怜) 。　　3.AJAX的使用　　电话的接打顺序：　　1.首先要有一个电话;　　2.拨号;　　3.说话;　　4.听电话另一边的信息;　　//有一个电话：创建请求对象;　　1.var AJAX=new XMLHttpRequest( );　　//拨号：设置请求参数;　　2.AJAX.open('get','data/test.json',true);　　第一个参数：POST||GET　　POST和GET的区别　　POST是发送数据，GET是接受数据;　　PSOT发送数据的安全性较好，而GET较差;　　POST发送数据不限制大小，而GET大小受限2~100k。　　什么时候用GET和POST那：在数据获取时用GET方式，在操作数据时应使用POST方式。　　第三个参数：当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send()方法后不等待　　服务器的执行结果，而是继续执行脚本代码;　　当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send()方法后等待　　服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码!3. ajax.onreadystatechange = function()     {         if (ajax.readyState == 4 && ajax.status == 200)         {             func_succ(ajax.responseText);         }         else         {             //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);         }     };4.ajax.send(null);　　ajax.readyStatus　　0 - (未初始化)还没有调用send()方法　　1 - (载入)已调用send()方法，正在发送请求　　2 - (载入完成)send()方法执行完成，已经接收到全部响应内容　　3 - (交互)正在解析响应内容　　4 - (完成)响应内容解析完成，可以在客户端调用了

转载https://blog.csdn.net/English0523/article/details/106782786虽然目前并没有对全栈工程师有一个具体的定义，不知道自己是否合格。大势所趋的全栈开发。首先你能够配置全站开发的环境和工作流程，操作数据库，建立后端服务API，独立开发前端，从而开发一个包含前后端的完整应用，再进行测试和部署，直至产品正式上线。全栈开发是所有Web开发者的终极梦想，无论你现在是前端开发还是后端开发。并且随着大量开发者的涌入，前端和后端岗位都面临者激烈的竞争，全栈已经不是加分项，越来越成为必须项。终极指南全栈 Web 开发人员是能够工作在应用程序的前端和后端的开发人员。前端通常是指应用程序中用户将看到或交互的部分，后端是应用程序中处理逻辑、数据库交互、用户认证、服务器配置的部分。全栈开发并不意味着你已经掌握了前端和后端工作所需的一切，而是意味着你可以在双端工作并理解构建应用程序时发生的情况。在Web与软件开发的世界中有3个基本的关注点：前端、后端与全栈。我们先来看一下他们的含义。何为全栈工程师？前端工程师：在打开一个网站时，屏幕上的一切都属于前端。前端工程师负责创建用户界面背后的代码。这些工程师不仅要熟悉HTML、Java与CSS，还要掌握很多框架。这些框架有Foundation、Angular JS、Ember JS、Backbone及Bootstrap等等。前端工程师要与设计师和其他专家协同工作，从而将网站从模型转换为可使用的模式。后端工程师：在你每天所访问的网站背后有服务器网络、数据库以及各种应用，他们相互协作将你所请求的网页与数据传递给你。后端工程师负责构建这些组件。他们要擅长各种编程语言，如Python、.Net、Ruby、Java及PHP等等，从而通过这些语言来编写程序。他们还需要使用各种数据库程序如MySQL、SQL Server及Oracle等来操纵信息并将其传递给最终用户。后端工程师需要与组织中的各种经理及其他成员通力配合来完成工作。全栈工程师：全栈工程师既要了解后端开发，也要了解前端开发。他们是“全方位”的工程师，熟悉服务端的同时又懂客户端用户体验。全栈工程师理解Web开发进程的每一个方面，同时又会就整体策略与最佳实践对相关干系人提出建议与指导。角色演变在早期的桌面计算时代，我们常常会看到一个人就完成了整个应用的开发工作。随着程序变得越来越复杂，以及越来越多的技术涌现了出来，一个人很难再完全掌控应用开发的各个方面。在21世纪初期，一些拥有专业化技能的专家开始出现。由于复杂性的持续攀升，当Web 2.0站点开始出现时，很多程序员又回到了更简单的方式上来。相比于构建复杂的数据库和企业计算网络，开发者开始部署稳定的LAMP栈（Linux、Apache、MySQL与PHP），并创建出了灵活的面向对象语言，如Django与Ruby on Rails。在这种环境下，全栈工程师的价值变得越来越大，因为他们熟悉大多数现代框架与语言。运维复杂性的回归不过，由于移动计算与iOS和Android平台的兴起，我们又回到了复杂性的新时代：低成本的云服务器如Amazon Web Services和微软的Azure、MongoDB等数据库、Node.js与Angular.js等前端技术、Docker等容器技术。这些平台、服务与框架都拥有自身的特性。因此，一个人几乎无法成为能够掌握所有技术的全栈工程师。通才与专才在当前的环境下，成为全栈工程师的好处在于没多少人拥有足够的知识、经验与沟通能力来整体把控使用了各种平台与框架的项目，如HTML5、机器学习及Scala等。因此，高水准的全栈工程师总是供不应求的。不过，坏处则在于对于全栈工程师来说，他需要能够熟练掌握这些组件，但这是非常困难的事情，况且未来还会有新的技术涌现出来。你可能很聪明，但这些组件本身却是非常复杂的，每几个月都会出现新的语言和平台。要想时刻保持技术上的领先是一件极其困难的事情。出于这个原因，专才拥有自己独特的优势。组织倾向于雇佣专门的角色，因此相比于其他开发者来说，专才在深层次的知识以及某个狭窄领域的经验上会更胜一筹。全栈工程师的前景无论选择在前端还是后端进行深入学习，抑或是将自己定位成一个全栈的通才，从工作前景上来看都是好的。以北京为例，2017年北京全栈工程师的平均收入为20K，但是仍有75%的用户觉得此数据偏低。从简单的雏形到完美的成品，全栈工程师通常被认为是万能多面手，那全栈工程师到底做什么呢？全栈工程师需要哪些技能为了在激烈的市场竞争中占据一席之地，全栈工程师需要不断学习各方面技能，主要包含以下方面：服务器管理/DevOps程序员必须具备基本的服务器管理能力，包括并不限于以下知识：1.在非GUI环境中，通过终端连接远程服务器2.会写Shell脚本编程3.服务器上的用户和群组管理4.管理Apache和Nginx等服务器程序来提供应用5.管理防火墙和权限6.安装及更新软件除了这些基本功，程序员还需要懂得如何通过Docker或虚拟机来创建完善的、运行良好的独立开发环境;以及熟练操作版本控制系统，以便可靠地生成备份和可共享的协作代码库，来根据时间追踪代码变化。云端/Cloud除了物理服务器与虚拟服务器外，全栈工程师还需要了解云端，例如Google Cloud、Azure、AWS等。虽然很多工具或平台可能不会立即应用，但长远看来，熟悉每个人都在讨论的服务可能会派上大用途，客户可能随时要求更换服务端，所以需要早做准备。（未来可能出现Serverless无服务器端，直接租用计算和函数即可实现各种应用）后端/Back-end除了需懂得选择哪种语言，还应该熟悉：1.与运维紧密相关的Web服务器，如Nginx和Apache2.NodeJS会将Java，CSS编译为静态文件，用PHP可以避免NodeJS的问题3.依赖管理工具的使用，比如PHP中的Composer4.良好的API设计，当前大多数网站是基于API的，很少有独立的前端交互5.对性能提高非常重要的搜索引擎使用6.用Gearman类工具，Crunz等库进行Cronjobs及后台作业7.缓存技术非常重要，使用Varnish，Redis或其他工具分片存储数据后端语言比较后端语言是前端跨向全栈最大的一个障碍，也是必须拿下的障碍。不像前端Javascript独霸天下，后端语言是百家争鸣：PHP、Python、Ruby on rails、Node.js等脚本型语言，也有Java、C#（.net）等重量级语言，也有的Go、Erlang等。语言无所谓好坏，有各自的风格和适用范围。没有哪种语言绝对的好或者差，具体要看公司的业务和自己的偏好，最重要的在于你怎么运用它。正所谓弱水三千，只取一瓢饮，后端语言千千万，选择一门先学好，比那个都懂一点要强很多——贪多嚼不烂。数据库/Database除了需掌握架构稳定的关系型数据库，如MySQL ， PostgreSQL，一个全栈工程师还应该对非关系型数据库熟练应用，如MongoDB, Redis, Cassandra，更不用说Neo4j这样的图形数据库了。数据库是在服务器上的，需要全栈工程师的控制，同时也存在远程解决方案，比如Mongo类的RestDB或Google的Firebase等。前端/Front-end说到前端，技术栈可能比较混乱。作为一个全栈工程师，你需要了解：1.NodeJS和 NPM2.Yarn3.预处理器和编译器(如Babel)，用来编译 Type, ES6, LESS, SCSS, SaSS4.构建和任务执行工具，如 Grunt和 Gulp5.框架，如 VueJS、React、Angular6.模块打包工具，如 Webpack、Browserify、Rollup设计/Design/UI/Web交互开发者需要知道产品在转为可用的HTML、CSS代码前应如何画原型，然后用Java进行交互，在后端用虚拟数据做模拟测试，只有当原型图完成，用户体验和交互界面设计完成，产品才可以开始真正的开发。所以设计本身就是非常巨大的挑战，需要使用一套特殊工具：1.Photoshop ，Illustrator或一些开源工具如 Gimp ， Inkscape等。2.好用、快速的编辑器，比如 Atom或 Sublime Text3.背景选择器，如Subtlepatterns和匹配颜色的颜色选择器4.CSS的栅格系统5.用于Java模拟的相关知识6.把原型图放到网上供用户查看和反馈的方式，比如Ngrok日志为了有效的监控应用的健康度，开发者需要追踪错误，找到这些日志并找出其中有价值的信息，还需要预测一些趋势，比如需要注意CPU及I/O占用率的上涨，以防服务器突然崩溃。这些和运维有一定联系，也需要掌握更多专门的技能移动端最后说到移动端，随着 iOS和安卓的webview变得越来越高效，以及PWA(渐进式web应用)的到来，原本的应用逐渐不再流行，因为他们开发起来过于复杂。所以一个全栈工程师必须了解 PWA或 React Native，或Native、Tabris、Cordova、Phonegap等好技术开发出基于API的客户端。DevOps 和部署当你学会了后端语言和数据库，你可以开发一个完整的系统了。但是离正式向公众发布你的产品还差一个非常重要的环节——测试和部署，主要要注意几个方面：选择后端平台：国内较为知名的服务商有阿里云、腾讯云、百度云、七牛云、网易蜂巢等；选择部署平台：Nginx、Apache、Linux、SSH、Git，不同的后台服务器系统适应不同的情况，配制方法也不同；测试和修改Bug ：包括单元测试、集成测试、函数式测试、系统测试，必要时进行内测，以便在正式发布前发现系统的问题。可能要用到的还有可视化配置方面：Docker, Vagrant；其他设置：CDN加速等。全栈工程师修炼手册全栈并不是毫无章法的遍地开花，好的学习计划与方法可以事半功倍，以下是笔者总结的几点经验：一到多再到一从编程入门开始，先花一至两年时间熟练掌握一门主流的编程语言。这个阶段的目标就是一个扎实的基本功，包括程序中的基本概念，例如值与引用，变量的作用域，对象与类，常用数据结构与算法等等。一旦基础扎实了，接下去的三年左右时间就要从一到多，迅速扩冲你的技能池。要做到快速学习，第一项要领就是读技术资料时要学会跳读。因为很多的技术有相通之处，学习一项新技术，只需学习它与你已掌握的技术之间的 diff 就行了。当你有了一定的技术储备之后，一到两天内学会一门新的语言与框架其实并不难。这个阶段的另一个要领是 20/80 原则，也就是用 20% 的时间来了解一项技术中 80% 的基础内容，将剩下最难啃的 20% 留在将来需要深挖时再研究。那为什么最后还要再回到一呢？当你有了足够的技术广度之后，你对技术的洞察力与理解力都会提升一个层次，这使你能更准确地发现适合自己且有前途的技术领域。与初入行时的随大流不同，你此时的选择是经过深思熟虑，为自己量身定制的。在接下去的时间里重点深挖一个或少数几个领域，这样在俱备了技术广度的同时，你也拥有了自己的杀手锏，个人价值会再次大幅提升。任务导向所谓任务导向就是一切学习都应该以输出为目的。仅凭兴趣学习，往往是低效的。比如你的公司要做一款移动应用，初期的流程是开发 -> 上线 -> 运营，对应的技术能力就是前后端开发，自动化运维，数据平台与用户分析。当用户数到达一定体量以后，就需要高可用架构，推荐算法等技术。你技术学习的脉络应该顺应业务的发展，这样才有机会学以致用。那如果你身在大公司，又该怎么做呢？有些大公司提供轮岗的机会，比如我之前在Google，公司每18个月提供一次换岗机会。可以借此扩展你的技能池，要好好利用。在选择下一个岗位时，应保持一种连续性，比如从前端开发转后端开发，从开发部门转运维或是数据部门等。不过总体来说，全栈工程师与创业公司或是发展期公司才是最佳组合。移花接木学技术要了解其思想，而不要留于表面形式。优秀的技术思想会从它的发源地流向其他领域。例如，前端的MVC结构在后端一样适用。当你理解了 Java 的 Annotation 以后，再看 Python 的 Decorator 就会觉得非常熟悉（尽管两者的实现方式完全不同）当编译语言用类型推断（Type Inference）去除类型声明的同时，脚本语言却在用类型提示（Type Hint）添加类型声明。不可变（Immutable）的思想始于函数式编程，但可以用于运维（Immutable Infrastructure)，也可以用于大数据管理（Functional Data Engineering)。运维的核心是对各类服务器数据的监控与报警，同样的理念也可以用于产品与运营数据。技术之间的联系，有些是显而易见的，有些需要你沉淀思考。真正的全栈工程师可以用一个技术领域的思想，去解决另一个技术领域的问题。再举一个我公司的例子，在学习用 Ansible 做运维时，发现它的 playbook 不是用脚本语言而是用 YAML 来写的，这让我意识到原来 YAML 不仅可以用来描述数据，也可以用来描述逻辑关系。这个思想后来被用在我们很多的项目中，比如在设计数据产品的报表时，各种指标的计算，包括指标之间的依赖与派生关系都是直接在 YAML 中定义的，主体程序不涉及任何业务逻辑，仅仅是解析与执行这些 YAML 文件。所以我建议在学习技术时，多做一些交叉领域的思考，这会使你在提升技术广度的同时，加强你的技术思维。层次切换记得以前刚进 Google 时，听的第一个内部讲座就是 Life of a Search Request，讲从用户输入一个搜索关键词到得到结果的整个过程，这个过程涉及浏览器，TCP/IP的网络传输，后台的 Web 服务集群，索引数据库群等等。对于你公司的业务，你是否能清楚地描述从用户输入到产生结果的整个周期？对于每一个环节，你又能深入细节到什么程度？有次和公司的CEO聊天，他说他衡量一个产品经理的能力时，会看这个人能否从产品细节到长期战略之间的各个层次来回切换。我觉得衡量一个全栈工程师能力也是类似的，看他是否在了解系统的全貌的同时，又能深入到单个模块的细节。当系统遇到真正棘手的难题时，就非常考验技术人员在各层次之间切换的能力。就如同玩竞技类游戏，只有同时拥有良好大局观与精湛微操作的选手，才能成为顶尖高手。在学习全栈的路上，不但要试着横向地切换层次（前台，后台，运维），也要尝纵向地切换层次，除了写业务代码之外，向下了解一些框架的底层运行机制，读一读它们的源码。向上学习一下系统设计与分布式架构。你可能会觉得什么都学会不会精力太分散？我觉得并不会，只要你顺着一条合理的脉络去学（任务导向），花三到五年的时间迅速延展你的技术广度是非常值得的。这会使你比同龄人更具竞争优势。目标要定得高，实践时量力而为。全栈修炼入门级套餐每个人的技术学习路线可能都不太一样，这也是为什么这篇文章着重讲的是方法而不是具体的学习内容。不过对于刚进入移动互职网开发的新人，我可以推荐一个全栈学习的新手包。编程语言方面，可以优先去学习以下语言JavaJavaScriptPythonSQLSwift (如果不做 iOS 开发,可以不学，不过现在都是多端一体)Java 不但可以写 Android 应用，也是目前大部分国内公司的后端主力语言，在分布式系统与大数据平台方面的生态圈非常完整，所以即使你公司不用 Java 也应该学。写前端，JavaScript 是必备技能，要掌握一个主流前端框架，建议学 React。这是一个非常出色的框架，生态圈成熟，适用性广，在有了 ReactNative 加持之后还可以做移动应用开发。另外，在熟悉了 JS 之后，也可以用 NodeJS 来写后端。Python 也是个全能型语言，如果之后要做自动化运维，大数据分析与机器学习，Python 在这些方面优势明显。国外有很多公司用 Python 写后端，国内相对少些，但对创业公司而言，用 Python 做大后端的主力语言（业务后端 + 运维 + 数据分析）其实是个不错的选择。学 SQL 前期是为了研发与上线时的数据库查询与管理，后期是为了数据分析与商业智能。即使目前各数 NoSQL 百花齐放，但传统的关系型数据库，如 MySQL 或是 PostgreSQL，势头依然强劲 。而在大数据端，各类的数据仓库与数据计算框架都会提供类 SQL 的接口。在较小的公司里，开发人员还经常兼做数据分析师。所以我认为熟练掌握 SQL 是对全栈工程师一项基本要求。除了这些编程语言外，另一部分就是了解运维的基础知识，包括 Linux 命令行，Docker，以及各类常用的基础服务与数据库，如 Nginx，MySQL，Redis，MongoDB 等。有了这些技术基础之后，你对于一个移动应用的系统全貌，就有了大致的了解。可以再根据公司实际的业务情况，选择进一步学习的内容。

书接前文（  https://bbs.huaweicloud.com/blogs/181124  ）在 @胡琦 大大的帮助下，张小白终于学会了用VsCode的hexdump插件查看十六进制原文，从而分析出了： 链接失效是因为 <a href="xxx">abc</a> 第一个a字母和href之间的空格，其实是由两个字节构成，0xC2 0xA0（以下简称C2 A0）。根据张小白的杠精性尿性，光光知道“C2 A0 !=== 20，从而导致斜杠丢失”这个事实是不能满足张小白的。张小白想知道，自己何以沦落至此？所以C2 A0就变成了张小白心中的梦魇，直到他在度娘盘到了以下内容：看来这不是一个特例，而是一个普遍的问题。无论是HTML，还是Java，Python，都会遇到类似的问题。甚至这个C2 A0几乎无法通过trim去掉空格，导致原本你想去掉空格的时候，假空格还坚挺地站立在那里。C2 A0叫做 NO-BREAK SPACE。中文翻译过来就是：不间断空格。它会表现为一个半角空格，这跟ASCII码为0x20的空格在展示上完全一样，这造成在VsCode编辑器上就有很大的迷惑性。网上因为这事儿中招的人还特别多。那么，它到底是如何产生的？张小白一直在想如何重现这个问题。当然，所谓的重现并不是说，在上次错误HTML文档的基础上做Ctrl-C和Ctrl-V，而是看看到底啥情况会出现C2 A0。直接在VsCode中反复转换好像不大容易试出来，张小白又展开了进一步的搜索，搜索工具除了度娘之外，使用了bing, 360和sogou。（鉴于最近有人因使用科学软件被抓，张小白也不敢学科学）。但是，即便是小规模的搜索，张小白也不是一无所获，终于在一篇 《C2 A0 特殊空格》（https://www.yangdx.com/2019/12/74.html）的文字中找到了蛛丝马迹。该作者的第一句话引起了张小白的注意：这篇文字后面也有如下的留言：要知道，张小白在上《WEB前端全栈成长计划》课程的时候，是随时用 微信做笔记的：要么截图，要么发一些文字留存。稍后再对这些内容做整理，就可以形成一篇图文并茂的文字（包括本文的诞生）。所以，张小白就做了一个很简单的实验：在VScode上快速建立一个HTML文件（还记得！+TAB键吗？不会的，学一下！）我们预览下：然后将下面这段代码贴到微信中去： <a href="http://www.baidu.com">百度</a>如图所示：（是的，我可能是发给了我的小号，或者别人的大号，大家都不要猜了）。然后，我把这段文字，再从微信CTRL-C,CTRL-V回VsCode的HTML文件中。你看的没错，贴回来就是这个样子，后面好像多了个空格。删掉那个空格，让<>不再飘红：好像没问题吧？预览一下：终于重现故障！大快小白心！拿出Hexdump大旗。。。从图中可见，第二个<a href...>的空格已经变成了 C2 A0.看来，果然是腾讯的微信在使用ctrl-C,ctrl-V往VsCode编辑器拷贝东西的时候，微信会在你拷贝的时候加点“料”。（是防拷贝政策吗？）这个时候应该怎么办？试试使用记事本big法：先将微信内容Ctrl-C后，粘贴到记事本上，然后再Ctrl-C记事本上的内容，再Ctrl-V到Vscode里面。以前一般有格式问题，比如字体字号之类的，张小白只要按照这个办法，相应的格式就会消失。那么，这种办法有效吗？我们再预览下：一点用都没有。即便是记事本，也会将C2 A0原封不动的拷贝过去。还是无杠青年。当然有一种办法，就是你贴到记事本的时候，将空格删掉再重打一遍，不过这个跟你贴到VsCode后删掉空格再重打一遍空格又有何区别呢？看来使用快捷键或工具来转换C2 A0的方法似乎没用，张小白又找了一些代码转换的方法，如：Python代码转换法：代码convert.py# -*- coding:utf-8 -*- import os import sys import io reload(sys) sys.setdefaultencoding('utf-8') #打开源文件，读取内容 org_file=open("C:\Users\zhang\Desktop\space.html","r") org_str=org_file.read() #替换为空格 dest_str=org_str.replace(u"\xa0", u'\x20') #注意，此处"\xa0"不能输入为"\xc2\xa0"！ #print(dest_str) #打开目的文件，写入替换后的内容 dest_file=io.open("C:\Users\zhang\Desktop\space-converted.html","w",encoding="utf-8") dest_file.write(dest_str)在VsCode中执行：打开生成后的代码：space-converted.html 使用hexdump查看：浏览器预览都可以了：参考文件：1：《C2 A0 特殊空格》 https://www.yangdx.com/2019/12/74.html2：《C2 A0 不可见字符到底是什么？半角非中断空格》https://blog.csdn.net/qfzhangwei/article/details/895054413：《关于替换“c2a0”十六进制字符的方法》https://blog.csdn.net/ampt4027/article/details/1012445054：《【copy攻城狮日志】斜杠去哪儿了？聊聊前端中进制》https://bbs.huaweicloud.com/forum/thread-66351-1-1.html

请问这两个参数是用来做什么的，要怎么赋值呢？现在使用这个cell后的报错如下，感觉是这两个参数的问题，可以确定的是URL是可以访问到的。

【摘要】 本文汇聚参加3天Chrome web.dev LIVE的技术干货分享，如果觉得不错记得分享给身边好友哦。第一天第2集：Speed Tooling的新功能第一天第4集：掌握BigQuery上的Chrome UX报告第一天第5集：如何分析JavaScript包第一天第6集：Dev Tools时间轴中的核心网络生命第一天第7集：AMP为您服务第一天第8集：调试JavaScript SEO问题第一天第9集：JS的轻松实现第一天第10集：使用JavaScript实现结构化数据第二天第3集：V8 / JavaScript的新特性第二天第4集：Puppeteer的新特性第二天第5集：将PWA作为Android应用发布第二天第6集：如何定义安装策略第二天第8集：高级PWA模式第二天第11集：网络存储第二天第12集：放大Web：与先进的Web技术建立联系第三天第3集：1行CSS中的10种现代布局第三天第8集：Cookie及其SameSite属性第三天第9集：防止信息泄漏第三天第10集：使用Chrome DevTools的“问题”选项卡查找第三天第12集：登录最佳实践第三天第13集：Web支付中的新增功能

面对IT行业快速革新的理论与技术攻城狮朋友们需要把大量时间用于技术的学习与应用长期面对冰冷代码的攻城狮不禁要问新理论要哪里学习新技术该怎么应用可以一起成长的小伙伴在哪里针对以上问题，华为特别推出【WEB前端全栈成长计划】不玩虚的不挖坑，只为帮你解决实际问题3个月，限时全程免费参与为你构建前端全栈技能体系基础班课程已全部更新进阶班JavaScript & Ajax的深度内容正在招募，限时免费报名~                                                                                                                                             01.什么是【WEB前端全栈成长计划】0费用，3个月为你构建前端全栈技能体系，HTML/JavaScript/Node.js等web前端课程全覆盖，用华为经验帮助大家快速提升前端技能，快速向全栈工程师迈进！◎适合人群：阶段一适合：0基础想要进阶的开发者（学生/0基础开发者皆可）阶段二/三适合：想要全面完善前端技术框架，学习华为开发技术的开发者。02.课程安排时间表◎L1：前端基础入门（06/08-07/12）课程已更新完毕，报名“课程”“阶段一”可参与◎L2：迈入脚本及框架开发（07/13-08/16）javascript&ajax课程，报名见下方◎L3：全栈化进阶（08/17-09/20）待开启◎考试进阶：练习考核认证（1周）03.第二阶段课程报名全栈成长计划已经开课本公众号用户限时免费参与名额先到先得，招满即停识别下方二维码马上报名本阶段为web前端全栈新开始，如有参加过一阶段的同学需再重新报名才可获得免费学习的机会，报名课程即送300码豆，先到先得！04.活动奖品及奖励报名参与课程打卡积分活动，得到积分越高，最后累计的奖品级别越高，幸运抽奖和分享有礼等着大家！实物奖品百万码豆05.注意事项◎温馨小提示：根据自己能力报名不同阶段课程，参与每阶段考核后都会有阶段证书！◎温馨小提示：根据自己能力报名不同阶段课程，参与每阶段考核后都会有阶段证书！◎参加过一阶段学习的同学需重新报名，已在一阶段学习群的伙伴不需要再次添加新群，信息同步更新。◎一二阶段课程均可学，请详细阅读报名页面，其他要求详见各活动帖细则。另外华为JAVA全栈成长计划即将开课，想要学习JAVA课程的同学不要错过点击左下角“阅读原文”报名java课程

发文的版块名：开发与运维发文的标题名：【copy攻城狮日志】斜杠去哪儿了？聊聊前端中进制帖子内容链接：https://bbs.huaweicloud.com/forum/thread-66351-1-1.html如有不当之处，敬请提出改正，感谢！

由一个HTML解析Bug引发的思考本文首次发表于华为云社区开发与运营版块，主要是作者在学习上云知识过程中的经验产出。这次和大家分享的是前端开发过程中可能使用到的进制知识。还在纠结明明代码一毛一样运行结果就是不对吗？还在为判断文件是否为图片的需求而烦恼吗？还在担忧位运算的知识点没掌握吗？跟着我的脚步，一一为您解答！↑开局一张图，故事全靠编。故事的开头又是从一个Bug讲起，【WEB前端全栈训练营】的@张辉 大大偶遇了一个代码解析的“惊天大Bug”--a标签中的链接无法正常解析，原本链接中应该存在的斜杠莫名其妙的不见了。通过下载大大提供的示例代码，我开始了我的分析之旅，最终想到了对比文件的进制码来分析原因，在解决问题之余我也想起了曾经遇到的一些进制相关的知识点，如根据文件十六进制码判断文件类型、根据32位二进制理解位运算……斜杠去哪儿了从开局的图中，我们清晰的看到HTML解析出了问题，那究竟是怎样的代码会有这个解析错误的问题呢？诚然我四年多的前端职业生涯还没遇到过如此牛啤加握草的代码，首先是写不出来，其次是真的不知道怎么写出来的。不过，作为资深前端Copy攻城狮，既然有现成的代码，稍微运功使出我的“CV大法”信手拈来。解析正常的代码：<a href="https://classroom.devcloud.huaweicloud.com/home">首页</a>解析错误的代码：<a href="https://classroom.devcloud.huaweicloud.com/home">首页</a>Are you you kidding me？你个糟老头子坏的很，这不是一毛一样的代码吗？不用怀疑，的确不是一样的代码，只是长得像而已。起初，我也以为是一样的，但是解析出了的结果却是不一样的，眼见不一定为实啊，感觉文件到底是什么样的内容，也许只有机器才懂，毕竟在它的心里。我使用了VS Code的compare folders（文件对比）功能对比了这两行代码，发现的确不一样。于是安装了hexdump插件对比了文件编码，结果真相大白。如果说上图还不够明显，那么下图足以说明一切！其实是空格导致的，我估计是不小心复制到了不正确的空格，导致了在编辑器上肉眼无法观察到，但在浏览器中能够正常解析出来为nbsp;，多么熟悉的空格啊！所以执行一下格式化代码，问题就迎刃而解了！丢失的斜杠终于找到了，起初以为是a标签的问题，看来错怪它了，真正带走斜杠的原来是编码为C2 A0的空格，像极了翻转的故事情节。文件头标识通过上面的分析，我又想到了一个文件上传的问题，作为WEB全栈开发工程师的你，也许会遇到文件上传的需求，我们知道光靠后缀名是无法判断文件的类型的，一个以.jpg结尾的文件有可能是恶意木马文件，或者会遇到用户上传的是.jpg结尾的文件却显示失败。其实最主要的原因是单纯截取文件名称后缀来获取图片格式的方式是不准确的，因为后缀名是可以修改的，记得以前经常将.avi结尾的文件改为.txt来掩饰我内心的躁动。那文件头标识长啥样呢？可以参考filesignatures.net,比如JPG的文件头标识为FF D8 FF E0，我们可以用VS Code打开一张正经的JPG图片和TXT打包成RAR修改为JPG的文件进行对比。图中标出位置为文件头标识，理论上不管文件名后缀怎么改，文件编码都是最开始创建的那种格式。这也意味着我们不能通过新建文本文件改为.js文件的方式来新建JavaScript文件，表面上我们看不出什么问题，其实内部已经出了大问题！于是文件上传时的文件类型校验可以这么写(出处：Node.JS 识别图片类型)：function getImageSuffix(fileBuffer) {   // 将上文提到的 文件标识头 按 字节 整理到数组中   const imageBufferHeaders = [     { bufBegin: [0xff, 0xd8], bufEnd: [0xff, 0xd9], suffix: '.jpg' },     { bufBegin: [0x00, 0x00, 0x02, 0x00, 0x00], suffix: '.tga' },     { bufBegin: [0x00, 0x00, 0x10, 0x00, 0x00], suffix: '.rle' },     {       bufBegin: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],       suffix: '.png'     },     { bufBegin: [0x47, 0x49, 0x46, 0x38, 0x39, 0x61], suffix: '.gif' },     { bufBegin: [0x47, 0x49, 0x46, 0x38, 0x37, 0x61], suffix: '.gif' },     { bufBegin: [0x42, 0x4d], suffix: '.bmp' },     { bufBegin: [0x0a], suffix: '.pcx' },     { bufBegin: [0x49, 0x49], suffix: '.tif' },     { bufBegin: [0x4d, 0x4d], suffix: '.tif' },     {       bufBegin: [0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x20, 0x20],       suffix: '.ico'     },     {       bufBegin: [0x00, 0x00, 0x02, 0x00, 0x01, 0x00, 0x20, 0x20],       suffix: '.cur'     },     { bufBegin: [0x46, 0x4f, 0x52, 0x4d], suffix: '.iff' },     { bufBegin: [0x52, 0x49, 0x46, 0x46], suffix: '.ani' }   ]   for (const imageBufferHeader of imageBufferHeaders) {     let isEqual     // 判断标识头前缀     if (imageBufferHeader.bufBegin) {       const buf = Buffer.from(imageBufferHeader.bufBegin)       isEqual = buf.equals(         //使用 buffer.slice 方法 对 buffer 以字节为单位切割         fileBuffer.slice(0, imageBufferHeader.bufBegin.length)       )     }     // 判断标识头后缀     if (isEqual && imageBufferHeader.bufEnd) {       const buf = Buffer.from(imageBufferHeader.bufEnd)       isEqual = buf.equals(fileBuffer.slice(-imageBufferHeader.bufEnd.length))     }     if (isEqual) {       return imageBufferHeader.suffix     }   }   // 未能识别到该文件类型   return '' }位运算位运算也就是按位操作符，包含&(按位与)、|(按位或)、^(按位异或)、~(按位非)、<<(左移)、>>(有符号右移)、<<<(无符号右移)。照搬下MDN的解释：运算符用法描述按位与（ AND）a & b对于每一个比特位，只有两个操作数相应的比特位都是1时，结果才为1，否则为0。按位或（OR）a "s" b对于每一个比特位，当两个操作数相应的比特位至少有一个1时，结果为1，否则为0。按位异或（XOR）a ^ b对于每一个比特位，当两个操作数相应的比特位有且只有一个1时，结果为1，否则为0。按位非（NOT）~ a反转操作数的比特位，即0变成1，1变成0。左移（Left shift）a << b将 a 的二进制形式向左移 b (< 32) 比特位，右边用0填充。有符号右移a >> b将 a 的二进制表示向右移 b (< 32) 位，丢弃被移出的位。无符号右移a >>> b将 a 的二进制表示向右移 b (< 32) 位，丢弃被移出的位，并使用 0 在左侧填充。按位操作符操作数字的二进制形式，返回的依然是标准的JavaScript数值，举个栗子：14 & 9  // 814 | 9  // 151 << 4  // 16底层的运算过程可能是这样的：先将数字转换为不骂形式的有符号32位整数；如：14 (base 10) = 00000000000000000000000000001110 (base 2)  9 (base 10) = 00000000000000000000000000001001 (base 2)  1 (base 10) = 00000000000000000000000000000001 (base 2)进行位运算的时候根据运算规则处理0和1，如按位与&表示相应比特位都为1时结果才为1否则为0；对比上面的数据，前28为都为0，除了29位有两个1结果为1，其他位结果都为0，所以等于00000000000000000000000000001000,就是十进制的8；如按位或的运算规则是至少有一个1时结果为1否则为0，对比上面的数据，前28为依旧都为0，后面四位全部为1所以等于00000000000000000000000000001111，就是十进制的15。如对1进行左移4比特位计算，得到00000000000000000000000000010000结果为16。JavaScript中的进制转换可以用toString和parseInt。说了那么多，那这个位运算有什么用呢？其实前端三大框架中Vue.js和React源码中都有用到位运算。基本上涉及到状态组合的场景，都可以用位运算中的左移来简化逻辑；最常见的应用之一就是权限控制，具体实践可参考JavaScript 中的位运算和权限设计。另外在一些算法题中，我们也能用到位运算来解题，如只出现一次的数字II (Single Number II)的一种解法：/**  * @param {number[]} nums  * @return {number}  */var singleNumber = function(nums) {  let a = 0;  let b = 0;  for (let i = 0; i < nums.length; i++) {   a = a ^ nums[i] & ~b;   b = b ^ nums[i] & ~a;  }  return a};位运算的其他应用可参考前端笔记-位运算，涉及到的场景有取整、判断奇偶、RGB进制转换等。后记原本以为能紧扣中心思想来阐述主题，结果到最后也不知道自己在讲啥，前端路漫漫，慢慢上下求索，至于全干攻城狮，感觉自身目前的水平能做好Copy攻城狮就已经不错了。几年前就注册了一个公众号，可惜一直没运营起来，同期的小伙伴很多都是流量主了，更是形成了个人影响力。而我，继续努力吧！参考资料[1]filesignatures: https://www.filesignatures.net/index.php?page=all[2]Node.JS 识别图片类型: https://segmentfault.com/a/1190000020074437[3]Bitwise_Operators: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators[4]javascript-bitwise-operators: https://musicfe.dev/javascript-bitwise-operators/[5]Single Number II: https://leetcode-cn.com/problems/single-number-ii/[6]位运算: https://www.kancloud.cn/surahe/front-end-notebook/1616873

web前端全栈成长计划已顺利完成感谢大家的积极参与和支持相信无论是任何基础的开发者都在第一阶段有所收获现在，web全栈已开启下一阶段版主帮大家把第一阶段的所有内容都整理到本帖中让各位开发者方便回看各个内容↓↓↓课程相关内容- 课程观看入口：   点此查看课程课程为录播，现在报名还可观看相关内容- 课程大纲：   点此查看课程大纲-第一阶段不定时直播回看链接：1.6月4日【WEB前端全栈极简入门指南】直播回放地址：https://huaweicloud.bugu.mudu.tv/watch/jo5by5eo?from=singlemessage&isappinstalled=02.6月18日【最难就业季，如何拿到大厂offer】直播回放地址：https://huaweicloud.bugu.mudu.tv/watch/vmj22v973.7月9日【CSS中的黑魔法】直播地址：https://bbs.huaweicloud.com/signup/33d34311765c4da580997118654c29b8学习打卡任务内容及奖励安排学习任务安排积分奖励各学习任务打卡1.随堂测验打卡贴：【WEB前端全栈成长计划】第一阶段·每章随堂测验打卡帖2.学习笔记征集帖：【WEB前端全栈成长计划】第一阶段·每周学习笔记征集帖3.前端技术文章征集帖：【WEB前端全栈成长计划】第一阶段·前端技术文章征集帖4.最终考核打卡帖：【WEB前端全栈成长计划】第一阶段•最终考核打卡帖5.分享海报活动链接：https://bbs.huaweicloud.com/forum/thread-57330-1-1.html6.最终积分排名和最终考核成绩排名：https://bbs.huaweicloud.com/blogs/185921积分和抽奖1.第一阶段积分最终排行榜：https://bbs.huaweicloud.com/blogs/1752702.每周抽奖结果其他学习与活动内容1.【web前端全栈成长计划】学习情况调查问卷，和版主反馈下你的态度？发发牢骚？学习调查问卷点这里点这里点这里2.云服务器、云数据库等16+热门产品免费试用，点击链接抓紧时间领取：（详细领取规则参见活动描述）云服务器免费试用点这里点这里点这里

【WEB前端全栈成长计划】第二阶段·分享有礼活动~◎分享要求：转发上方活动海报至朋友圈，+转发语：华为WEB前端全栈成长计划二阶段，用0元换离前端工程师更近一步的机会！，公开可见保持2小时以上，将转发内容截图回复至下方评论区即可！◎分享活动期限：即日起-7月31日23:59，结束即抽奖◎中奖方式：前30名有效分享，必得华为云定制3合1数据线 //以版主点评认证的顺序为准哦，图片为准，占楼无效，以版主回复有效楼层为主~                  30名后每10个有效楼层，抽取1位幸运用户，奖励华为云定制3合1数据线各位开发者们，抓紧时间参与分享呀~◎活动规则：1. 版主会在分享期时间结束后10个工作日内开奖，本次开奖以版主回复为准，中奖名单将公布在第一层评论区，请大家保持关注~2. 每用户仅可获得一次奖励，奖品颜色随机且数量有限发完即止。3. 本次活动回帖内容需满足华为云论坛发帖规范：https://bbs.huaweicloud.com/forum/thread-23077-1-1.html