WEB应用的本质 1、用户请求远程资源 2、浏览器查找远程资源,打包用户请求并发送 3、服务器根据请求,通过逻辑计算,回复结果给浏览器 4、浏览器解析结果,呈现给用户 过程: 1、根据URL查找服务器地址...浏览器缓存》系统缓存》路由器缓存》ISP DNS缓存》根服务器) 2、建立TCP/IP连接(三次握手),打包并发送请求 3、服务器收到请求,交给相关进程处理 4、服务器处理请求并响应,发送结果给浏览器(状态码...:304,本地有缓存的资源请求服务器时,服务器判断若没有修改,返回状态码,不再发送数据) 5、浏览器接收结果并解析(先渲染树,然后DOM树(边下载边渲染)) 6、处理页面嵌入资源和异步请求
自己的数据就是进程在运行过程中需要处理和操作的数据集合,包括全局变量、局部变量、堆内存中分配的数据等。 如何理解,进程=内核数据结构+自己的代码和数据呢???...这是子进程识别自己的方式,通过判断fork的返回值为 0,子进程可以知道自己是新创建的进程,从而执行特定于子进程的代码逻辑。 如果调用失败,子进程没有被创建,无返回值。...代码层面理解 创建子进程:当父进程调用fork函数时,操作系统内核会为子进程分配新的进程控制块(PCB)和其他必要的资源,如内存空间等。...为20723 子进程的PID为23559,PPID为23558 确实父进程的PID对应着子进程的PPID,表明fork函数确实为我们当前的进程创建了子进程!...警察接到通知后,会从人口记录里把张三的信息正式注销,释放掉原本为张三记录预留的空间,这就如同父进程在子进程正常结束后,调用 wait() 或者 waitpid() 函数,获取子进程的退出状态并释放子进程占用的系统资源
当用户在浏览器的地址栏中输入 URL 并点击回车后,页面是如何呈现的。 简单来说,当用户在浏览器的地址栏中输入 URL 并点击回车后,浏览器从服务端获取资源,然后将内容显示在页面上。...如果 URL 中的是域名,那么首先要做的就是域名解析。 域名解析的过程:首先是浏览器查看浏览器的缓存。...客户端发送 ACK 报文后,客户端处于 established 状态。 当服务端收到 ACK 报文后,服务端进入 established 状态。...TLS 握手 TLS 握手过程的简要描述:通信的双方在 TLS 握手的过程中协商 TLS 的版本号、密码套件,交换随机数、数字证书和密钥参数,最终通信的双方协商得到会话密钥。...Nginx 会根据缓存策略缓存从应用服务器获取到的资源,浏览器也会根据缓存策略缓存收到的内容。
https://github.com/hzfe/awesome-interview 完整高频题库阅读地址:https://febook.hzfe.org/ 回答关键点 URL DNS TCP 渲染 浏览器从输入网址到渲染页面主要分为以下几个过程...否,将输入内容作为搜索条件,使用用户设置的默认搜索引擎来进行搜索。 大部分浏览器会从历史记录、书签等地方开始查找我们输入的网址,并给出智能提示。 2....查询通常遵循以上流程,从请求主机到本地 DNS 服务器的查询是递归查询,DNS 服务器获取到所需映射的查询过程是迭代查询。 3....TCP 断开连接 现在的页面为了优化请求的耗时,默认都会开启持久连接(keep-alive),那么一个 TCP 连接确切关闭的时机,是这个 tab 标签页关闭的时候。这个关闭的过程就是四次挥手。...关闭是一个全双工的过程,发包的顺序是不一定的。
这是《小游戏从0到1设计模式重构》系列内容第8篇,所有源码及资料在“程序员LIYI”公号回复“小游戏从0到1”获取。 看完了三姐妹中的大姐、二姐,最后看一下三妹抽象工厂模式。...在工厂方法模式中,虽然避免了对Page类的侵入,但是返回的对象却是具体的子页面类型(IndexPage或GameOverPage)。根据依赖倒置原则,要面向接口编程,不要面向具体实现编程。...、GameOverPage或其它页面子对象的实例。.../game_over_page' class AbstractPageFactory{ // 创建页面对象 static createPage(pageName){ let page...还有,在上一小节我们实现PageFactory时,也是直接使用具体的子类实例化页面对象的,而在一般情况下,这两个页面子类彼时尚不存在,只能通过实例化Page并修改其属性,以这样的方式达到创建对象的目的。
微软Azure的页面就是用Angular写的,下面这个也是Angular2的一个dashboard应用。 ?...library - ui-router 基于TypeScript + Angular的UI router库....Github上star: 1万+ ui-router的目的是提供一个管理UI跳转的库,基于状态机维护了一个层级的状态树,这个库对于单页应用来说非常有用。...现在应用页面非常多,如果没有一个管理中心的话,不停的跳转后状态很容易乱掉,这个库就是用来解决这个问题。 下图最底下的那条就是页面的路由,在微软的Azure上也有用到。 ?...RxJS是基于流的概念,提供了一系列神奇的函数工具集,使用它们可以合并、创建、过滤这些流。 一个流或者多个流可以作为另一个流的输入。
原文:https://alistapart.com/article/server-to-client/ 最近发现国外有一个系列,专门探究从输入URL到页面可交互的详细过程,是一份干货十足的好资料。...事先声明,这个系列完全由笔者手翻,如有翻译不当的地方,恳请读者给出改进意见! 接下来开始第一篇——《从服务端到客户端》 在浏览器执行任何工作之前,它需要先知道访问的是哪里。...服务端则可以返回HTTP 304状态码(没有更改)告诉浏览器这个缓存是最新的,不带响应正文;或者返回HTTP 200状态码告诉浏览器这个缓存资源已经过期了,并直接返回最新的资源 检查网络连接 如果现在有一个和主机...如你所知的,页面会继续发起请求,因为页面上还有很多对整体体验很重要的子资源,比如图片,脚本,和样式表。...总结 既然你已经明白了资源如何从服务器走到客户端以及之间的所有细节,那么请继续关注网页加载的下一步:从HTML标签转为DOM。
这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域...比如: 我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute已经满足了我们的需求,而当我们点击的时候,需要在分别在不同的地方跳转两个不同的页面的时候,ngRoute就不够用了...可用于添加ui-router的自定义功能,例如,基于状态名称推断templateUrl。 警告:因为生成器的函数执行顺序的不确定,decorator不应该相互依赖。...reloadOnSearch:boolean,如果为false,那么当一个search/query参数改变时不会触发相同的状态,用于当你修改$location.search()的时候不想重新加载页面。...继承父级状态的data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。 params:url里的参数值,通过它可以实现页面间的参数传递。
一个HTTP请求的过程 为了简化我们先从一个HTTP请求开始,简要介绍一下一个HTTP求情的网络传输过程,也就是所谓的“从输入 URL 到页面下载完的过程中都发生了什么事情” ●DNS Lookup 先获得...(通常到这里0.5秒就出去了) ●发送HTTP请求的时候你要知道一点就是我们的网络带宽上行和下行通常是不一样的,通常上行的带宽会小一些,一个的话还好,但是现在的网页通常都会后续请求很多资源,带宽小的时候上行拥塞怎么办...这个想法是好的,但现实却是残酷的。...由于HTTP协议是上个世纪制定的协议了,已经不能很好的适应现在Web的发展,所以Google提出了SPDY协议目前是指定中的HTTP2.0标准的一个底版。...对于小的HTTP消息,头部的比重还是很大的,而现在的web中存在大量小消息。
/configure 4、make 5、make install 安装过程中出来的几个问题,首先....整个过程对于开发者来说都是透明的。 2.1.5.2 定制过滤器 为了创建一个新的过滤器,先创建一个phonecatFilters模块,并且将定制的过滤器注册给这个模块。...AngularJS应用引导过程有3个重要点: 1. 注入器(injector)将用于创建此应用程序的依赖注入(dependency injection); 2....AngularJS模块解决了从应用中删除全局状态和提供方法来配置注入器这两个问题。...2.7.2 UI-Router 2.7.2.1 前端路由的基本原理 • 哈希# • HTML5中新的history API • 路由的核心是给应用定义"状态" • 使用路由机制会影响到应用的整体编码方式
向2和3确定的IP和端口号发起网络连接。 根据http协议要求,组织一个请求的数据包,里面包含大量请求信息(包括请求的资源路径、你的身份等)。 服务器响应请求,将数据返回给浏览器。...数据可能是根据HTML协议组织的网页,里面包含页面的布局、文字。数据也可能是图片、脚本程序等。...如果上一步返回的是一个页面,根据页面里一些外链的URL,例如图片的地址,按照1~5再次获取。...开始根据资源的类型,将资源组织成屏幕上显示的图像,这个过程叫渲染,网页渲染是浏览器最复杂、最核心的功能。 将渲染好的页面图像显示出来,并开始响应用户的操作。
创建数据表就以最简单的为例,创建一个学生的信息表编号姓名性别年龄班级成绩idnamesexageclassscore创建的表为下图所示,其中 id 为数据表自增主键二、创建数据表模型文件程序中创建数据表对应的...model 文件,目录在 app/model 下,该目录下的文件夹是以功能模块进行分类的,我们先创建一个 test 文件夹。...二、创建 dao 层数据库操作文件在 app/dao 文件下创建 test 文件夹,并创建 StudentDao.php 的 Dao 层文件。...创建完成之后,需要继承 BaseDao,并设置之前创建的 Student 模型protected function setModel(): string { return Student::...三、创建 services 层数据处理文件在 app/services 文件下创建 test 文件夹,并创建 StudentServices.php 的 services 层文件。
misko,angular的作者. 3.对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些. 4.指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则...,需要写很多模板标签 8.ngView只能有一个,不能嵌套多个视图,虽然有angular-ui/ui-router 解决,但ui-router 对于URL的控制不是很灵活,必须是嵌套式的 9.这次从...速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。 2....响应式组件 服务器端渲染 易于集成路由工具,打包工具以及状态管理工具 优秀的支持和社区 区别 名称 Vue React 渲染 渲染过程中是跟踪每一个组件的依赖...状态 Vue中的数据是可变的(mutated),改变数据,页面就会重新渲染更新。(Vue中改变状态的操作不仅更加简洁,而且它的重新渲染系统实际上比React的更快更高效。)
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。...angularjs中的ui-router,vue中的vue-router,以及react的react-router均是对这种功能的具体实现。 既然前端路由这么牛逼,那必须的好好研究一下。 二....两种实现方式及其原理 常见的路由插件中两种方式都是支持且可以切换的,例如angularjs1.x中就可以通过以下代码从Hash模式切换到H5模式: $locationProvider.html5Mode...2.2 应用 浏览器访问一个页面时,当前地址的状态信息会被压入历史栈,当调用history.pushState()方法向历史栈中压入一个新的state后,历史栈顶部的指针是指向新的state的。...无内置方法,需要另行保存页面的状态信息 将页面信息压入历史栈时可以附带自定义的信息 参数传递能力 受到url总长度的限制, 将页面信息压入历史栈时可以附带自定义的信息 实用性 可直接使用 通常服务端需要修改代码以配合实现
在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之间的切换,也就是说无法实现单页应用。 ...ajax的缺陷 1、不会在浏览器里面留下历史记录 2、用户无法将页面加为书签保存下来或者无法通过发送网址给其他人,其他人通过直接点击网址进入这个页面 3、ajax无法实现SEO优化,ajax对搜索引擎是不友好的...://angular-ui.github.io/ ,https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router查看详情 UI-Router...提供了一种很好的机制,可以实现深层次嵌套 首先你需要从github上,将UI-Router这个包下载下来,然后导入到页面中 1 页面不会跳转 路由的核心是给应用定义“状态” 使用路由机制会影响到应用的整体编码方式(需要预先定义好状态) 考虑兼容性问题与“优雅降级” 会检查浏览器,如果浏览器比较旧会使用哈希的方式,如果是新的浏览器会使用
而Yeoman就是来简化这个流程的!前面说的那些繁重的工作都会被交给Yeoman来完成。让我们来试试用Yeoman来创建一个AngularJS项目吧!...重新创建一个新的项目目录,生成器会在这个目录下生成出你的项目文件的。...Yeoman将会自动构建你的应用、拉取需要的依赖并在你的工作流中创建一些有帮助的Grunt任务(GruntTasks)。几分钟后,我们就能正式开始啦!...stateChangeStart或者locationChangeStart事件,在此事件中对即将跳转的路由状态进行拦截解析并做重定向处理。...,页面事件响应失效问题 问题: 从购买页面做重定向到登录页,再从登录页登录成功回到购买页面,购买页面的事件响应失效。
2、directive 指令系统,我认为是angular1.x版本中最强大也是最复杂的部分,angular作者本身做后端出身,所以在整个指令周期也符合语言处理过程:经过编译(compile函数,会返回...controller创建方式,主要分为静态工厂方法注册和动态注册: 1)静态注册: app.controller(‘HomeController’,function(){}) 2)动态注册: $...service创建方式有三种: 1)、provider最原始的创建方式,可以注入到config中,加上provider后缀,有固定格式,必须返回$get函数 2)、factory是对provider...的封装,直接返回对象即可 3)、service是最简单的创建方式,通过传递构造函数来创建服务。...ui-router,ui-router是基于state的一种路由框架,是使用最多的一种路由模式。
我们使用 AJAX 请求从后端获取数据,使用 JavaScript 渲染新的 UI 元素然后将它插入到 DOM 中去,用户交互通过事件绑定和回调函数来实现。...当我在表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时,我处理起来还是很费劲。...使用 Angular 也能让开发团队与页面制作团队协同工作变得更简单。...还记得前面提到的 URL 替换和模板渲染问题吗?其实没关系,人们通常使用第三方的路由库(ui-router)它们比标准的 (ngRoute)要好用。最后,Angular 也没有我之前认为的那样糟糕。...使用双向绑定为开发带来了便利,然而它也容易在长期维护的过程中由于修改部分代码而产生不可预期的 bug,尤其是那些在过去的几个月中没有再动过的代码。 那么,我从头开始创建 app 的首选方案是什么呢?
AngularJS:Ionic使用AngularJs的扩展指令作为核心框架库,同时AngularJs也加快了开发过程。...在Web服务启动情况下,所做的任何修改,刷新浏览器页面即可而不用重启Web服务,这个对于调试非常方便。 我们会看到如下的页面: ? 要停止服务,可在命令行下通过 ? 结束服务。...下面开始添加Wijmo 5的源码到我们创建的工程中,Wijmo5源码下载地址。...先在工程的www/lib 文件夹下,创建一个Wijmo文件夹,并拷贝Wijmo源码下Dist的3个文件夹controls、interop、styles到新创建的Wijmo文件夹下。...: 该指令用于给页面添加一个header。 : 该指令创建内容区域,并会用Ionic的自定义滚动视图代替浏览器默认的。
领取专属 10元无门槛券
手把手带您无忧上云