
前端
雪落凡尘zz
这个作者很懒,什么都没留下…
展开
-
react原理
JSX:标签语法渲染逻辑与UI逻辑内在耦合UI绑定事件,状态变化更新到UI,在UI展示准备好的数据react组件首字母大写更加语义化,Dom标签小写React.createElement的语法糖;编译到<当作html来编译,编译到{}当作普通js代码编译react元素:react创建的普通对象,reactdom负责更新dom与react元素保持一致不可变对象(不能添加修改删除属性,不能修改已有属性的可枚举,可配置,可写性)嵌套Object.freeze状态更新16.3生命周原创 2021-04-06 23:12:52 · 509 阅读 · 1 评论 -
git增量校验代码
npm install pre-commit --save-devnpm instal husky --save-dev "husky": { "hooks": { "pre-commit": "npm run prettier && ./check-keyword.sh" } },check-keyword.sh#!/bin/bashred=`tput setaf 1`green=`tput setaf 2`reset=`tput sgr原创 2021-03-25 16:50:52 · 387 阅读 · 0 评论 -
cookie内容
Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"其中name=value是必选项,其它都是可选项。Cookie的主要构成如下:name:一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的。value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码domain:cookie对于哪原创 2020-08-15 20:54:00 · 1002 阅读 · 0 评论 -
redux
1.redux首先,用户发出 Action,然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action,Reducer 会返回新的 State ,State 一旦有变化,Store 就会调用监听函数,listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。...原创 2020-08-15 20:08:14 · 119 阅读 · 0 评论 -
mvc
m:(Model)是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。v:(view)是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。c:(controller)是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。mvvm加了viewmodel层是为了解析数据,将结果传给controller层...原创 2020-08-03 22:22:46 · 106 阅读 · 0 评论 -
CORS的两种请求方式
CORS是跨源资源分享,解决跨域的方法。JSONP只能发送get请求,CORS允许各种类型的请求。跨域:协议,域名,端口三者存在不同。请求有两种:1.简单请求请求方式为get post headhttp头信息不超出一下字段:Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content-Type2特殊请求对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是applicatio原创 2020-08-01 21:06:36 · 650 阅读 · 0 评论 -
vue路由的实现模式
路由:改变url但是不重新请求而刷新视图1.hash模式在url里面“#”后面的称为hash,用window.location.hash读取2.history模式history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致...原创 2020-08-01 19:12:53 · 219 阅读 · 0 评论 -
从浏览器输入URL到页面呈现经历了什么
1.查看缓存(浏览器缓存,系统缓存,路由器缓存),如果有直接访问2.如果没有,DNS服务器进行域名解析,解析成ip地址3.通过ip地址找到服务器,进行TCP链接,完成三次握手4.浏览器像服务器发送http请求5.服务器响应,将响应报文通过TCP发送回浏览器6.对响应进行解码,根据资源类型决定如何处理7.如果是HTML文档,则构建DOM树,下载CSS,JS资源,构建渲染树,布局,绘制...原创 2020-07-31 00:00:12 · 176 阅读 · 0 评论 -
web安全
1.CSRF :(Cross-site request forgery)跨站请求伪造原理:假设用户A登录了www.zz.com,用户A可以评论某个博客。攻击者准备一个页面www.yy.com,若不小心点击此页面则会恶意评论。利用cookie,冒充用户真实发送请求,但获取不到cookie(同源策略)防范:方法一、Token 验证:(用的最多)(1)服务器发送给客户端一个token;(2)客户端提交的表单中带着这个token。(3)如果这个 token 不合法,那么服务器拒绝这个请求。2.xss原创 2020-07-30 23:40:46 · 473 阅读 · 0 评论 -
webpack打包优化
https://www.jianshu.com/p/e4c1a9c40a2e原创 2020-07-30 16:04:09 · 150 阅读 · 0 评论 -
DOM渲染流程
Safari和Chrome都使用webkit,Webkit是一款开源渲染引擎dom渲染流程:1、浏览器解析html源码,然后创建一个DOM树。在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。2、浏览器解析CSS代码,计算出最终的样式数据。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外联样式,内联样原创 2020-07-29 16:40:45 · 1587 阅读 · 0 评论 -
强缓存与协商缓存
强制缓存:当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制1.cache-control: max-age=xxxx,public客户端和代理服务器都可以缓存该资源;客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,如果用户做了刷新操作,就向服务器发起http请求2.cache-control: max-age=xxxx,private只让客户端可以缓存该资源;代理原创 2020-07-29 16:21:13 · 280 阅读 · 0 评论 -
同源策略
概念:协议域名端口一致同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如何跨域?前端向发送请求,经过代理,请求需要的服务器资源缺点:需要额外的代理服务器...原创 2020-07-27 22:00:30 · 79 阅读 · 0 评论 -
GET和POST的区别
get参数通过url传递,post放在request body中。get请求在url中传递的参数是有长度限制的,而post没有。get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。get请求参数会被完整保留在浏览历史记录里,而post中的参数不会被保留。GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。GET产生一个TCP数据包;POST产生两个TCP数据包。...原创 2020-07-19 21:36:24 · 117 阅读 · 0 评论 -
js 实现深拷贝
js中 =号传递的都是对象/数组的引用function deepClone(obj){ let cloneObj = Array.isArray(obj) ? []:{}; if(obj && typeof obj ==="object"){ for(var key in obj){ if(obj.hasOwnProperty(key)){ if(obj[key] && typeof o原创 2020-07-19 18:03:10 · 119 阅读 · 0 评论 -
react 性能优化
减少子组件渲染当 父组件 state 内的某个值(eg:value) 不变时 子组件菜 rendershouldComponentUpdate(nextProps, nextState){// 当父组件传递到子组件的值不同时 子组件才渲染return nextProps.value !== this.props.value;}2.render里面尽量减少新建变量和函数<Foo style={{ color:“red” }}const fooStyle = { color: “red.原创 2020-06-04 09:43:41 · 195 阅读 · 0 评论