![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web开发
Kousaka-Mayuri
学
展开
-
CSS Modules
相对于正常css加入了块级作用域和模块依赖目的是为了保证某个组件的样式而不会影响其他组件的样式使用webpack的css-loader插件来实现css modules在webpack.config.js中配置css modulesmodule.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filename: './bundle.js' }, module: { lo原创 2022-01-16 15:00:07 · 587 阅读 · 1 评论 -
BFC知识
BFC Block Formatting context 块级格式化上下文为元素添加BFC属性,相当于元素变成了一块独立的渲染区域,不会受到外层元素的影响触发BFC● 根元素● 浮动元素● 绝对定位元素● overflow值不为visible的块元素● contain值为layout、content或paint元素● 多列容器(column-count或column-width不为auto,包括column-count为1)BFC的特性和作用避免外边距重叠外边距重叠现象:当两个相邻元原创 2021-12-26 16:16:41 · 211 阅读 · 0 评论 -
cookie和session
cookie在客户端记录用户身份session在服务器端记录用户身份Cookiecookie是服务器端颁发的,保存在客户端。在时间到期之前,客户端可以通过请求带上cookie提交给服务器,以此让服务器辨认用户状态。在控制台输入alert(document.cookie);可以看该网站颁发的cookiecookie有不可跨域名性,如其名,不能在A网站用B网站颁发的cookie进行身份验证maxAge属性为有效期,通过getMaxAge()和setMaxAge()来读写属性当该属性为负数时,有效期原创 2021-12-24 12:04:47 · 203 阅读 · 0 评论 -
数组扁平化、去重、排序
let a = [[1,2,3],[4],[5,6,[7,[8]]]];let result = [];let hash = {};function flat(arr){ for(let i = 0'i<arr.length;i++){ if(typeof arr[i] == 'number') { if(result.indexOf(arr[i])==-1)result.push(arr[i]);//去重 if(!hash[arr[i]]){ha原创 2021-12-24 12:02:05 · 317 阅读 · 0 评论 -
强缓存和协商缓存
强缓存:当浏览器去请求服务器资源时,服务器会在response header中设置该文件的缓存配置,时间和类型由服务器端控制。例如:respone header 下的cache-control常见的设置是max-age public private no-cache no-store等给资源设置一个过期时间,客户端每次请求时都会查看是否过期,过期则向服务器请求资源。这是给客户端自给自足使用的。协商缓存:发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是原创 2021-11-18 19:09:23 · 171 阅读 · 0 评论 -
防抖和节流
防抖防止频繁的点击,设置一个定时器,每次点击清空计时,当计时结束后回调点击事件。是为了短时间多次点击只作用一次,不至于多次请求而使服务器负担加重。function antiShake(fn){ var timer = null; return function(){ clearTimeout(timer);//点击后立即清空计时,重新计时 timer = setTimeout(()=>{ fn.call(this);//绑定回调函数的作用域 console.原创 2021-11-18 19:08:24 · 367 阅读 · 0 评论 -
进程与线程
进程进程是启动一个程序时,操作系统会为其创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,这样的运行环境为进程。单进程与多进程单进程浏览器单进程浏览器所有功能模块都是运行在同一个进程中,而这样会导致其不稳定、不流畅、不安全。● 不稳定:单进程很容易崩溃,导致全部功能失效,因为功能都绑定在一个进程上● 不流畅:当一个进程被阻塞,就会出现浏览器整体的卡顿● 不安全:通过C/C++写的插件可以对系统执行写入与读取,对信息造成危害多进程浏览器解决了不稳定、不流畅、不安全:● 稳定:原创 2021-11-18 19:06:35 · 73 阅读 · 0 评论 -
浏览器网络
概念FP(First Paint)页面加载到首次开始绘制的时长,影响FP的因素很多,例如:网络加载速度IP(Internet Protocol)网络层协议,网络协议。计算机地址就是IP地址,访问网站实际上是主机对一台计算机(服务器)请求信息。当一台主机要向另一台主机发送请求时,在传输之前加上该主机的IP地址信息,这样在传输中才能正确寻址。UDP(User Datagram Protocol)传输层协议,用户数据包传输协议。UDP重要的信息是端口号,通过端口号可以把指定的数据包发送给指定的程序。原创 2021-11-18 19:04:42 · 186 阅读 · 0 评论 -
web网络缓存
Cookies小型文本数据,每个web站点会为访问者产生一个唯一的ID,然后将其以cookie文件的形式保存在访问者的机器上。当浏览器下次访问web时,会查阅硬盘上的cookie。cookie是由key/value组成的文本文件,还有一个文件保存所有对应web站点信息。通过后者,可以查看哪些web站点放置了cookie。web storagesession与cookie功能效果相同,存储在服务器。当向服务器访问某个网页时,会在服务器的内存里开辟一块,这块内存就会做session。当访问页面时,服务器原创 2021-11-18 18:59:03 · 821 阅读 · 0 评论 -
浏览器渲染流程
CSS继承规则在DOM树中子节点会继承父节点的样式,例如body设置了font-size:20px,那么嵌套在其中的p标签就会继承body的CSS属性,隐式含有CSS中font-size:20px。CSS层叠规则记得填坑渲染流水线子阶段● 构建DOM树● 样式计算● 布局阶段● 分层● 绘制● 分块● 光栅化● 合成每个子阶段都有输入内容、处理过程、输出内容构建DOM树浏览器无法直接理解和使用HTML,所以需要将HTML转换为浏览器能够理解的结构——DOM树通过HTML标签原创 2021-11-17 12:40:26 · 391 阅读 · 0 评论 -
CSS构建
渲染流水线请求HTML文件-响应HTML文件-解析HTML构建DOM树-请求CSS文件-响应CSS文件-构建CSSOM树(即document.stylesheets)-执行JS代码继续构建DOM树-构建布局树-渲染CSSOM树CSSOM树有两个作用:● 提供给JS操作样式表的能力● 为布局树的合成提供基础的样式信息解析白屏在前一个页面提交数据之后跳转页面,渲染进程会创建一个空白页面,我们通常把这段时间称为解析白屏缩短白屏策略● 通过内联JS和CSS来避免下载这两种文件,获取HTML即可开始原创 2021-11-17 11:59:10 · 99 阅读 · 0 评论