ztt8023的博客

Github password 2021年八月更改了验证方式，password不作为实际管理权限的验证，仅用于账号的登录，操作仓库需生成token,再配置token，即可操作；1.Vscode验证采取跳转网页登录获取验证值；2.Webstorm 需配置github token;VSC - Git - Clone - GitHub...

渲染流程： HTML,CSS,JavaScript 是如何变成页面的？构建 DOM 树输入：HTML 文档；处理：HTML 解析器解析；输出：DOM 数据解构。样式计算处理CSS 文本，属性值标准化，每个节点具体样式（继承、层叠），生成styleSheets(CSSOM)布局(DOM 树中元素位置)DOM & CSSOM 合并成渲染树；布局树（DOM 树中的可见元素）；布局计算。分层特定节点生成专用图层，生成一棵图层树；拥有层叠上下文属性（明确定位属性、透明属性、

//获取基于html文档真实位置function getElementTop(element){var actualTop=element.offsetTop;var current=element.offsetParent;while (current !== null){actualTop+=current.offsetTop;current=current.offsetParent;}return actualTop;}

浏览器从输入URL回车，到页面展示，都经历了什么？1，用户输入URL并回车2，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL；3，浏览器进程通过进程间通信（IPC）把url请求发送给网络进程,GET /index.html HTTP1.14，网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程5，如果没有，

按此场景，仅应用css我们无法知道image的宽度；虽然也可用js计算图片的宽度，在去给Description赋宽度值，但card很多的情况下，获取来的数据，每个都要计算，很消耗性能，最好是应用css解决此类问题，如下提供了css写法：.card{ .img { height: 150px; } imageDes{ width: 0; min-width: 100%; }}...

防止冒泡和捕获w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true当需要停止冒泡行为时，可以使用function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方

服务器状态码总结常见状态码一般为：200 – 服务器成功返回网页404 – 请求的网页不存在500 – 服务器错误下面是HTTP 状态码的完整列表1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。100（继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分101（切换协议）请求者已要求服务器切换协议，服务器已确...

css文字省略…1.单行文字实现:text-overflow: ellipsis;overflow: hidden;white-space: nowrap;2.多行文字实现(使用webkit内核浏览器与移动端，ie有兼容问题):overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line...

css书写顺序总结css书写一般遵从以下规则：1.Display & Flow (显示与流)2.Position (位置)3.Size (尺寸)4.Padding,Borders,Outline,Margins (填充，边缘，轮廓，边界)5.Typographic Styles (排版样式)6.Backgrounds (背景)7.Opacity,Cursors,Genera...

png图片优化webp页面背景等图片的尺寸都是很大的，png的尺寸一般是的100+kb，导致加载比较慢,需要优化；实现方案 ：转换之前的png先使用tinypng link 做一次压缩，再去转换；（为了减少转换次数，因为转换网站要排队比较慢）1.将png转换成webp，可以使用转换网站：https://cloudconvert.com/png-to-webp link2.在项目中判...