来跟我玩个游戏吧~
dd71236f3cb77f11acf8f54e1793814c37dbc9ad88ea683b923a1081e89a7bf067ab4840291a3649ae8e84c4a9c41d09a41515cf3233488f60ab26c81958817b
有东西被加密了, 请输入密码(夸奖博主)才能查看.
移动端适配方案总结
移动端适配·
前言：最近公司官网项目需要做移动端适配，所以借此机会对移动端的适配方案进行调研。本期分享内容主要包括一下几点：
我们为什么要做适配？
这里涉及适配的前置概念：例如像素、dpr等
如何适配？
都有哪些适配方案？
它们是如何工作的？
对不同的项目需求，我们做技术评审时如何选择合适的方案？
1、前置知识·
1.1 尺寸、像素·
英寸：·
描述屏幕尺寸的物理单位，且是屏幕对角线的长度
英寸和厘米的换算单位是：1英寸 = 2.54厘米
像素：·
具有特定的位置和颜色的小方块，而图片、电子屏幕是由无数个像素拼接而成的
可以说，作为图片或电子屏幕的最小组成单位
1.2 分辨率·
1.2.1 屏幕分辨率：·
指一个屏幕具体由多少个像素点组成，比如：iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。这表示手机分别在垂直和水平上所具有的像素点数。
分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。这是很好理解的嘛~必须以用一尺寸在有比较的意义
1.2.2 图像分辨率：·
是指图片含有的像素数 ...
CSS tricks-2
开发中的CSS tricks-2·
1、100vw横向滚动条：·
100vw的问题：·
在容器宽度设置为100vw，高度很小时：没有滚动条，任意调整窗口
<div class="wrapper">testContent</div>* {padding: 0;margin: 0;}.wrapper { width: 100vw; height: 50px;}
在容器宽度设置为100vw，高度很大时，内容不能完整显示出来：横向、纵向都出现了滚动条
为什么纵向内容超出了，横向也会受影响呢？
https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one/23367686#23367686
纵向滚动条是占用浏览器宽度的
为了让宽度为 100vw 的元素的最右边能完整的展示出来，浏览器会展示一个横向滚动条让用户滚动看到最右侧内容
<div ...
功能实现trick1
开发中的功能实现trick·
滚动吸顶的实现·
1.1 功能及分析：·
滚动过程中，滚至对应区域，对应nav高亮显示；
所以，要记录页面滚动的高度，这样切换到对应高度区间时，通知该区间对应的子项，激活显示，so，这里还涉及消息传递；
点击nav中的子项，跳转至该区域
相反的，知道了子项，可以得到对应高度区间，再scroll到该区间的左值即可
1.2 自定义Hook：useWindowScroll·
拿到每一帧中滚动的位置；
import { isClient } from '../utils/common';export default useWindowScroll = () => { const frame = useRef(0); const [state, setState] = useState({ x: isClient ? window.scrollX : 0, y: isClient ? window.scrollY : 0, }); useEffect ...
CSS tricks-1
开发中的CSS tricks-1·
1、hover悬浮效果·
.item:hover { z-index: 2; transition: 0.2s; box-shadow: 1px 1px 12px 12px #00000010;}
2、混入实现原生CSS读取·
背景色，采用混入的方式：
原本：Background-image: url()
配置混入：
@function appendHost($path) { @return $host + $path;}// 将url带上host@mixin backgroundImg($path) { background-image: url(appendHost($path));}
使用混入：
@include backgroundImg('/componentStatic/danceCard.png');
写行内样式的bg：
style={{backgroundImage: 'ur ...
antd-数据展示
antd之数据展示类·
记录一下实际开发中用到的一些有意思的组件及遇到问题解决
文档：https://ant.design/docs/spec/data-display-cn#%E6%A0%91%E5%BD%A2%E6%8E%A7%E4%BB%B6%EF%BC%88Tree%EF%BC%89
分类总结下遇到的组件，遇到再更新
Tree·
『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性
用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。
基本使用：·
<Tree defaultExpandedKeys={['0-0-0', '0-0-1']} defaultSelectedKeys={['0-0-0', '0-0-1']} defaultCheckedKeys={['0-0-0', '0-0-1' ...
前后端链路的性能优化
全链路的性能优化整合·
前言：
前面的过程中，我们零零散散地提到了性能优化做的事情，恰巧内网最近一篇文章写的不错，仔细学习了下作者的微信公众号文章。但我不打算把他的文本简单copy一遍，因为自己最近刚刚做过相关的事，所以，更多的想结合自己的理解和其他资料学习总结一下
在介绍知识之前，我们需要交代一下背景。如果现在给你一个现成的项目要求做性能优化，你会怎么下手呢？这种感觉就好像，你要去体检，那么知道你哪里好，哪儿不好，不好需要吃什么药呢？开始之前，需要明确几点：
如何评价页面的性能好坏呢？
当然不是直觉，必须有数据指标支撑，这就需要一些工具的帮助
随后，问题就来了，如何使用各种性能相关工具？
这个过程中，肯定会涉及到很多指标，我们需要读懂指标的含义，针对其对应的表现优化，要有针对性的理解指标，就要需要浏览器的基本知识了。
页面是从哪里来的？又是怎么在浏览器上渲染出来的？
以上抛出的3个问题基本回答了：
浏览器的网络请求环节发生了什么？
页面渲染环节发生了什么？
两个环节的我们如何下手优化？
完整过程·
一、网络通信环节·
阶段0：用户输入·
我们在 ...
URL、URI
Url与URI都是啥？·
1、URL与URI·
URI：统一资源标识符
父类 表示请求服务器资源，定位这个资源
URL：统一资源定位符，常常被称为网址，是因特网上标准的资源地址
子类 而URL还要表示如何访问这个资源
通用的格式：scheme://host[:port]/path/…/?query#anchor
2、组成格式：·
https://www.aspxfans.com:8080/news/index.…
**协议：**访问服务器以获取资源时要使用哪种协议，比如：http，https 和 FTP 等后面一定接上://
**域名：**该URL的域名部分为“www.aspxfans.com”
**port：**跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。
端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
（HTTP协议默认端口是80，HTTPS协议默认端口是443）；
虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟 ...
CSR、SSR、ISR
SSR·
SSR是什么？·
SSR（Server Side Rendering），一种传统的渲染方式。与客户端渲染不同的是，SSR输出的是一个渲染完成的html，整个渲染过程是在服务器端进行的。例如传统的JSP，PHP都是服务端渲染
由于服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。
SSR如何工作的？·
SSR将一个完整的HTML发送给客户端，客户端只负责HTML的解析。只不过它会被网速，在线活跃人数，服务器的物理位置等等客观因素所约束造成用户体验不佳的情况。
而且如果面临客户端和服务器多次交互的情况就显得非常吃亏，即使在页面只是有稍加改动的地方都需要重新请求到一个完整页面并且重新进行渲染，对服务器的压力更大
假设你需要访问的域名叫： example.testsite.com.
<html> <head> <meta charset="utf-8"> <title>Example Website</title> ...
overflow与滚动
overflow与scroll·
overflow属性：·
overflow文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么，该属性有四个常用的值：
visible: 默认值。内容不会回修剪，可以呈现在元素框之外。
hidden: 如果内容超出父级容器，超出部分将会被隐藏
scroll: 无论是否超出容器，都会出现一个滚动条。
auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。
值得注意的是：
如果 overflow-x 与 overflow-y 的值相同，结果等同于 overflow；
如果 overflow-x 与 overflow-y 不同，且其中一个属性的值被赋予 visible，另外一个被赋予一个 非 visible 的值，第一个被赋予 visible 的值会自动变为 auto。
起作用的条件：·
父容器非 display:inline 水平
对应方位的尺寸限制，(width / he ...
帧动画-优化资源加载
雪碧图替换MP4播放