CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

03 为什么很多网站第二次打开速度会很快

03 为什么很多网站第二次打开速度会很快 主要原因是第一次加载页面过程中，缓存了一些耗时的数据 1、DNS缓存：在浏览器本地把对应的IP和域名关联起来 2、同源站点可以复用渲染进程，同时HTTP/1.1 后TCP连接都是默认长连接，节省了建立连接的时间 3、浏览器页面资源缓存 请求一次资源后，只要Cache-Control:Max-age=2000设置的缓存时间还没有过期，如...

Posted by CodingWithAlice on April 8, 2021

03 http请求流程

03 HTTP请求流程 构建请求需要 DNS域名解析后的 ip -> 本文涉及的图文都有误，具体流程查看 导航流程 的【URL 请求流程】部分 HTTP协议：一种允许浏览器向服务器获取资源的协议，是Web的基础。 问：在浏览器地址栏中输入链接，浏览器会做什么呢？ 答：参考如下 HTTP请求示意图 1. 构建请求 首先，浏览器构建请求行信息 GET /index.h...

Posted by CodingWithAlice on April 8, 2021

02 网络协议 - IP/UDP/TCP协议

02 网络协议 - IP/UDP/TCP协议 性能指标：首次渲染时长FP（从页面加载到首次开始绘制的时长） 影响FP的重要因素：网络加载速度 —> 优化速度首先要了解网络协议：HTTP/WebSocket都是基于TCP/IP协议 —> 互联网中的数据是通过数据包来传输的。数据发送的数据很大，通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大概率丢失或者出错。...

Posted by CodingWithAlice on April 7, 2021

浏览器原理 知识图谱

浏览器原理 知识图谱 了解 URL 是怎么变成页面的？ 一、浏览器的5个核心部分 1、浏览器架构设计：每个页面都是独立运行在一个进程里面的 2、js引擎 3、页面工作原理 页面中事件循环系统是如何运作的？ 构建页面的核心流程是什么？（性能问题） 4、浏览器网络 5、浏览器安全

Posted by CodingWithAlice on April 6, 2021

01 浏览器进程

01 浏览器进程组成 + 复用渲染进程 + 进程/线程 总结： 多进程浏览器：包括1个浏览器（Browser）主进程、1个 GPU 进程、1个网络进程、多个渲染进程和多个插件进程 默认情况下，Chrome会为每个Tab标签创建一个渲染进程。（同源：同协议、同域名、同端口『相同站点，复用进程』） 进程适合用于需要独立运行和资源隔离的场...

Posted by CodingWithAlice on April 6, 2021

background属性的使用

background属性的使用 写在前面，这篇主题是结合开发中遇到的问题，对backgroud样式进行一个系统了解学习 （虽然css一向不是我在开发中关注的重点，但是当我跳了几次坑之后，我觉得有必要整理复习一下，以后再也不想跳坑了） 如果你对这个属性非常之了解，可以出门左拐不送哟～ 结论 推荐使用写法 background: url('http://...') no-repeat 0...

Posted by CodingWithAlice on February 4, 2021

怎么写一个大转盘抽奖

怎么写一个大转盘抽奖 方案一依赖于前后端数据的一致性，如果奖品池的商品有变化，需要 UI + 前端 + 后端 整条链路都进行后续修改，强力推荐方案二 方案一：UI给定背景图，和后端约定id html 部分：转盘背景需要用 rotateStyle 变量的变化来实现转动 <div class="circle-wrap"> <div class="circle" :...

Posted by CodingWithAlice on February 3, 2021

Vue 父子组件通信的几种方式

Vue 父子组件通信的几种方式 场景：子组件中的方法在子组件中并没有调用，而是在父组件中使用 ref 调用子组件的方法；这是一种不怎么常见的父子组件通信，所以趁此机会，整理一下所有的父子组件通信，涨下见识 参考： 问题出现原因： ​ 不够了解多种形式：如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 pro...

Posted by CodingWithAlice on October 30, 2020

层叠上下文

层叠上下文 场景：运营自主设置热区的时候，不管热区设置多大，都不会影响下方商品的跳转链接；研究发现是热区的区块，显示在商品下方 参考：长安曹公子的掘金（参考了下方作者的文章） 张鑫旭写的层叠上下文+层叠等级 总结： 1、首先先看要比较的两个元素是否处于同一个层叠上下文中： ​ 1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。 ​ 1....

Posted by CodingWithAlice on October 27, 2020

对象分类、Promise按序执行、实现map

对象分类、Promise按序执行、实现map // 两个参数：归并函数，归并起点初始值 arr.reduce(callback(), initialValue); callback(prev, cur[, curIndex[, array]]); 注意：第一次执行时， pre 和 cur 的取值有两种情况： 如果提供了initialValue，pre 取值为 in...

Posted by CodingWithAlice on July 7, 2020

FEATURED TAGS
《JavaScript高级程序设计4》 < JS原生基础相关 > < 算法题 > < vue相关知识点 > < CSS相关内容 > < HTTP相关 > < 面试题整理 > < 浏览器原理 > < 工作经验沉淀 > < 小程序 > < webpack > < 工程化 > < database > < 重构2 > < React17+TS4 > < node > < AI >
ABOUT ME

CodingWithAlice

✉️ hao_ling@foxmail.com

FRIENDS