get 请求,请求的数据会附加在URL之后,一?分割URL 和传输数据 ,多个参数用&连接。URL的编码格式采用的是ASCll编码,所以所有的非ASCll需要编码后才能传输过去。
http规范中没有对url的长度进行限制,但是实际开发中,对于get,特定的浏览器和服务器对URL的长度有限制。因此,GET请求时,传输数据会受到长度的限制。
对于post,不是url传值,长度是不受限制的。
post的安全性比GET的高。
get是幂等的,而post不一定是幂等的
nth-child(n) 选择父元素下某种类型的第n个子元素,如果子元素匹配样式才会显示(其他元素算在内,回收其他元素的影响)
浏览器是多进程的,浏览器的主要进程有:
(1)Broswer进程:相当于一个大管家。只有一个。负责页面的创建销毁,网络资源的管理、下载等,
(2)第三方插件进程:每启动一个插件就创建一个进程。
(3)GPU进程:用于3D绘制
(4)浏览器渲染进程(浏览器内核)(render进程):每个网页对应一个进程
URL主要有 协议、主机、端口、路径、参训参数、锚点
输入URL后,浏览器会解析出协议、主机、端口、路径等信息,并构造一个HTTP请求
1.浏览器发送请求前,根据请求头的 expires 和cache-control (cache-control的优先级高于expries) 判断缓存是否过期 、是否命中了强缓存策略。若命中强缓存策略,就不需要发送http请求,直接在缓存中获取资源。如果未命中则进入下一步。
2.若没有命中强缓存,浏览器就发送HTTP请求,根据请求头last-modified和etag,判断是否命中协商缓存,如果命中,直接从缓存中获取资源。如果没有命中,就进入下一步。
3.如果前两步都没有命中,就直接从服务端获取资源。
Expries的值为服务器返回数据的到期时间。的那个再次请求的时间小于返回的此时间,就直接使用缓存数据。 由于 服务端的时间 与客户端之间的时间可能有误差,就有了cache-control。cache-control的优先级高于expires
last-modify:上一次请求资源时,获得的该资源的最后修改时间
if-Modified-Since
:浏览器再次请求服务器的时候,请求头会包含此字段,后面跟着在缓存中获得的最后修改时间。服务端收到此请求头发现有if-Modified-Since,则与被请求资源的最后修改时间进行对比,如果一致则返回304和响应报文头,浏览器只需要从缓存中获取信息即可。 从字面上看,就是说:从某个时间节点算起,是否文件被修改了
Etag:服务器响应请求时,通过该字段告诉浏览器当前资源在服务端生成的唯一标识符。(生成规则由服务器决定)。
If-None-Match:当服务器再次请求该数据中,浏览器的请求报文会包含此字段,后面的值在缓存中获取的标识。服务器收到此次报文发现If-None-Match就会与被请求资源的唯一标识符进行对比。
不同,说明被修改过,就响应整个资源内容,返回状态码200。
相同,说明没有被修改过,则响应header,浏览器直接从缓存中获取资源,返回状态码304
Etag的弊端:但是实际应用中由于Etag的计算是使用算法来得出的,而算法会占用服务端计算的资源,所有服务端的资源都是宝贵的,所以就很少使用Etag了。
减轻服务器的压力, (减压)
减少冗余的数据传递,节省带宽流量(节省流量哦)
加快了网页的加载速度(主要原因 用户体验好)
内存泄漏:用来为引用类型的堆内存,由于某种原因没有释放或者无法释放,导致程序运行速度减慢甚至导致程序崩溃。
记录每个对象被引用的次数,当引用次数为0的时候,立即进行回收。
(1)可以立即回收垃圾
(2)因为是即时回收,那么程序不会暂停去单独使用很长时间的GC,那么最大暂停时间也很短。
(3)不用去遍历堆里面所有的活动对象和非活动对象
(1)不能解决循环引用的问题
(2)计数器需要占用很大的空间
标记阶段:对每个活动对象进行标记
清除阶段:将为被标记的对象(即非活动对象)进行清除
标记阶段(如何标记):
GC从全局出发,沿着作用域逐层向里边(深度遍历),当遍历到堆中的对象的时候就将它打上标记,直到遍历到最后一个。
遍历整个堆内存,将为未被标记的对象进行清除。
2.再分配时便利次数多
(1)模块打包: 可以将不同模块的文件进行打包整合到一起
(3)能力扩展:通过webpack的Plugins机制,我们在实现模块打包和编译兼容的基础上,可以进一步实现诸如按需加载,代码压缩等一系列功能。对其他资源进行编译的预处理工作。
loader:loader的本质是一个函数,对接收到的内容进行转换进行转换。因为webpack只认识Javascript,loader就像是一个翻译官。
plugin:就是插件,基于事件流框架Tapable,对webpack功能的扩展,在webpack运行的生命周期中,会广播出许多事件,Plugin可以监听这些事件,在合适的机会通过webpack提供的Api改变输出结构。
1.webpack-merge 提取公共资源,减少代码的重复使用。
file-loader 一般与file-loader搭配使用,功能与file类似,如果文件小于限制的大小,则会返回base64编码,否则就使用file-loader将文件移动到输出的项目中。
在使用这个plugin时,要使用对象结构的方式去接受
事件委托: 将原本需要绑定子元素上的响应事件,绑定到父元素或者更外层的元素。
(1)事件捕获阶段:从window对象传到目标节点上(上层传到底层)称为“捕获阶段”,捕获阶段不会响应任何事件
(2)处于目标阶段:在目标节点上触发,称为“目标阶段”
(3)事件冒泡阶段:从目标节点传回window对象(底层传回上层),称为 冒泡阶段,事件委托的原理
(1)可以大量节省内存占用,减少事件注册,
(2)对于新增的子对象无需再次对其绑定。
首先,根据真实的Dom生成一个 Virtual DOM,当 virtual DOM 某个节点发生改变的时候,会生成一个Vnode。 然后将Vnode 和 OldVnode的元素进行对比, 发现有不一样的地方就直接在真实的DOM上修改,然后将oldVnode的值 为Vnode。
diff的过程:失调用名为patch 的函数,比较新旧节点,边比较边给真实的DOM打补丁。
虚拟DOM 是将真实Dom的数据抽出来 而生成的一个对象。
在采取diff算法比较新旧节点的时候,比较只会在同层之间进行,不会进行过跨级比较。
当数据发生改变的时候,通过发布者通知,然后调用patch函数。
创建一个新的对象,这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型,拷贝的就是 基本类型的值。 如果是引用类型,拷贝的就是内存地址,所以如果其中的一个类型改变就会影响另一对象。
将一个对象从内存中,完整的拷贝一份出来,在读内存中重新开辟一个新的区域存放新对象,且修改新对象不会影响原对象
// 如果为引用类型再次调用该函数px: 像素,相对长度单位,像素px 是相对于屏幕显示器的分辨率而言。
em: 相对与当前对象文本的字体大小,如果未设置,则相对于浏览器的默认字体尺寸。
特点: 1.em不是固定的 2.em会继承父级元素的字体大小。
**rem:**相对于根元素的大小,
**%:**一般是相对于父元素来说的
**vm:**css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效
localStorage:除非被手动清除,否则将会永久保存。
sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。
cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面,一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。
一般只用来判断基本的数据类型,但是NUll除外,typeof Null 的类型为object
instenceof 用来判断对象类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。但是,并不适用于一些基本数据类型。
static是position的默认属性,元素会按正常的文档流进行排序,不会受到top,bottom,left,right的影响。
relative相对定位的元素会较正常文档流中的位置进行偏移,受top,bottom,left,right的影响。就是元素还在文档流中像static一样占着位置,但视觉上会有偏移,多用于absolute绝对定位的父元素。
absolute绝对定位会脱离正常的文档流,相对于最近的进行过定位的**(非static)父级元素定位,若没有父级元素进行过定位,则相对于即浏览器窗口**定位
fixed固定定位同样是脱离正常的文档流,一直相对于浏览器窗口定位,无论页面如何滚动,此元素总在屏幕的同一个位置。
阈值为此元素在可视区域中与边界的距离,跨越特定阈值前为相对定位(relative),当页面滚动导致此元素跨越阈值则变为固定定位(absolute)。
then接受两个参数,一个是成功时的回调,一个是失败时的回调。
根本区别在于:它们是否创造了新的元素。
伪类:用于向某些选择器添加特殊的效果
伪元素:用于将特殊的效果添加到某些选择器
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现
就是讲一个可以接受多个参数的函数转化为可以接受单个参数的函数,并且返回接收余下参数且返回结果的新技术。
原理:将子类函数的原型指向父类原型的实例
1.子类不能给父类传参
2.子类实例共用父类中引用的属性
原理:利用call或者apply 可以改变父函数this的指向
缺点:只能在构造函数中定义函数,不能使用 父函数原型中的属性
原理:结合了原型链继承 和 构造函数继承
原理:在已有一个实例对象的前提下,在函数中声明一个函数,使函数的原型指向被传入的参数。返回函数的的实例
缺点:子类会共用被传入对象中的引用类型。
或者直接使用 Object.create()
来设置原型,可以看出跟上边的结果是一样的
原理:根据已有的对象实例,深拷贝一个新的对象,并且可以在这个对象上添加方法和属性
缺点:每次调用继承的方法都会在函数中重新添加属性
优点:不需要共用引用的属性
原因:使用组合式继承的时候,父类函数会被调用两次,在Child.prototype
中会有父类函数的属性,在子类实例中中也会有父类的属性
。总共有两次,
原理:克隆父类构造函数的prototype,利用寄生的方式
使用了函数劫持的方法,重写了数组的方法,Vue将data中的数组进行了原型链重写,指向了自己定义的原型链方法。当调用数组api时,可以通知依赖更新。如果数组中包含引用类型,那么会对数组中的引用类型再次遍历进行监控。
在下次dom更新循环之后,执行延迟回调。在修改完数据之后立即使用这个方法,获取更新后的DOM。
个人理解:就是你想在dom刷新之后立即获取数据,
可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际
例如,当你设置 vm.someData = 'new value'
,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触
DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)
。这样回调函数将在 DOM 更新完成后被调用。例如:
ARP协议是将IP地址转化为MAC地址,那么DNS协议就是将域名转化为IP地址。(也可以将IP地址转化成域名)
即IP地址是面向主机的,而域名是面向用户的。
权限域名服务器:负责一个区的域名解析工作
\1. 主机先向本地域名服务器进行递归查询
\2. 本地域名服务器采用迭代查询,向一个根域名服务器进行查询
\3. 根域名服务器告诉本地域名服务器,下一次应该查询的顶级域名服务器的IP地址
\4. 本地域名服务器向顶级域名服务器进行查询
\5. 顶级域名服务器告诉本地域名服务器,下一步查询权限服务器的IP地址
\6. 本地域名服务器向权限服务器进行查询
\7. 权限服务器告诉本地域名服务器所查询的主机的IP地址
\8. 本地域名服务器最后把查询结果告诉主机
注意: 本机向本地服务器进行递归查询,本地服务器采用迭代查询
可以出现换行符
(3)将伪类数组转化为真正的数组
设置透明:(两种方式)
R:红色值。正整数 (0~255)G:绿色值。正整数 (0~255)B:蓝色值。正整数(0~255)A:透明度。取值0~1之间
opacity:value; value:指定不透明度,从0.0(完全透明)到1.0(完全不透明)。opacity属性具有继承性,会使容器中的所有元素都具有透明度;
animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)
可以通过伪元素来设置0.5px的边框
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外,设置inset就是从外往里);
语义化是根据内容选择合适的标签。便于开发者阅读。
优点:有利于SEO优化,有利于爬虫抓取更多的信息。方便其它设备的解析。
规则1:只要 布尔类型参与比较,该布尔类型会被首先转化为 数字类型
规则1:当**数字类型****和 字符串类型做相等比较时,字符串类型会被转化为 数字类型
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头,并返回数组的长度
pop:剪切掉数组的最后一项,并且返回剪切的那一项
push:在数组最后添加一个元素,返回值为数组的长度
slice(不改变原数组): 可以传入一个或者两个参数
(1)当m>=len时,返回值为空数组
(2)当0<=m<len,返回 从索引为m的元素到最后一个元素的数组
当为两个参数的时候,slice(m,n)
复制从索引为m的元素到索引为n的元素
split 可以实现删除、插入、替换的操作
**删除(两个参数):**arr.splice(1,3) 表示从索引为1的元素开始删除3个数
**插入(大于等于三个参数):**arr.splice(1, 1, 99, 99) 在索引为1的位置删除1一个元素,并插入两个99的元素。
concat() 一般用来合并数组
indexOf:数组中某个第一次出现的索引
lastIndexOf:数组中某个数最后一次出现的索引
如果数组中不存在就返回-1
some:只要一个元素符合条件就返回true
every:所有元素都符合条件才返回true
(1)https协议需要到CA申请证书
(2)http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl/tls加密传输协议。
(3)http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443
(4)http的连接很简单,是无状态的;HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
2.将传入的第一个参数从argument中取出来,并且使用
3.将新建对象的显示原型指向取出的对象的隐式原型
4.通过apply执行看看是否有返回值
问题1:数据类型判断的方法?instanceof判断复杂数据类型的原理是什么?toString()和constructor有了解过吗?
答:①简单类型用typeof,复杂类型用instanceof。用typeof判断简单类型,除了null会返回object,其他都会返回正确的结果,如果判断复杂类型通通返回object。用instanceof可以检测某个实例是否是某个对象类型,如果用它来检测简单数据类型则始终返回false,因为基本类型不是对象。②MDN:instanceof 运算符 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。③查了MDN:默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 “[object type]”,其中 type 是对象的类型
1.都使用了虚拟dom
state储存数据,setState修改数据,其中数据会与state合并。
会使用生命周期函数,帮助完成一些功能
调用函数时,需要绑定this
使用useState来设置变量,返回一个对象,其中有两个参数,一个是设置的数据,一个是修改数据的函数
Store(只能有一个)
1.箭头函数都是匿名函数
2.箭头函数this的指向为定义是外层非箭头函数的this指向
3.箭头函数不能使用arguments,取而代之使用rest参数解决
**观察者模式:**观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件。
**发布订阅模式:**订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。
观察者更像是:观察者 依赖某个 被观察者 ,当被观察者 发生改变的时候,通知观察者改变
发布订阅者:其中包括 发布者,订阅者 和 调度中心,理解 微博博主就像是一个发布者,关注的人像是订阅者,而微博本身是 调度中心,博主发送新内容的时候,调度中心 将 新内容推送给 订阅的人
http只能由客户端发送,服务端响应返回数据,而webScoket建立连接之后,客户端和服务端都可以主动发送消息。
3.使用Object.assign(),如果为一层则可以进行深拷贝,如果是多层则不能进行深拷贝
hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.
由于hash值变化不会引起浏览器向服务器发出请求, 而且hash改变会触发hashchange事件, 浏览器的进后退也能对其进行控制, 所以在HTML5之前, 基本都是使用hash来实现前端路由.
不利于seo的优化, hash
只能修改 #
后面的部分,所以只能跳转到与当前 url
同文档的 url
。
同时history模式解决了hash模式存在的问题. hash的传参是基于URL的, 如果要传递复杂的数据, 会有体积限制, 而history模式不仅可以在URL里传参, 也可以将数据存放到一个特定的对象中
src是source的缩写,是指向外部资源位置,指向的内部会迁入到当前标签所在的位置;请求src资源时会将其指向的资源下载并应用到文档中。
当浏览器解析到这一句的时候会识别该文档为css文件,会**下载**并且**不会停止对当前文档的处理**
区别1(功能):link是XHTML标签,除了加载Css,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
区别2(加载):link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
区别3(兼容问题):link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本浏览器不支持。
区别4(是否支持js控制DOM改变样式):link支持,import不支持
flex-grow:定义项目的放大比例:
2.如果所有的项目的flex-shrink为1:当空间不足时,缩小的比例相同
默认值auto,即项目原本大小
设置后项目占据对固定空间
flex为一个非负数字n:
1、桌子上原来有12支点燃的蜡烛,先被风吹灭了3根,不久又一阵风吹灭了2根,最后桌子上还剩几根蜡烛呢?12根
2、狐狸用50元的假钞买走了老山羊店里一件45元的皮衣,老山羊还找给狐狸5元钱,那么你知道老山羊损失了多少元钱吗?50
3、24人排成一排,一、二报数,报二的人向前走两步,问:原地不动的人有几个?12个
4、在巷子的一边有5盏灯,每两盏灯之间相隔8米,这条巷子有多长?32米
5、10辆车排成一队,从前往后数,黑色轿车是第6辆,那么,从后往前数,它在第几辆?答案:4
7、用1、2、3三个数字,可以写出多少个不同的三位数?6个
8、一个三位数,它的百位上的数是最大的一位数,个位上的数是十位上的数的2倍,这个数可能是(912)、(924)、(936)、(948)
9、一个四位数,最高位上的数是2,百位上的数是最高位上的数的一半,十位上的数是百位上的数的3倍,个位上的数与百位上的数相同,这个数是(2131)。
10、一个四位数,右边第一位数是3,第三位数是2,十位上的数字是百位上数字的3倍,这四个数字之和是13,这个四位数是多少?2623
11、小东有10元人民币,小华有16元人民币,小华给小东几元钱,两人的钱就同样多?答案:小华给小东3元
12、一根绳子两个头,三根半绳子有几个头?8个
13、二年级给一年级9本书后,两个年级的书就同样多。二年级的书原来比一年级多多少本?18本
14、两个工程队共有100人,如果从甲队调20人到乙队,两个工程队的人数就一样多。两个工程队原来各有多少人?甲70,乙30
(2)1、3、5、7、9、11、(13)、(15)、(17)。
(3)3、6、9、12、15、18、(21)、(24)、(27)。
16.甲、乙、丙三人站成一排照相,有(6)种排法?
17.(1)+(1)>(1)×(1)[括号里必须添相同的整数]
18.(2)+(2)=(2)×(2)[括号里必须添相同的整数]
《统一长度单位和理解厘米》由会员分享,可在线阅读,更多相关《统一长度单位和理解厘米(3页珍藏版)》请在人人文库网上搜索。
1、灵宝市第三小学导学案学科数 学班 级二( )执笔人 执教时间9月 日课 题统一长度单位和理解厘米内 容教科书第2页例1和例2 学 习 目 标1、要想得到相同的结果,应选用统一的长度单位实行测量。2、理解尺子,理解单位厘米,知道1厘米的大小. 会认厘米尺上的刻度。教 学重 点要想得到相同的结果,应选用统一的长度单位实行测量,量比较短的物体,用厘米作单位。教 学难 点 感知统一长度单位的必要性。教 具准 备直尺、图钉课 时安 排一课时教学过程 一、谈话导入,创设情景 1、 同学们我们每天都上数学课,数学课上我们都经常用到些什么? 教师根据学生的回答出示:课本、练习本、铅笔、铅笔盒等。 2、 我们每
2、天都用它,能够说是再熟悉不过了,不过你知道它们有多长吗?学生能够用自己喜欢的方法操作(能够用手比划,理解拃)3、介绍古代人测量的方法。(看书第2页上面) 二、动手操作,探究新知 1、我们先来量一量课桌的长与宽。 要求:用拃作单位测量学生测量,小组交流。 2、全班交流、汇报测量结果 (1)分组汇报,师板书结果。 (2)根据汇报的结果,你发现了什么?有什么疑问? (为什么大家量的都是课桌的长,而结果却不一样呢?) (3)小组讨论汇报。(测量的长度单位不一样。) 3、怎样才能测量出统一的长度呢?(采用统一的长度单位) 4、 小结: 要想得到相同的结果,应选用统一的长度单位实行测量。三、理解尺子和厘米
3、 1、理解尺子 尺子是一种测量长度的工具,请同学们拿出自己的直尺,仔细观察,你发现了什么? “0”表示起点,就像我们赛跑时都要从起点开始跑,那我们用尺子量物体长度时,也要从“0”开始量。 尺子上还有很多数字,这些数字都对着一根长的刻度线,所以数字几,我们就把它叫做刻度几,而且这些数字都是按顺序排列的。尺子长些,数字就多些;尺子短些,数字就少些。 2、理解、感受1厘米 (1)从0刻度到1刻度的距离就是1厘米,把你们食指摁在尺子上,你发现了什么呢? 请同学们找找,自己尺子上,还有哪些是1厘米的。 (从刻度2到3,或者3到4都是1厘米) (2)这说明了什么呢? 尺子上每相邻的两条长刻度线之间的一大格的长度都是1厘米。 (3)找出生活中接近1厘米的物品。3、理解几厘米 我们现在知道1厘米有多长了,那3厘米又有多长呢?4厘米呢? 四、畅谈收获 通过本节课的学习你有什么收获? 修改意见 统一长度单位和认识厘米 要想得到相同的结果,应选用统一的长度单位进行测量。