本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。1.web前端项目的结构是怎样的？文件有哪些命名规范？项目结构规范页面文件：以项目名命名，例如：shopjs文件：命名为jscss文件：命名为css图片文件：命名为images数据文件：命名为data文件存储规范：按项目模块分类存储，例如：用户信息管理页面文件存放： shop/userinfo/userlist.htmljs文件：js/userinfo/userlist.jscss样式：css/userinfo/userlist.css注意：图片的分类一般按照功能作用划分，比如： 小图标、动画图片动画图片：images/gif/…图标库：images/flags/…项目文件命名规范页面/js/css文件规范：项目名称-模块名称-页面名称，例如：shop-user-index.html用户模块的首页。注意：js一般会包含 公共js 习惯命名commo.js；css样式会包含公共css，习惯命名为 common.css。2.谈谈浏览器的兼容性这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。回答思路我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了html部分1.H5新标签在IE9以下的浏览器识别<!--[if lt IE 9]><script type="text/javascript" src="js/html5shiv.js"></script><![endif]-->2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0CSS样式的兼容性1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍 解决办法：display:block;3.IE6下图片的下方有空隙 解决方法：给img设置display:block;4.IE6下两个float之间会有个3px的bug 解决办法：给右边的元素也设置float:left;5.IE6下没有min-width的概念，其默认的width就是min-width6.IE6下在使用margin:0 auto;无法使其居中 解决办法：为其父容器设置text-align:center;7.被点击过后的超链接不再具有hover和active属性 解决办法:按lvha的顺序书写css样式，":link": a标签还未被访问的状态；":visited": a标签已被访问过的状态；":hover": 鼠标悬停在a标签上的状态；":active": a标签被鼠标按着时的状态；8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序9.IE6下无法设置1px的行高，原因是由其默认行高引起的 解决办法：为期设置overflow:hidden;或者line-height:1px;JavaScript的兼容性1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。 比如：var year= new Date().getYear();5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同其他浏览器：parentNode parentNode.childNodes IE：parentElement parentElement.children3.页面优化有哪些方法页面优化的方法非常多，最好能够对这些优化方案进行分类，这些方案最好能够结合实际开发遇到的问题来表述。优化的方案减少操作量尽量减少 HTTP 请求1) 合并文件，比如把多个 CSS 文件合成一个； 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；不要在 HTML 中使用缩放图片缩放图片并没有减少图片的容量，只是控制了图片的大小。Image压缩使用工具对图片进行压缩，保证质量的同时减少了图片的大小。减少对DOM的操作减少对DOM的操作，减少页面的重绘。提前做加载操作对域名进行预解析例如京东的做法<link rel="dns-prefetch" href="//misc.360buyimg.com" />预载入组件或延迟载入组件把 CSS 放到代码页上端 CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。使用 new Image对象，对图片进行缓存提升并行加载切分组件到多个域 ，提升服务器的响应能力JavaScript和CSS优化从页面中剥离 JavaScript 与 CSS剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。精简 JavaScript 与 CSS 使用工具压缩JavaScript和CSS文件脚本放到 HTML 代码页底部减少对页面的阻塞。异步加载使用Ajax实现异步加载，例如，滚动页面加载后面的内容，这种也比较常见。4.页面渲染原理是什么？这是一道纯理论的题目，只要能够将浏览器的渲染过程很专业的表述出来，一定会得到面试官的青睐，作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的，对于页面性能的提升是有帮助的。解题思路渲染引擎是干什么的渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件可以显示PDF格式。渲染引擎不同的浏览器有不同的渲染引擎，对于渲染引擎的使用总结如下：Trident(MSHTML)内核：IE,MaxThon,TT,The World,360,搜狗浏览器等Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上Webkit内核：Safari,Chrome等解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树步骤详细解释第一步：渲染引擎开始解析html，根据标签构建DOM节点第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。第三步：根据css样式构建布局树，主要是确定元素要显示的位置。第四步：根据前面的信息，绘制渲染树。5.什么是响应式开发？响应式开发是前端开发工作比较常见的工作内容，随着移动互联网的发展，移动端设计越来越重要，很多项目都是移动端项目先开发，而后是PC端的开发，为了降低运营成本和开发成本，同一个网站要能兼容PC端和移动端显示呼之欲出，进而响应式开发成了前端开发人员必备的技能，所以响应式开发的技术必须掌握。什么是响应式顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。需要用到的技术1. Media Query（媒体查询）用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。2. 使用em或rem做尺寸单位用于文字大小的响应和弹性布局。3. 禁止页面缩放<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />4. 屏幕尺寸响应a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。响应式设计注意事项1.宽度不固定，可以使用百分比#head{width:100%;}#content{width:50%;}2. 图片处理图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;背景图片可以使用background-size 指定背景图片的大小。6.html5有哪些新特性、移除了那些元素？题目涉及到范围非常的大，如果要面面俱到显然半天都答不完，可以先罗列出H5的一些新特性，不要回答那么具体，等面试官提具体的问题，所以在面试之前也要把这里的技术过一遍，至少每个技术也要做个小程序出来体验一下。H5新特性增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在绘画 canvas;类似windows自带的画图板，可绘制线、框、路径、图……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。画图需要的要素a) 笔，用笔可以画线、圆、矩形、文本等b) 颜色c) 画板由于画布案例比较多，代码比较复杂，可以在w3cschool上查看相关教程2) 本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失;1.特点数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。2.数据存取方式localStorage.a = 3;//设置a为"3"   localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值   localStorage.setItem("b","isaac");//设置b为"isaac"   var a1 = localStorage["a"];//获取a的值   var a2 = localStorage.a;//获取a的值   var b = localStorage.getItem("b");//获取b的值   var b2= localStorage.key(0);//获取第一个key的内容   localStorage.removeItem("c");//清除c的值   localStorage.clear();//清除所有的数据推荐使用：getItem()setItem()removeItem()3.事件监听if(window.addEventListener){    window.addEventListener("storage",handle_storage,false);//   }else if(window.attachEvent){ //兼容IE    window.attachEvent("onstorage",handle_storage);   }   function handle_storage(e){    }对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage4) 用于媒介回放的 video和 audio 元素;5) 语意化更好的内容元素，比如article、footer、header、nav、section;6) 表单控件，calendar、date、time、email、url、search;7) 新的技术webworker(专用线程)8) websocketsocket通信9) Geolocation 地理定位移除的元素纯表现的元素<basefont> 默认字体，不设置字体，以此渲染<font> 字体标签<center> 水平居中<u> 下划线<big> 大字体<strike> 中横线<tt> 文本等宽框架集<frameset><noframes><frame>

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

在完成HTML+CSS的学习之后，很多同学都会被JS难倒——JS语法、JS数据类型、JS对象……Js给我们的印象总是那么的“复杂”，因为它相比html来说是动态的，是编程语言，更深奥一些。想要熟练掌握js难度很大，不过如果你把知识点梳理清楚，真正的理解并加以运用，你就可以掌握它。那么该如何才能学好JS？在这里给大家总结一些学习Js的经验，希望能对你们有所帮助。Js有如下的特点，这也是它的魅力所在：脚本语言。JavaScript是一种解释型脚本语言。首先编译和执行C，C ++和其他语言，同时在程序运行期间逐行解释JavaScript。基于对象。JavaScript是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有对象。简单。javascript采用的是弱类型的变量类型，对使用的数据类型未作出严格的要求，是基于java基本语句和控制脚本语言，其设计简单紧凑。动态。JavaScript是一种事件驱动的脚本语言，无需通过Web服务器即可响应用户输入。访问网页时，鼠标可以在网页上单击鼠标，或上下移动并移动窗口。JavaScript可以直接响应这些事件。跨平台。JavaScript脚本语言不依赖于操作系统，仅需要浏览器支持。因此，只要机器上的浏览器支持JavaScript脚本语言，那么编写后就可以在任何机器上使用JavaScript脚本。目前，大多数浏览器都支持JavaScript。那么，js有如此多的独特地方，学起来是不是很难，怎样才能在js领域内学的轻松一些呢？这里以我初学js的亲身经历和老师的言传身教总结了一些相关学习经验（有更好的建议欢迎评论）：01了解js的作用学好一门语言的前提是知道它是干什么？比如学html/css，就知道HTML用于网站的结构部分，而css是给HTML起修饰作用，就相当于一个是房子的基本结构，另一个是装修，那么js就是给“房子”添加一些功能的，也就是给网页添加与用户的交互功能，这也是js相对于html是动态的特点，它在整个web前端中的地位是：前端的核心部分，可以使网页有动态的效果（如：图片、文字的滚动；显示及隐藏；对html元素的操作；表单的提交和输入验证等等），了解了js的作用，对我们开发网站有一定的帮助，所谓知己知彼，方能百胜不殆。02树立学习目标首先，你可以从JavaScript的基础学起：变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。任何一门语言，到最后写成一个项目，其中功不可没的必然是其扎实的基础，这里可以推荐跟着【华为云claasroom 的课程WEB前端全栈成长计划-二阶段】打基础。然后开始学习JavaScript核心 DOM BOM操作，真正体会JavaScript的魅力，如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。移动端如何制作网页特效，这些你都会了解，并进行一些有意思的小项目实践：比如简单ATM取款、猜数字游戏、省市区三级联动等等，记住，动手实践远比你看着听着强一百倍！接着可以开始学jQuery，jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理与交互。这样学会了这个库之后，能帮助你提高不少效率。最好再学Vue.js、Node.js、API,然后随着知识的积累，开发出你一些具有代表性的实践项目，并封装出一些你感兴趣的接口。03自律坚持写代码不要一时兴起，三分钟热度，看到别人用js做了一个炫酷的***页，你就大喊大叫的我也来我也来，殊不知别人背地里把基础打扎实了，才有这个成果，而你在三天打鱼两天晒网，写一个小项目就会发现自己忘记很多知识点，而垂头丧气。编程语言从来不是一下子就能学好的，都是时间的积累，坚持练习，不断的完善自己的短处，所以说，自律坚持非常重要！！！04多练多写学习js并不是跟着张宇老师，看着他敲代码，看着他说一些代码知识，说了很多注意事项，你当时可能听懂了，过了一段时间，当你写这个代码时，脑子：我会写！手：？？？？？？就会十分尴尬，明明当时听懂了呀，可为什么........因为你没有形成深刻的记忆，学习js最好是多练习多写代码，做一些你感兴趣的小项目，实现你想要的功能，不会的去查资料，然后多练多写的同时，也要看看老师是怎么写代码的，思维也很重要。要知道，实践是检验真理的唯一标准。05多角度思考充分调动你所学的东西，从多角度去思考做某一功能，锻炼自己的思维，能优化代码就尽量优化，避免冗杂，思考的成果不是凭空想象，而是有扎实的基础，确实有内容可做，而要把“空想”的功能转变为可以看见的代码效果，则需要不断在实践中推敲代码，哪条语句行得通，哪条语句行不通，还有没有其他的可优化的语句可供甄选……在此过程中，不断丰富、不断改进、不断否定与落实！06注意培养自信心刚开始学习js的你，不适合一来就做很复杂很炫的网页效果的源代码，在没有任何基础的情况下直接学这些，会严重打击你的自信心，并且会出现很多红色警告，也就是我们常说的BUG，一直运行不出你想要的结果，会让你的心态崩溃，因此切记因小失大，注意写代码是循序渐进的，而不是一飞冲天。记住此时你基础还不扎实，不要托大，你需要的是培养信心，而不是反过来装杯，否则结局很可能是“三天打鱼两天晒网”，离学有所成也就一望无际了。07多写学**结写总结相当于对我们学了的知识一个回顾，你学到了什么？其中的注意事项是什么，当你将来忘记时，可以回过头来看一眼总结，因为是你亲手自己写的，看一眼就会重拾印象，学习js既要对好的源代码进行总结，又要对其中的一些函数、方法进行总结，还可以把自己当时的思路写进去，后续可以优化完善，最后累积起来就是你的知识财富了。学会总结，是对学习的一种负责，更是对自己的一种负责。08构建思维导图这里建议用Xmind或使用幕布。构建思维导图的效率比做笔记高，平时运用是可以随时回顾知识点，并不断进行补充反馈实践收获。一般我会在上课或者自学的时候跟着书本老师的思路把问题一个个突破，然后用Xmind把内容的结构串联起来。在这个过程中，其实又把内容复习了一遍，并且掌握了知识体系的全局，这样对不止学习js有帮助，对我们未来工作或者学习其他的东西都是有极大帮助的，可以说是终身收益的。俗话说，三分天注定，七分靠打拼，爱拼才会赢，那么加油吧！本文摘自于华为云社区，作者：运气男孩

java调用sdk的api上传对象，无论上传的是字符串，还是文件对象，下载的都是一个html字符串，求解！返回的Content如下：<!DOCTYPE html><html><head><meta http-equiv='refresh' content='0;url=http://120.240.95.38:8888/2.html?h=obs-test-zhmz.obs.sz.abc.cn&i=/my-obs-object-key-demo-001&r='></head><body></body></html>

在我们第一阶段完成HTML+CSS的学习之后，很多同学都会被第二阶段JS难倒——JS语法、JS数据类型、JS对象，Js给我们的印象总是那么的“复杂”，因为它相比html来说是动态的，是编程语言，更深奥一些。想要熟练掌握js难度很大，不过如果你把知识点梳理清楚，真正的理解并加以运用，你就可以掌握它。那么该如何才能学好JS？在这里给大家总结一些学习Js的经验，希望能对你们有所帮助。Js有如下的特点，这也是它的魅力所在：1.脚本语言。 JavaScript是一种解释型脚本语言。首先编译和执行C，C ++和其他语言，同时在程序运行期间逐行解释JavaScript。2.基于对象。 JavaScript是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有对象。3.简单。javascript采用的是弱类型的变量类型，对使用的数据类型未作出严格的要求，是基于java基本语句和控制脚本语言，其设计简单紧凑。4.动态。 JavaScript是一种事件驱动的脚本语言，无需通过Web服务器即可响应用户输入。访问网页时，鼠标可以在网页上单击鼠标，或上下移动并移动窗口。 JavaScript可以直接响应这些事件。5.跨平台。 JavaScript脚本语言不依赖于操作系统，仅需要浏览器支持。因此，只要机器上的浏览器支持JavaScript脚本语言，那么编写后就可以在任何机器上使用JavaScript脚本。目前，大多数浏览器都支持JavaScript。        那么，js有如此多的独特地方，学起来是不是很难，怎样才能在js领域内学的轻松一些呢？这里以我初学js的亲身经历和老师的言传身教总结了一些相关学习经验（有更好的建议欢迎评论）：1.了解js的作用        学好一门语言的前提是知道它是干什么？比如学html/css，就知道HTML用于网站的结构部分，而css是给HTML起修饰作用，就相当于一个是房子的基本结构，另一个是装修，那么js就是给“房子”添加一些功能的，也就是给网页添加与用户的交互功能，这也是js相对于html是动态的特点，它在整个web前端中的地位是：前端的核心部分，可以使网页有动态的效果（如：图片、文字的滚动；显示及隐藏；对html元素的操作；表单的提交和输入验证等等），了解了js的作用，对我们开发网站有一定的帮助，所谓知己知彼，方能百胜不殆。2.树立学习目标        首先，你可以从JavaScript的基础学起：变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。任何一门语言，到最后写成一个项目，其中功不可没的必然是其扎实的基础，这里可以推荐跟着华为云claasroom 的课程WEB前端全栈成长计划-二阶段正式开启 打基础。        然后开始学习JavaScript核心 DOM BOM操作，真正体会JavaScript的魅力，如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 移动端如何制作网页特效，这些你都会了解，并进行一些有意思的小项目实践：比如简单ATM取款、猜数字游戏、省市区三级联动等等，记住，动手实践远比你看着听着强一百倍！        接着可以开始学jQuery，jQuery是一个优秀的JavaScript代码库。倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理与交互。这样学会了这个库之后，能帮助你提高不少效率。        最好再学Vue.js、Node.js、API,然后随着知识的积累，开发出你一些具有代表性的实践项目，并封装出一些你感兴趣的接口。        3.自律坚持      写代码不要一时兴起，三分钟热度，看到别人用js做了一个炫酷的***页，你就大喊大叫的我也来我也来，殊不知别人背地里把基础打扎实了，才有这个成果，而你在三天打鱼两天晒网，写一个小项目就会发现自己忘记很多知识点，而垂头丧气。编程语言从来不是一下子就能学好的，都是时间的积累，坚持练习，不断的完善自己的短处，所以说，自律坚持非常重要！！！4.多练多写        学习js并不是跟着张宇老师，看着他敲代码，看着他说一些代码知识，说了很多注意事项，你当时可能听懂了，过了一段时间，当你写这个代码时，脑子：我会写！ 手：？？？？？？就会十分尴尬，明明当时听懂了呀，可为什么........因为你没有形成深刻的记忆，学习js最好是多练习多写代码，做一些你感兴趣的小项目，实现你想要的功能，不会的去查资料，然后多练多写的同时，也要看看老师是怎么写代码的，思维也很重要。要知道，实践是检验真理的唯一标准。5.多角度思考        充分调动你所学的东西，从多角度去思考做某一功能，锻炼自己的思维，能优化代码就尽量优化，避免冗杂，思考的成果不是凭空想象，而是有扎实的基础，确实有内容可做，而要把“空想”的功能转变为可以看见的代码效果，则需要不断在实践中推敲代码，哪条语句行得通，哪条语句行不通，还有没有其他的可优化的语句可供甄选……在此过程中，不断丰富、不断改进、不断否定与落实！6.注意培养自信心        刚开始学习js的你，不适合一来就做很复杂很炫的网页效果的源代码，在没有任何基础的情况下直接学这些，会严重打击你的自信心，并且会出现很多红色警告，也就是我们常说的BUG，一直运行不出你想要的结果，会让你的心态崩溃，因此切记因小失大，注意写代码是循序渐进的，而不是一飞冲天。记住此时你基础还不扎实，不要托大，你需要的是培养信心，而不是反过来装杯，否则结局很可能是“三天打鱼两天晒网”，离学有所成也就一望无际了。7.多写学**结        写总结相当于对我们学了的知识一个回顾，你学到了什么？其中的注意事项是什么，当你将来忘记时，可以回过头来看一眼总结，因为是你亲手自己写的，看一眼就会重拾印象，学习js既要对好的源代码进行总结，又要对其中的一些函数、方法进行总结，还可以把自己当时的思路写进去，后续可以优化完善，最后累积起来就是你的知识财富了。学会总结，是对学习的一种负责，更是对自己的一种负责。8.构建思维导图        这里建议用Xmind或使用幕布。构建思维导图的效率比做笔记高，平时运用是可以随时回顾知识点，并不断进行补充反馈实践收获。一般我会在上课或者自学的时候跟着书本老师的思路把问题一个个突破，然后用Xmind把内容的结构串联起来。在这个过程中，其实又把内容复习了一遍，并且掌握了知识体系的全局，这样对不止学习js有帮助，对我们未来工作或者学习其他的东西都是有极大帮助的，可以说是终身收益的。俗话说，三分天注定，七分靠打拼，爱拼才会赢，那么加油吧！

书接前文（  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

DAY4：通信模组1、      截图需要有华为云账号2、      需要有数据上报代码3、      需要编译成功完成时间：2020.5.29 12:00 am请注意：数字抽奖：以打卡所在楼层数为抽奖数字。以每人第一次打卡为准（打卡楼层可多次编辑，尽量在一个楼层打卡）抽奖方式为直播随机抽奖直播进行答疑，学习过程中有任何问题，请在答疑帖中提出，我们会在直播中一一答疑。

背景:  DAS为用户提供快速导入数据的功能，允许用户上传最大为15M的SQL/CSV文件一、原始阶段一提到文件上传，首先想到的是使用最原始的html的input标签，把类型设置为file就可以了。<!-- 核心代码 --> <form action="upload" method="POST" enctype="multipart/form-data">     <input type="file" />     <input type="submit" /> </form>优点：原生HTML，简单粗暴，没有任何炫技缺点：样子过于陈旧，与DAS的中后台系统的设计格格不入1.1  第1次进化（美化）HTML的label标签for属性：表示lable标签要绑定的HTML元素，点击这个标签的时候，所绑定的元素将获取焦点。（以前这个特点经常用来在点击checkbox后面的文字时，选中/反选checkbox），所以对于文件选择器一样适用，利用这一点可以实现第1次进化（样式的进化）.inputfile {     width: 0.1px;     height: 0.1px;     opacity: 0;     overflow: hidden;     position: absolute;     z-index: -1; } .inputfile + label {     font-size: 14px;     font-weight: 400;     color: white;     background-color: #23c6c8; ... }<input type="file" id="uploader" accept=".sql" class="inputfile" /> <label for="uploader">上传...<label>为了把藏起来，把它的宽高都设置成0.1px，透明度设置为0等等无所不用其极，再精心的修改label标签的样式，使其符合DAS的风格，这样文件上传就完成了第1次进化。优点：仍然是HTML原生支持，只是使用了一点小技巧，可以通过定义css使其适配目标系统的风格缺点：对于一些较大的文件，上传过程会卡死（或者是接口超时都还没有上传完）1.2   第2次进化（分段上传）导入的文件大小限制在15M时，线上表现一直很好。直到有很多用户提出15M的限制太小了，于是DAS开始支持最大1G文件的导入。实现思路：调用接口获取1个UploadID读入文件，然后把文件切割成10M/个的分段（最大103个分段）上传所有的分段所有分段都完成后，通知服务端根据uploadID合并文件这个思路的核心在于如何在前端进行文件的分割：HTML5提供的 FileReader API提供了读取用户本地文件的能力，FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File 或 Blob 对象指定要读取的文件或数据。Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。Blob.slice(start, end, contentTyp)返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。核心伪代码：let chunks = Math.ceil(size / CHUNK_SIZE); let fileReader = new FileReader(); fileReader.onload = e => {     let fileData = new Blob([e.target.result]);             currentChunk++;     if (currentChunk < chunks) {         /* 文件分片读完了，马上开始调接口上传文件 */         uploadToServer(fileData).then(()=>{             /* 读取下一个分片 */             loadNext();         }).catch(err=>{             /* 错误处理 */         })            }  }; function loadNext() {     var start = currentChunk * CHUNK_SIZE,         end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;     fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext();在实现了分段上传后，1G文件不会再产阻塞的问题，可以顺利的上传完成，上传的过程如下图所示：1.3  第3次进化（多轮分段读取 + 前端并发控制）既然已经支持1G了，为了拉开和竟品的差距（DMS支持最大100M），DAS索性直接支持10G文件的导入。简单进行分段上传的问题开始显现出来。当只支持1G的时候，把1G文件切分后的。10G的文件全部读入是不可能的（用户内存可能都没有10G）10G文件最大有1000+个分片，顺序上传的效率又太低，必须采用并发上传的方式对于第1个问题还比较容易修改，只需要加入最大入的分段数的控制即可，这样就变成了多轮分段读取的方式了，核心代码如下：fileReader.onload = e => {     let fileData = new Blob([e.target.result]);     /* 把文件分片保存在组件中 */     fileParts.push(fileData);     currentChunk++;     if (currentChunk < chunks && fileParts.length < 12) {  // 加入一个判断的条件         /* 文件分片还没有读完,继续读 */         loadNext();     } else {                 fileParts.forEach(parts=>{             /* 文件分片读完了，开始调接口上传文件 */         })         // 分段上传完成后，把存储分段的数组清空即可。         fileParts = [];         // 重新开始新一轮的读取         loadNext()     } };第2个问题，如果要采用并发上传的方式，就必须引入一个并发控机制，确保同时上传分段数最多不超过3个，实现并发控制其实也比较简单，受数组的map方法启发，极简版本的实现核心代码如下：let mapLimit = (list, limit, asyncHandle) => {     let recursion = (arr) => {         return asyncHandle(arr.shift())             .then(()=>{                 if (arr.length!==0) return recursion(arr) // 数组未迭代完，递归继续                 else return 'finish';             })     };          let listCopy = [].concat(list);     let asyncList = []; // 正在进行的所有并发异步操作     while(limit--) {         asyncList.push( recursion(listCopy) );      }     return Promise.all(asyncList);  // 所有并发异步操作都完成后，本次并发控制迭代完成 } // 测试 var dataLists = [1,2,3,4,5,6,7,8,9,11,100,123,321,789,987]; var count = 0; mapLimit(dataLists, 3, (curItem)=>{     return new Promise(resolve => { count++         setTimeout(()=>{ console.log(curItem, '当前并发请求:', count--)             resolve();         }, Math.random() * 5000)       }); }).then(response => {     console.log('finish', response) })两者结合起来的伪代码：fileReader.onload = e => {     let fileData = new Blob([e.target.result]);     /* 把文件分片保存在组件中 */     fileParts.push(fileData);     currentChunk++;     if (currentChunk < chunks && fileParts.length < 12) {  // 加入一个判断的条件         /* 文件分片还没有读完,继续读 */         loadNext();     } else {                 mapLimit(fileParts, 3, async (file,callback)=>{             await uploadToServer(file).then(()=>{                 // 分段上传完成后，把存储分段的数组清空即可。          fileParts = [];          // 重新开始新一轮的读取          loadNext();             }).catch(err=>{                 // 预留给下一次进化             })                              })             } };1.4 第4次进化（重试 ）虽然流式读取和前端并发控制已经很大程度上改善了过程，但是然后有不足之处：一旦1000+中任何一个分片出错了，整个上传就失败了。这一点没有好好利用分段数据的优势：哪个分段上传不成功，重新上传该分段即可，不用重新上传整个文件。于是可以在上传过程中发生错误的时候进行重试，当然重试也不应该是无限制的（DAS设计为重试5次，如果某个分片上传失败后，重试5次仍然失败，整个上传过程就认为失败了），核心代码如下：fileReader.onload = e => {     let fileData = new Blob([e.target.result]);     /* 把文件分片保存在组件中 */     fileParts.push(fileData);     currentChunk++;     if (currentChunk < chunks && fileParts.length < 12) {  // 加入一个判断的条件         /* 文件分片还没有读完,继续读 */         loadNext();     } else {                 mapLimit(fileParts, 3, async (file,callback)=>{             await uploadToServer(file).then(()=>{                 // 分段上传完成后，把存储分段的数组清空即可。          fileParts = [];          // 重新开始新一轮的读取          loadNext();             }).catch(async err=>{                 // 进行5次重试                 let retryCounts = 0;                 for (let i = 0; i < MAX_RETRY; i++) {                     retryCounts++;                     let [retryErr, retryData] = await uploadToServer(file)                      .then(rs => {                                                  return [null, rs.data];                      }                          .catch(retryErr => [retryErr]);                     if (retryErr) {                         /* 重试仍然挂了,继续重试 */                         continue;                     } else {                         /* 重试成功了 */                         callback(null, retryData);                         break;                     }                 }             })                              })             } };1.5 第5次进度（支持中途取消）即使进行了几次优化，但是上传10G文件仍然需要花好久，所以需要允许用户取消文件上传；中途取消也分为两个部分：分片读取中断，不再发送新的分片上传请求正在上传中的分片取消请求第1个诉求只需要在代码中加入标记位cancelFlag即可，用户点取消时，将cancelFlag设置为true即可，核心代码如下：   function loadNext() {     if(!this.state.cancelFlag) {         var start = currentChunk * CHUNK_SIZE,             end = start + CHUNK_SIZE >= file.size ? file.size : start + CHUNK_SIZE;             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));     }    }第2个诉求目前还在实装中，主要原理是基于Cancelable Promises Proposal 实现请求的取消。核心代码如下： const CancelToken = axios.CancelToken;    const source = CancelToken.source();        post('/upload', {      cancelToken: source.token    //请求体或者头部传递一个cancelToken    }).catch(function (thrown) {      if (axios.isCancel(thrown)) {        console.log('Request canceled', thrown.message);      } else {        // handle error      }    });        source.cancel('Operation canceled by the user.');二、重构的效果15M同步上传 -> 1G分段顺序上传 -> 10G多轮分段并发上传最大支持10G文件上传上传效率高自动重试可中途取消上传

Cloud VR连接服务的指标统计功能介绍，包括：如何调出这个实时的指标显示页面？指标是基于什么计算的，打点准确性如何？具体每个指标的计算方法。如何导出这些粗颗粒度的统计指标？1. 如何调出这个实时的指标显示页面？打开服务器端的Cloud VR连接服务，点击关于，再点击“显示高级设置”，在右侧点击“实时”。此时就能够看到实时的统计指标了。实时指标示例：2. 指标是基于什么计算的，打点准确性如何？指标只能在应用层进行计算，并非网络侧探针等技术。部分指标是估算出来的。在具体指标的计算方法中有说明。3. 具体每个指标的计算方法。物理时延：输入动作（头部转动或控制器操作等）与屏幕更新显示（从刷新的屏幕发出的光线）内容之间的时延。预测间隔：一帧动作预测的显示时间 - 获取动作的时间。代表了向前预测多久的动作，作为画面的输入。服务器渲染时延：游戏应用完成一帧画面渲染所消耗的时延。编码时延：完成一帧画面编码所消耗的时延。帧传输时延：一帧画面从服务器传输第一个字节，到客户端接收到最后一个字节所消耗的时延。解码时延：客户端解码所消耗的时延客户端渲染时延：客户端完成一帧画面的一次渲染所消耗的时间动作信息传输时延：客户端传输动作信息到服务器接收到所消耗的时延吞吐率：从服务器侧计算的收包速率，计算音频和视频两个流量之和RTT：客户端到服务器之间的网络端到端时延。客户端发送消息0给服务器，服务器收到后，构建消息1并将当前的时间戳t1返回给客户端；客户端构建消息2，并将消息1中的服务器时间戳t1加入，发送给服务器，服务器收到后记录时间戳t2；RTT=t2-t1分辨率：在服务端编码的分辨率帧率：在客户端实际显示的帧率丢包率：每一秒，画面内容从服务器传输到客户端过程中的丢包率黑边度数：横向Fov上的黑边角度（Yaw）帧传输时延的误差说明：起点：服务器开始发送第n帧内容的第一个数据包终点：客户端接收到第n帧内容的最后数据包终点时间戳-起点时间戳+时间同步差值备注：客户端和服务器上的时间存在同步差值，此时间是以client时间为基准，在client上计算的。时间同步差值计算方法：服务器发包时间+RTT/2-客户端接收包的时间。因为客户端和服务端时间同步是通过RTT/2补平的，所以存在一定误差。动作信息传输时延原理相同，也存在一定误差。4. 如何导出这些粗颗粒度的统计指标？首先需要在“调试”菜单中开启本地统计量，然后在Cloud VR的安装目录下，CloudVR\logs\目录下，找到Excel文件。文件的格式如下：每一秒会记录当前一秒的打点值。数据字典如附件《CloudVR原型系统指标集 V1.1.xlsx》

数据复制服务（Data Replication Service，简称DRS）是一种易用、稳定、高效、用于数据库在线迁移和数据库实时同步的云服务。数据复制服务提供了在线迁移、备份迁移、数据同步、数据订阅和多活灾备等多种功能。数据复制服务支持哪些对象名映射数据复制服务的数据同步功能支持源数据库和目标数据库中同步对象的名称不同，即源库中的对象A同步到目标库，成为目标库中的对象B。可以使用对象名映射功能实现该目的，支持库映射、表映射和schema映射。持对象映射的同步场景映射类型支持同步场景库映射MySQL->MySQL同步MySQL->PostgreSQL同步表映射MySQL->PostgreSQL同步Schema映射MySQL->PostgreSQL同步操作步骤库映射1.     在“设定同步”页面，同步对象右侧已选对象框中，选择需要进行映射的数据库，单击“编辑”按钮。图1 库映射2.     修改库名。在“编辑库名”的弹出框中，填写新的数据库名，修改后的名称即为保存在目标数据库中的库名。图2 修改库名3.     查看修改结果。库名修改成功后，您会看到修改前的库名和修改后的新数据库名，至此，表示完成库映射的配置。图3 查看库名修改结果schema映射schema指数据库对象的集合，这个集合包含了各种对象如：表、视图、存储过程、索引等。1.     在“设定同步”页面，同步对象右侧已选对象框中，选择需要进行映射的schema，单击“编辑”按钮。图4 schema映射2.     修改schema名。在“编辑schema名”的弹出框中，填写新的schema名，修改后的名称即为保存在目标数据库中的schema名。图5 修改schema名3.     查看修改结果。schema名修改成功后，您会看到修改前的schema名和修改后的新schema名，至此，表示完成schema映射的配置。图6 查看schema修改结果表映射1.     在“设定同步”页面，同步对象右侧已选对象框中，选择需要进行映射的表，单击“编辑”按钮。图7 表映射2.     修改表名。在“编辑表名”的弹出框中，填写新的表名，修改后的名称即为保存在目标数据库中的表名。图8 修改表名3.     查看修改结果。表名修改成功后，您会看到修改前的表名和修改后的新表名，至此，表示完成表映射的配置。图9 查看表名修改结果 了解更多，请戳我...

 前言由于本人确实没有接触过图引擎服务相关的产品，自己对于图引擎的了解也不是很多，所以自己的定位只能是小白用户。再者说，我使用华为云服务平台的次数也很少，我的定位就是小白中的小白。下面就我本人一步一步的操作过程简单描述一下此次体验。一、      操作流程1、创建资源步骤按照操作文档先进行obs资源的购买和创建。https://www.huaweicloud.com/product/obs.html点击上述地址，进入官网后，按照以下步骤创建资源桶区域可以使用的不多，我这边选择的事华北-北京四。（这个区域要记住，后面会用到）选择完毕后，点击立即创建。 创建完毕后，可以尝试在桶中上传一些文件测试一下。按照操作文档购买创建图引擎服务。https://www.huaweicloud.com/product/ges.html先购买资源。创建桶，这里选择开发学习。在创建元数据的时候，先将元数据的各个模板下载下来放在本地文件中，然后在上传到之前创建的obs桶资源中。然后点击创建元数据，这里直接导入下载好的模板。在创建边数据、点数据的时候选择obs资源中上传的对应文件。选择文件完毕后，点击立即购买。至此，创建过程基本结束了。我自己在创建过程有点小坎坷，最终慢慢在摸索中创建完成了。在这里我个人觉得需要注意的就是，自己的资源库区域要和服务区域地址一致，否则总是找不到资源地址。如下图，我在这里是有一点感触的。2、体验资源在元数据管理界面就可以看到自己创建的数据列表了。在更多选项中可以启动自己的图引擎服务。启动是需要一定时间的，耐心等待一下，就可以体验服务啦。服务启动后，点击操作栏中的访问按钮，来到以下页面。左侧边栏是图分析算法栏，每种算法的参数大同小异，变更参数输入来测试不同的场景。运行PageRank算法后，得到以下结果。 可以在搜索框中输入节点名称来查询某个具体的节点信息。在节点上单击右键来查询节点的属性以及其连线信息其他的算法在参数和页面展示上会有不同。有需要填写的参数的时候，页面也会给出相应的参数提示信息。由于我在图算法这方面的研究不多，所以其他的算法我只是简单地测试了一下效果，并没有深入的探究。二、      需求建议在体验过程中并没有和其他平台的相关模块进行对比，所以只针对本平台提出一些我个人的意见。1.         资源在启动的时候等待的时间还是有点长的，不知道是网络影响，还是本身资源比较大？2.         在有些算法中节点是带有名称，有便于搜索框进行搜索，而有些算法中并没有，不知道是设计如此还是我没有找到相应技巧。3.         在放大或缩小某个具体节点时，会有一定程度的卡顿。这种卡顿虽然在某种层次上可以接受，但是应该是可以优化的，毕竟才只有几百个点几千个边的数量级。4.         在创建资源的时候提示信息还是不够明确，我个人看着操作文档都试了两三次才成功。5.         在算法栏中是否可以加上一些算法的描述信息，因为不是经常用的人还是不了解的。三、      总结整体的体验效果还是比较满意的。虽然不是自己涉及的领域，但是上手还是比较容易的。至于深层次的东西，那就留给大佬们去探究吧！    高会淳华为云账号：ghc123456微信昵称：淳2019年8月27日

1、简介Solr是一个独立的企业级搜索应用服务器，它对外提供类似于Web-service的API接口。用户可以通过http请求，向搜索引擎服务器提交一定格式的XML文件，生成索引；也可以通过Http Get操作提出查找请求，并得到XML格式的返回结果。Solr可以支持在arm环境下运行，无需重新编译。但需要配合Tomcat 8以上版本使用。可以从官网下载最新的Solr包进行解压缩、配置、运行。2、环境类别版本配置备注ARM测试服务器CentOS7.4arm通用计算增强型 | rc3.xlarge.4 | 4vCPUs | 14GB华为云公测可申请ARM服务器3、Tomcat安装（详细见tomcat指导安装文档）4、Solr安装（arm服务器）4.1.下载安装包wget http://mirror.bit.edu.cn/apache/lucene/solr/8.1.1/solr-8.1.1.zip4.2.解压缩包unzip solr-8.1.1.zip4.3.复制文件夹到目录1.拷贝solr-8.1.1/server/solr-webapp/webapp目录到tomcat/webapp/,改名叫solrcp -r solr-8.1.1/server/solr-webapp/webapp tomcat8/webapps/solr2.拷贝solr-8.1.1/server/lib/ext下的jar包到tomcat下的webapps/solr/WEB-INF/lib路径下cp solr-8.1.1/server/lib/ext/*.jar tomcat8/webapps/solr/WEB-INF/lib/3. 拷贝solr-8.1.1/dist 下的solr-dataimporthandler-8.1.1.jar、solr-dataimporthandler-extras-8.1.1.jar 包到tomcat下的webapps/solr/WEB-INF/lib路径cp solr-8.1.1/dist/solr-dataimporthandler*.jar   tomcat8/webapps/solr/WEB-INF/lib4.拷贝solr-8.1.1/server/lib下的metrics开头的5个jar到tomcat下的webapps/solr/WEB-INF/lib路径下（metrics-core-3.2.2.jar、metrics-ganglia-3.2.2.jar、metrics-graphite-3.2.2.jar、metrics-jetty9-3.2.2.jar、metrics-jvm-3.2.2.jar）5.新建一个文件夹solr-home，并将solr-8.1.1/server/路径下solr文件夹中的内容拷贝过来mkdir solr-homecp -r solr-8.1.1/server/solr/* solr-home  （复制到刚刚新建的solr-home里）4.4.环境配置1.进入tomcat8下的webapps/solr/WEB-INF下修改web.xmlcd tomcat8/webapps/solr/WEB-INFvi web.xml2. //记得打开此处的注释（如果没有手动输入）<env-entry>    <env-entry-name>solr/home</env-entry-name>  <env-entry-value>/usr/local/solr/solr-home</env-entry-value>//自己solr-home的位置    <env-entry-type>java.lang.String</env-entry-type></env-entry> //中间省略...//下面这段注释掉<!--  <security-constraint>    <web-resource-collection>        <web-resource-name>Disable TRACE</web-resource-name>        <url-pattern>/</url-pattern>        <http-method>TRACE</http-method>      </web-resource-collection>    <auth-constraint/>  </security-constraint>  <security-constraint>      <web-resource-collection>        <web-resource-name>Enable everything but   TRACE</web-resource-name>        <url-pattern>/</url-pattern>        <http-method-omission>TRACE</http-method-omission>      </web-resource-collection>  </security-constraint>  -->5、测试5.1.测试执行1.运行tomcat2.访问http://ip:port/solr/index.html（ip端口根据tomcat配置来填） 6、参考信息     solr安装指导： https://blog.csdn.net/qq_40524941/article/details/815122937、FAQ     待补充来源: 【鲲鹏翱翔】应用中间件05-solr移植安装指南

1. 简介Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。2. 部署环境Packet NameVersion版本DetailCentOSCentOS   7.5 with Armarm通用计算增强型 | rc3.xlarge.4 | 4vCPUs | 14GBNginx1.6none3. 安装部署yum源安装Nginxyum install nginx查看nginx版本nginx -v编译安装Nginx安装常用的系统组件，安装相应的库：yum   install unzip gcc gcc-c++ openssl    openssl-devel glibc-static libstdc++-static lzip libffi-devel zlib   zlib-devel libtool安装PCREPCRE 作用是让 Nginx 支持 Rewrite 功能。从 http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz获取软件安装包： wget  http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz       解压pcre-8.35.tar.gztar   zxvf pcre-8.35.tar.gz进入解压路径，进行编译安装：cd   pcre-8.35./configure   –-prefix=/usr/local/pcre #/usr/local/pcre安装路径make &&   make install 查看pcre版本：[pcre-config --version安装nginx从http://nginx.org/download/获取软件安装包： wget  http://nginx.org/download/nginx-1.6.2.tar.gz       解压nginx-1.6.2.tar.gztar  -zxvf nginx-1.6.2.tar.gz进入解压路径，进行编译安装：cd   nginx-1.6.2./configure   --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module   --with-pcre=/usr/local/pcre-8.35 #pcre的源码所在目录make &&   make install 查看nginx版本：/usr/local/nginx/sbin/nginx -v 4.示例测试创建Nginx运行用户www/usr/sbin/groupadd www /usr/sbin/useradd -g www www配置nginx.conf ，将/usr/local/nginx/conf/nginx.conf替换为以下内容#  cat /usr/local/nginx/conf/nginx.conf---------------------------------------------------user www www;worker_processes 2; #设置值和CPU核心数一致error_log /usr/local/nginx/logs/nginx_error.log crit; #日志位置和日志级别#Specifies the value for maximum file descriptors that can be opened by this process.worker_rlimit_nofile 65535;events{  use epoll;  worker_connections 65535;}http{  include mime.types;  default_type application/octet-stream;  log_format main  '$remote_addr - $remote_user [$time_local] "$request" '               '$status $body_bytes_sent "$http_referer" '               '"$http_user_agent" $http_x_forwarded_for';  #charset gb2312;       server_names_hash_bucket_size 128;  client_header_buffer_size 32k;  large_client_header_buffers 4 32k;  client_max_body_size 8m;       sendfile on;  tcp_nopush on;  keepalive_timeout 60;  tcp_nodelay on;  fastcgi_connect_timeout 300;  fastcgi_send_timeout 300;  fastcgi_read_timeout 300;  fastcgi_buffer_size 64k;  fastcgi_buffers 4 64k;  fastcgi_busy_buffers_size 128k;  fastcgi_temp_file_write_size 128k;  gzip on;  gzip_min_length 1k;  gzip_buffers 4 16k;  gzip_http_version 1.0;  gzip_comp_level 2;  gzip_types text/plain application/x-javascript text/css application/xml;  gzip_vary on;   #limit_zone crawler $binary_remote_addr 10m; #下面是server虚拟主机的配置 server  {    listen 80;#监听端口    server_name localhost;#域名    index index.html index.htm index.php;    root /usr/local/nginx/html;#站点目录      location ~ .*\.(php|php5)?$    {      #fastcgi_pass unix:/tmp/php-cgi.sock;      fastcgi_pass 127.0.0.1:9000;      fastcgi_index index.php;      include fastcgi.conf;    }、    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$    {      expires 30d;  # access_log off;    }    location ~ .*\.(js|css)?$    {      expires 15d;   # access_log off;    }    access_log off;  }}检查配置文件是否正确/usr/local/nginx/sbin/nginx  -t 启动nginx服务/usr/local/nginx/sbin/nginx访问站点http://EIP/可以看到网页                                              5.参考信息     nginx官网：https://nginx.org/     github地址：https://github.com/nginx/nginx 6.FAQ     暂无

1.简介    ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务，是Google的Chubby一个开源的实现，是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。本次移植以Zookeeper3.4.6为例进行说明，其他版本将下文中的3.4.6替换为对应的版本号进行验证即可。2.环境说明Packet NameVersionCentOSCentOS 7.5 with ARMZookeeper3.4.63.安装部署3.1安装Ant打包工具  通过yum安装Ant：yum install -y ant3.2安装automake和cppunit工具yum install -y autoconf   automake libtool cppunit4.依赖库编译无5.Zookeeper编译从官网上下载zookeeper-release-3.4.6源码到根目录下，并解压：wget https://github.com/apache/zookeeper/archive/release-3.4.6.tar.gztar zxvf release-3.4.6.tar.gz如果官网下载有问题，可以通过网站（https://github.com/apache/zookeeper/releases/tag/release-3.4.6）下载源码包，通过FTP工具上传到云主机之后再执行解压。进入到解压后的zookeeper目录执行编译：cd zookeeper-release-3.4.6ant package tar编译成功后，在zookeeper-release-3.4.6/build下生成zookeeper-3.4.6.tar.gz包。tar包可在相同环境下使用，不需要再次编译。6.测试验证测试单机部署Zookeeper。Step1：将上一步打包好的安装包复制到root目录下，并解压cp /root/zookeeper-release-3.4.6/build/zookeeper-3.4.6.tar.gz /roottar -zxvf zookeeper-3.4.6.tar.gzStep2：进入到Zookeeper目录下解压并创建data和logs目录cd /root/zookeeper-3.4.6mkdir datamkdir logsStep3：在zookeeper的conf目录下生成和修改zoo.cfg配置文件cd confcp zoo_sample.cfg zoo.cfgvim zoo.cfg#文件内容如下，标红的代表做过修改，其他的默认# The number of milliseconds of each ticktickTime=2000# The number of ticks that the initial # synchronization phase can takeinitLimit=10# The number of ticks that can pass between # sending a request and getting an acknowledgementsyncLimit=5# the directory where the snapshot is stored.# do not use /tmp for storage, /tmp here is just # example sakes.dataDir=../datadataLogDir=../logs# the port at which the clients will connectclientPort=2181Step4：修改环境变量增加zookeeper配置vim /root/.bash_profile#在文件最后增加zookeeper配置，其他保持不变# zookeeper envexport ZOOKEEPER_HOME=/root/zookeeper-3.4.6export PATH=$ZOOKEEPER_HOME/bin:$PATH Step5：启动和验证Zookeeper服务source /root/.bash_profilecd /root/zookeeper-3.4.6/bin#启动zookeeper服务./zkServer.sh start #验证zookeeper状态./zkServer.sh status#通过curl命令验证2181端口是否通curl 127.0.0.1:2181出现如上截图代表安装成功。 7.参考信息官方链接：https://zookeeper.apache.org/。安装zookeeper 3.4.6指导链接: https://www.cnblogs.com/zfzf1/p/6644122.html 8.FAQ无。

1      背景介绍 & 效果展示我们经常在电商购物时，当鼠标滑过物品展示图时，会在展示图旁边显示一个图片局部放大的效果图。本文利用OBS BrowserJS SDK上传图片对象到OBS，结合HTML5 Canvas特性可轻松实现“放大镜”效果。效果展示页面已经托管到OBS桶，访问地址：https://static-web-chongchong.obs-website.cn-north-1.myhuaweicloud.com/注：更多关于静态网站托管信息，可参考链接https://bbs.huaweicloud.com/forum/thread-15492-1-1.html图1 默认图片效果展示图2 方法一：通过上传本地图片文件进行展示首先点击“选择文件”按钮选择本地图片文件，单击“点击上传”按钮，待按钮下方显示100%进度完成后，单击“显示图片”即可以看到展示效果。（若图片较大，加载时需要点时间，请耐心等待）图3 方法二：通过已有的图片URL链接显示首先在文件框中输入可用的图片URL链接，单击“显示链接图片”按钮即可以看到展示效果。（若图片较大，加载时需要点时间，请耐心等待）注：针对已经上传到OBS的图片，其URL链接可通过OBS的“分享文件”功能获取（可参考链接https://support.huaweicloud.com/usermanual-obs/obs_03_0046.html），也可以直接在匿名可读的对象上获取URL链接（可参考链接https://support.huaweicloud.com/usermanual-obs/zh-cn_topic_0045829105.html）2      代码参考工具由Magnifier.html、以及子目录下Magnify的OBS BrowserJS SDK库文件、CSS文件、JS文件构成。所有的代码可在打开效果展示页面后（访问地址：https://static-web-chongchong.obs-website.cn-north-1.myhuaweicloud.com/），浏览器中打开F12调试页面获取。3      附录链接OBS BrowserJS SDK 下载和使用，官网参考链接：https://support.huaweicloud.com/sdk-browserjs-devg-obs/zh-cn_topic_0125029729.html