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内核中打开 其他内核不能打开 这样的话双审阅读器就可以切换内核 但有时可能会去访问外网 这时就可以连续切换内核

php图片重绘Web前端常识扩大思维导图 Java

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://www.youtube.com/watch?v=ZTnIxIA5KGw1.2.3.1 页面加载优化

需求: 点击按钮创建50个input 思考: 不要循环去创建至页面 由于会产生回流(每次循环都会重新渲染一次页面 Layout、reflow) 办理方案: 循环创建50个文本框至文档片段中(document.createDocumentFragment()) 文档片段MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

2⃣️、Web开拓实质要求 客户端发起要求处理 做事器处理要求相应 做事器将处理的结果发送给客户端 客户端处理相应(浏览器: 解析做事器返回的数据)(IOS、Android: 解析做事器返回的数据 并且通过IOS或Android的UI技能实现界面的展示功能)3⃣️、开拓全栈3.1 PHP开拓技能栈

LAMP

LinuxApacheMySQLPHP3.2 Node.js 全栈开拓技能栈

MEAN

MongoDBExpressAngularNode.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、.... 等

若有感兴趣的小伙伴，须要前端扩展详细讲授思维导图原图的，关注我，私信回答获取：Web前端扩展思维导图

作者：蓝海00转发链接：https://www.jianshu.com/p/92e39045b06f