下载文档原格式
Web思维导图实现的技术点分析（附完整源码）简介思维导图是⼀种常见的表达发散性思维的有效⼯具，市⾯上有⾮常多的⼯具可以⽤来画思维导图，有免费的也有收费的，此外也有⼀些可以⽤来帮助快速实现的JavaScript类库，如：、。
技术选型这种图形类的绘制⼀般有两种选择：svg和canvas，因为思维导图主要是节点与线的连接，使⽤与html⽐较接近的svg⽐较容易操作，svg的类库在试⽤了和后，有些需求在snap⾥没有找到对应的⽅法，所以笔者最终选择了svgjs。
为了能跨框架使⽤，所以思维导图的主体部分作为⼀个单独的npm包来开发及发布，通过类的⽅式来组织代码，⽰例页⾯的开发使⽤的是vue2.x全家桶。
整体思路笔者最初的思路是先写⼀个渲染器，根据输⼊的思维导图数据，渲染成svg节点，计算好各个节点的位置，然后显⽰到画布，最后给节点连上线即可，接下来对思维导图的操作都只需要维护这份数据，数据变化了就清空画布，然后重新渲染，这种数据驱动的思想很简单，在最初的开发中也没有任何问题，⼀切都很顺利，因为模拟数据就写了四五个节点，然⽽后来当我把节点数量增加到⼏⼗个的时候，发现凉了，太卡了，点击节点激活或者展开收缩节点的时候⼀秒左右才有反应，就算只是个demo也⽆法让⼈接受。
卡的原因⼀⽅⾯是因为计算节点位置，每种布局结构最少都需要三次遍历节点树，加上⼀些计算逻辑，会⽐较耗时，另⼀⽅⾯是因为渲染节点内容，因为⼀个思维导图节点除了⽂本，还要⽀持图⽚、图标、标签等信息、svg不像html会⾃动按流式布局来帮你排版，所以每种信息节点都需要⼿动计算它们的位置，所以也是很耗时的⼀个操作，并且因为svg元素也算是dom节点，所以数量多了⼜要频繁操作，当然就卡了。
卡顿的原因找到了，怎么解决呢？⼀种⽅法是不⽤svg，改⽤canvas，但是笔者发现该问题的时候已经写了较多代码，⽽且就算⽤canvas树的遍历也⽆法避免，所以笔者最后采⽤的⽅法的是不再每次都完全重新渲染，⽽是按需进⾏渲染，⽐如点击节点激活该节点的时候，不需要重新渲染其他节点，只需要重新渲染被点击的节点就可以了，⼜⽐如某个节点收缩或展开时，其他节点只是位置需要变化，节点内容并不需要重新渲染，所以只需要重新计算其他节点的位置并把它们移动过去即可，这样额外的好处是还可以让它们通过动画的⽅式移动过去，其他相关的操作也是如此，尽量只更新必要的节点和进⾏必要的操作，改造完后虽然还是会存在⼀定卡顿的现象，但是相⽐之前已经好了很多。
JavaWeb开发知识体系图⼀：1. Java 核⼼知识 J2SE是J2EE的技术基础，所以熟练掌握J2SE的内容⾮常重要。
本阶段讲解了Java的核⼼语法及基本使⽤。
⼆：2. JSP JSP、PHP、 三门技术被称为 Web 后端开发的 3P 技术，其中 JSP 依托 J2EE 平台更是 Web 开发领域的⼀枝独秀。
学好JSP，是进⼊ J2EE 企业开发的第⼀步。
通过本阶段内容的学习，你将能够搭建 JSP 的开发环境，了解 JSP 的基本语法及内部对象的使⽤。
1.jsp的语⾔特点：jsp是⼀种脚本语⾔，jsp拥有java语⾔的所有特性jsp运⾏于jsp容器中jsp会被转换成Servlet2.jsp的基本语法jsp程序段：其中定义的变量是局部变量<%String hello = "hello word";out.print(hello);%>jsp程序段：其中定义的变量，函数，类是全局的，定义完后可以在页⾯的其他地⽅使⽤<%!String hello = "hehe";%>jsp表达式：可以把表达式的值做为字符串直接输出<%="表达式"%>注释：<%--jsp注释 --%> 不会被传到浏览器<!-- html注释 --> 会被传到浏览器，但还是注释3.jsp的编译指令和动作指令编译指令和动作指令的区别：编译指令只在jsp转化成servlet中起作⽤，⽽动作指令是客户端在请求时动态被执⾏的（客户端每次请求时都有可能被执⾏）（1）page编译指令⼀般位于页⾯的最上⽅，⼀个页⾯可以有多个page编译指令①⽤于指定jsp程序所使⽤的脚本语⾔的程序②设置⽹页的属性和编码③⽤于设置jsp程序本⾝的编码import属性⽤于导⼊java类，有两种⽅式①②errorPage属性的使⽤第⼀步先模拟⼀个异常的jsp,并指定发⽣异常后跳转的jsp页⾯①使⽤errorPage指定发⽣异常后跳转的页⾯②在body体内伪造⼀个异常第⼆步在handler_error.jsp使⽤isErrorPage="true"，并处理异常如果不指定errorPager属性的情况下会直接报异常（2）include编译指令include是jsp的静态编译指令，可以将⼀个web⽂件（html⽂件或者jsp⽂件）包含到当前的jsp⽂件中（3）forward动作指令:重定向指令<jsp:forward page="login.jsp"></jsp:forward>forward指令后⾯的代码不会被执⾏也不会被输出到客户端forward跳转到新的界⾯的时候携带参数的⽅法<jsp:forward page="login.jsp"><jsp:param value="lupeng" name="username" /><jsp:param value="123" name="password" /></jsp:forward>在login的界⾯获取参数String userName = request.getParameter("username");String password = request.getParameter("password");（4）include动作指令① include进来head标签②include进来body标签,并传递参数下⾯的是body.jsp⽂件（4）useBean动作指令表单提交数据表单界⾯不适⽤useBean的情况，获取数据如果使⽤userBean必须先new⼀个javaBean,与上传的数据类型对应，获取的⽅法如下使⽤useBean传数据的时候，表单界⾯中name的值必须与JavaBean中属性名⼀直，否则传不过来4.jsp内置对象① out对象⽤于向客户端、浏览器输出数据② request对象封装了来⾃客户端、浏览器的各种信息request.getMethod();获取请求的⽅法名request.getRequestURI();获取请求资源request.getProtocol();获取请求使⽤的协议request.getServerName();获取请求的服务器IPrequest.getServerPort();获取请求的服务器端⼝request.getRemoteAddr();获取客户端的IP地址request.getRemoteHost();获取客户端的主机名request.getParameter("");获取表单提交的值getParameter("");⽅法⽤于获取客户端、浏览器提交的表单数据，⽽request.setAttribute("", "");和request.getAttribute("");⽤于在web组件之间共享数据③ response对象封装了服务器的响应信息response.setHeader(arg0, arg1)设置请求头response.setIntHeader("refresh", 2);设置每隔两秒请求⼀次response.sendRedirect(url);实现页⾯跳转使⽤response设置CookieCookie myCookie = new Cookie("d", "d");myCookie.setMaxAge(3600);response.addCookie(myCookie);④ exception对象封装了jsp执⾏过程中发⽣的异常和错误信息⑤ config对象封装了应⽤程序的配置信息⑥ page对象指向了当前jsp程序本⾝⑦ session对象⽤来保存会话信息，也就是说它可以在统⼀⽤户的不同请求之间共享数据session.getId(); session的唯⼀标识符session.getCreationTime(); 获取session创建的时间session.getLastAccessedTime(); 获取session最后⼀次访问的时间session.getMaxInactiveInterval();获取session的失效时间可以在WEB-INF中的web.xml中⼿动设置session的失效时间（以分钟为单位）<session-config><session-timeout>10</session-timeout></session-config>⑧application对象代表当前应⽤的上下⽂，它可以在不同的⽤户之间共享信息⑨ pageContext对象提供了对jsp页⾯所有对象以及命名空间的访问三：3. JDBCJDBC 是 Java 对关系型数据库进⾏访问的最主要的 API，是 Java 数据库编程的技术基础。
《.NE T Web企业级项目开发》课程标准一、课程性质1、课程定位本课程是针对.NE TWeb企业级开发职业领域中的.NE TWeb软件工程师工作岗位而设置的课程，属于专业学习领域。
.NE TWeb软件工程师是指熟练应用微软ASP.NE T技术进行Web项目开发的软件设计人员，在开发团队中负责根据详细设计进行具体的界面和程序设计。
2、课程目标与课程任务通过学习本课程，学生具备在.NE T平台上熟练运用HTML、Java Script、ASP.NE T、ADO.NE T、Web Service、XML、N层架构、Ajax等主流技术开发Web应用程序的能力，这是当前就业市场上Web软件工程师岗位对技能的要求。
学生在项目实施的工作过程中，了解.NE TWeb项目开发的完整过程，全面掌握.NE TWeb程序设计的综合职业技能，毕业后能在软件研发单位从事企业级Web项目的技术研发、管理工作。
3、课程的内容结构课程的内容以“销售管理信息系统”项目为主线，以工作过程为导向，根据工作任务设置8个学习情景：①搭建.NE T开发平台，创建“销售管理信息系统”；②设计销售管理信息系统用户操作界面；③信息录入合法性验证的设计；④交互操作与页面处理；⑤系统会话与状态管理；⑥“销售管理信息系统”的数据库访问设计；⑦实现查询、显示会员消费及积分记录；⑧部署安装“销售管理信息系统”。
4、课程所处的地位成为一名合格的软件工程师，首先必须学习《.NE T开发平台与C#编程》等专业基础课，培养如程序设计逻辑思维等最基本的能力，其次需要学习像《.NE TWeb企业级项目开发》这样与工作岗位紧密联系、实践性很强、切入到企业最重要技术领域的专业技术课程，因此本课程在整个专业课程体系当中处于最重要地位。
考虑到学生学习本课程之前需要学习一系列前驱课程作为技术基础，课程被安排在第四个学期执行教学任务。
二、课程理念1、以工作过程为导向开发课程以工作过程为导向开发课程、以行动导向的教学观和学习情境的构建观组织教学，加强学生掌握企业岗位所需技能培养，实现教学过程与工作过程互融。
java web程序设计Servlet概述Servlet基本知识Servlet是Java EE架构中的关键组成第一个Servlet1.编码：创建一个类，继承Http Servlet重写do Get(),do Post()方法2.配置：在web，xml中配置该Servlet的访问路径Servlet的生命周期init()：用于Servlet初始化。
当容器创建Servlet实例后，会自动调用此方法。
service()：用于服务处理。
当客户端发出请求，容器会自动调用此方法进行处理，并将处理结果响应到客户端。
destroy()：用于销毁Servlet。
当容器销毁Servlet实例时自动调用此方法，释放Servlet实例，清除当前Servlet所持有的资源。
Servlet生命周期阶段 1.装载Servlet 2.创建Servlet实 3.初始化 4.服务 5.销毁Servlet数据处理1.读取表单数据2.处理HTTP请求报头3.设置HTTP响应报头Servlet会话跟踪会话跟踪包括哪几种Cookie技术Session技术URL重写技术隐藏表单域技术CookieCookie的安全机制1.Cookie不会以任何方式在客户端被执行2.浏览器会限制来自同一个网站的Cookie数目3.单个Cookie的长度是有限制的4.浏览器限制了最多可以接受的Cookie数目作用获取请求携带的cookie。
语法${cookie.cookie的name}SessionSession的定义Session是在Java Servlet API中引入的一个非常重要的机制，用于跟踪客户端的状态，即在一段时间内，单个客户端与Web服务器之间的一连串的交互过程称为一个会话。
Session的使用setAttribute()方法：用于在Session对象中保存数据，数据以Key/Value映射形式存放getAttribute()方法：从Session中提取知道Key对应的Value值创建HttpSession对象有以下两种方式getSession()：返回当前请求的会话，如果该会话对象不存在则创建一个新会话。
Web前端知识扩展【思维导图】Web前端思维导图见文章底部1⃣️、浏览器工作原理1.1 浏览器的组成•人机交互部分(UI)•网络请求部分(Socket)•JavaScript引擎部分(解析执行JavaScript Chrome V8引擎)•渲染引擎部分(渲染HTML、CSS等)•数据存储部分(Cookie、LocalStorage、SessionStorage) 1.1.2 浏览器访问网站的过程•在浏览器地址栏中输入网址•浏览器通过用户在地址栏输入的URL构建HTTP请求报文•浏览器发起DNS解析请求将域名转换为IP地址(找到对应资源的服务器)•浏览器将请求报文发送给服务器•服务器接收请求报文并解析•服务器处理用户请求并将处理结果封装成HTTP响应报文•服务器将HTTP响应报文发送给浏览器•浏览器接收服务器响应的HTTP报文并解析•浏览器解析HTML页面并展示在解析HTML页面时遇到新的资源需要再次发起请求•最终浏览器展示出页面1.2 主流浏览器渲染引擎1.2.1 双核浏览器1.2.1.1 什么是双核浏览器？有两个不同的渲染引擎内核(IE引擎||Chrome引擎)1.2.1.2 为什么要双核浏览器？为了解决某些企业内部的OA系统这些系统有可能只能在IE内核中打开其他内核不能打开这样的话双核浏览器就可以切换内核但有时可能会去访问外网这时就可以继续切换内核1.2.2 主流渲染内核•Chrome浏览器 => Blink引擎(webkit引擎的分支)•Safari浏览器 => webkit引擎•FireFox浏览器 => Gecko引擎•Opera浏览器 => Blink引擎(早期使用Presto引擎)•Internet Explorer浏览器 => Trident引擎•Microsoft Edge => EdgeHTML引擎(Trident引擎的分支)1.2.3 浏览器渲染引擎的工作原理•解析HTML构建DOM树(Document Object Model 文档对象模型)•构建渲染树渲染树并不等同于DOM树像head标签link标签等或display:none这样的元素就没必要放在渲染树中但是它们都会存在于DOM树中•对渲染树进行布局、定位坐标、大小、是否换行、确定position、overflow、z-index... 这个过程叫 layout或reflow•绘制渲染树调用操作系统底层API进行绘图操作•浏览器渲染网站过程视频https:///watch?v=ZTnIxIA5KGw1.2.3.1 页面加载优化需求: 点击按钮创建50个input 思考: 不要循环去创建至页面因为会产生回流(每次循环都会重新渲染一次页面Layout、reflow) 解决方案: 循环创建50个文本框至文档片段中(document.createDocumentFragment()) 文档片段MDN https:///zh-CN/docs/Web/API/Document/createDocumentFragment2⃣️、Web开发本质•请求客户端发起请求•处理服务器处理请求•响应服务器将处理的结果发送给客户端•客户端处理响应•(浏览器: 解析服务器返回的数据)•(IOS、Android: 解析服务器返回的数据并且通过IOS或Android的UI技术实现界面的展示功能)3⃣️、开发全栈3.1 PHP开发技术栈LAMP•Linux•Apache•MySQL•PHP3.2 Node.js 全栈开发技术栈MEAN•MongoDB•Express•Angular•Node.js4⃣️、为什么要配置环境变量为了让某个应用程序在任何路径下通过命令行运行成功5⃣️、Node.js 开发网站和传统PHP等开发网站的区别5.1 Node.js 开发网站•不需要Web容器因为Node.js 本身就是基于更底层的HTTP协议开始的本身就是一个HTTP服务器•node.exe 进程监听8080(代码中设置的端口号)端口接收用户请求根据不同请求做出对应的处理最后将处理后的结果返回给浏览器5.2 传统PHP等开发网站•需要Web服务器•监听端口(8080)解析用户请求报文读取成功后将文件内容响应给浏览器6⃣️、同步、异步6.1 同步•代码•从上往下执行•现实•同一个人同时只能做一件事件后面的事情️等前面的事情️执行完才能执行需等待6.2 异步•代码•某段代码执行不会阻塞后面代码的执行•现实•同一个人同时做很多事情️后面的事情️无须等待同时执行•JavaScript中的异步•绝大多数具有*回调函数*的代码都是异步的定时器回调函数Node.js 中的文件读写AJAX jQuery中的动画函数中的回调函数 ...XMind笔记总结后面会增加HTTP和HTTPS协议、回流、重绘、WebSocket、.... 等。
Java⼯程师学习之路思维导图前⾯看Hollis的微信公众号更新了Java⼯程师成神之路的⽂档，感觉⾥⾯的内容清晰、齐全，可以⽤来审视⾃⼰，也能够知道⾃⼰在那些⽅⾯可以继续前⾏，想着有时间分享出来。
⼀、基础篇JVMJVM内存结构堆、栈、⽅法区、直接内存、堆和栈区别Ja va内存模型内存可见性、重排序、顺序⼀致性、volatile、锁、final垃圾回收内存分配策略、垃圾收集器（G1）、GC算法、GC参数、对象存活的判定JVM参数及调优Ja va对象模型oop-klass、对象头H o tSpo t即时编译器、编译优化类加载机制classLoader、类加载过程、双亲委派（破坏双亲委派）、模块化（jboss modules、osgi、jigsaw）虚拟机性能监控与故障处理⼯具jps, jstack, jmap、jstat, jconsole, jinfo, jhat, javap, btrace、TProfiler编译与反编译javac 、javap 、jad 、CRFJava基础知识阅读源代码String、Integer、Long、Enum、BigDecimal、ThreadLocal、ClassLoader & URLClassLoader、ArrayList & LinkedList、 HashMap & LinkedHashMap & TreeMap & CouncurrentHashMap、HashSet & LinkedHashSet & TreeSetJa va中各种变量类型熟悉Ja va Str ing的使⽤，熟悉String的各种函数JDK 6和JDK 7中substring的原理及区别、replaceFirst、replaceAll、replace区别、String对“+”的重载、String.valueOf和Integer.toString的区别、字符串的不可变性⾃动拆装箱Integer的缓存机制熟悉Ja va中各种关键字transient、instanceof、volatile、synchronized、final、static、const 原理及⽤法。
