道招
《浏览器工作原理与实践》笔记之HTTP、TCP、DNS
因为浏览器使用 HTTP 协议作为应用层协议,用来封装请求的文本信息;并使用 TCP/IP 作传输层协议将它发到网络上,所以在 HTTP 工作开始之前,浏览器需要通过 TCP 与服务器建立连接。也就是说 HTTP 的内容是通过 TCP 的传输数据阶段来实现的 。 PS: 图上的发送请求行和发送请求头是一个http请求过程 可以看出发送HTTP请求的第一步就是建立TCP连接,
《浏览器工作原理与实践》笔记之数据包传输
从 数据包如何送达主机 、 主机如何将数据包转交给应用 和 数据是如何被完整地送达应用程序 这三个角度来为你讲述数据的传输过程。 IP:把数据包送达目的主机 下面我们一起来看下一个数据包从主机 A 到主机 B 的旅程: 上层将含有“极客时间”的数据包交给网络层; 网络层再将 IP 头附加到数据包上,组成新的 IP 数据包,并交给底层; 底层通过物理网络将数据包
《浏览器工作原理与实践》笔记之浏览器进程
浏览器从单进程浏览器时代进入多进程时代 Q1:最新的浏览器架构图 Q2:浏览器打开一个tab页,一般会有几个进程? 浏览器主进程 GPU进程 网络进程 多个渲染进程。如果2个页面属于同一站点的话,并且从a页面中打开的b页面,那么他们会公用一个渲染进程 多个插件进程 如果页面里有iframe的话,iframe也会运行在单独的进程中! 如果
浏览器滚动条hover时变粗、改变颜色
今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很使用,但确实不美观。 用了一些css美化后 ::-webkit-scrollbar{ height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(157,
对React Hooks的Capture value特性的理解
之前我的项目里面很多功能都是用的事件驱动,所以下面的实例也会更多地使用监听事件的回调函数。 我们先看下测试代码 const {useEffect ,useState, useRef, useMemo} = React; const {render} = ReactDOM; const eventBus = new EventEmitter(); function ListenButt
WordPress上传图片出现“图像后期处理失败,请将其缩小到2500像素并重新上传”
今天在上传图片的时候发现了这个报错“图像后期处理失败,请将其缩小到2500像素并重新上传”,如果是英文版的话,就会报错“Post-processing of the image failed. If this is a photo or a large image, please scale it down to 2500 pixels and upload it again”。显然很容易想到这
原创的几个前端校招面试题
鉴于太多新入行的朋友理论知识太扎实,简历太精彩,特出了几个手写题目,不求每个都作对,面试过程都是先问理论,如果答的不错的话再要求写代码。 变量提升 console.log(1, test); var test = 1; console.log(2, test); function test(){ console.log(3, test); } test(); 实测没有全部做
react router页面跳转二次确认弹框及样式、业务逻辑自定义
我们在编辑页面时如果需要跳走通常会需要给用户提示,react router本身已经给了我们这样的功能,我们先看看怎么使用。 初见二次确认弹框 // App.jsx const App = () { return ( <BrowserRouter> <div> <ul style={{marginTop
怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办
今天在WebStorm上Windows上准备调试一个React项目,就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件 .\node_modules\.bin\webpack-dev-server.cmd ,用的是相对当前工作空间Working directory的相对路径。 basedir=$(dirname "$(ec
React router用hooks读取routeName、根据routeName跳转
在迁移Vue至React的过程中遇到了一些路由相关的问题,在Vue项目中经常会使用routeName,毕竟使用path太长了,也记不住,我自己看了看React router也没有发现routeName相关的信息,可能是我没有找到,或者React没有这个概念吧。 在Vue中这样的写法比较常见 const router = new Router({ routes: [{ p
关注道招网公众帐号
道招开发者二群