web开发
Kousaka-Mayuri
学
展开
-
CSS Modules
相对于正常css加入了块级作用域和模块依赖 目的是为了保证某个组件的样式而不会影响其他组件的样式 使用webpack的css-loader插件来实现css modules 在webpack.config.js中配置css modules module.exports = { entry: __dirname + '/index.js', output: { publicPath: '/', filename: './bundle.js' }, module: { lo原创 2022-01-16 15:00:07 · 570 阅读 · 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 · 198 阅读 · 0 评论 -
cookie和session
cookie在客户端记录用户身份 session在服务器端记录用户身份 Cookie cookie是服务器端颁发的,保存在客户端。在时间到期之前,客户端可以通过请求带上cookie提交给服务器,以此让服务器辨认用户状态。 在控制台输入alert(document.cookie);可以看该网站颁发的cookie cookie有不可跨域名性,如其名,不能在A网站用B网站颁发的cookie进行身份验证 maxAge属性为有效期,通过getMaxAge()和setMaxAge()来读写属性 当该属性为负数时,有效期原创 2021-12-24 12:04:47 · 176 阅读 · 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 · 311 阅读 · 0 评论 -
强缓存和协商缓存
强缓存: 当浏览器去请求服务器资源时,服务器会在response header中设置该文件的缓存配置,时间和类型由服务器端控制。 例如: respone header 下的 cache-control 常见的设置是max-age public private no-cache no-store等 给资源设置一个过期时间,客户端每次请求时都会查看是否过期,过期则向服务器请求资源。这是给客户端自给自足使用的。 协商缓存: 发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是原创 2021-11-18 19:09:23 · 164 阅读 · 0 评论 -
防抖和节流
防抖 防止频繁的点击,设置一个定时器,每次点击清空计时,当计时结束后回调点击事件。是为了短时间多次点击只作用一次,不至于多次请求而使服务器负担加重。 function antiShake(fn){ var timer = null; return function(){ clearTimeout(timer);//点击后立即清空计时,重新计时 timer = setTimeout(()=>{ fn.call(this);//绑定回调函数的作用域 console.原创 2021-11-18 19:08:24 · 359 阅读 · 0 评论 -
进程与线程
进程 进程是启动一个程序时,操作系统会为其创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,这样的运行环境为进程。 单进程与多进程 单进程浏览器 单进程浏览器所有功能模块都是运行在同一个进程中,而这样会导致其不稳定、不流畅、不安全。 ● 不稳定:单进程很容易崩溃,导致全部功能失效,因为功能都绑定在一个进程上 ● 不流畅:当一个进程被阻塞,就会出现浏览器整体的卡顿 ● 不安全:通过C/C++写的插件可以对系统执行写入与读取,对信息造成危害 多进程浏览器 解决了不稳定、不流畅、不安全: ● 稳定:原创 2021-11-18 19:06:35 · 68 阅读 · 0 评论 -
浏览器网络
概念 FP(First Paint) 页面加载到首次开始绘制的时长,影响FP的因素很多,例如:网络加载速度 IP(Internet Protocol) 网络层协议,网络协议。计算机地址就是IP地址,访问网站实际上是主机对一台计算机(服务器)请求信息。当一台主机要向另一台主机发送请求时,在传输之前加上该主机的IP地址信息,这样在传输中才能正确寻址。 UDP(User Datagram Protocol) 传输层协议,用户数据包传输协议。UDP重要的信息是端口号,通过端口号可以把指定的数据包发送给指定的程序。原创 2021-11-18 19:04:42 · 170 阅读 · 0 评论 -
web网络缓存
Cookies 小型文本数据,每个web站点会为访问者产生一个唯一的ID,然后将其以cookie文件的形式保存在访问者的机器上。当浏览器下次访问web时,会查阅硬盘上的cookie。cookie是由key/value组成的文本文件,还有一个文件保存所有对应web站点信息。通过后者,可以查看哪些web站点放置了cookie。 web storage session 与cookie功能效果相同,存储在服务器。当向服务器访问某个网页时,会在服务器的内存里开辟一块,这块内存就会做session。当访问页面时,服务器原创 2021-11-18 18:59:03 · 814 阅读 · 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 · 384 阅读 · 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 · 87 阅读 · 0 评论