- 博客(52)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 完整渲染过程——从URL到页面
当用户输入一串URL（统一资源定位符）到完整的页面渲染出来，到底经历了什么呢~下面我来描述一下整个过程。 先列出他的大致流程：浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）；浏览器对加载到的数据进行解析，建立起相应的内部结构；载入解析到的资源文件，渲染页面，完成。我们主要分为两部分...
2017-10-06 10:52:17
4729
原创 JS——正则详解
文章内容摘自阮一峰大大—RegExp对象，总结一下方便自己记忆：1.正则匹配规则字面量字符串/dog/ 匹配 ‘dog’元字符:点字符（.） 匹配 除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。位置字符（^ / $） ^/$ 表示字符串开始/结束的位置选择符（|） 表示或关系，即cat|dog表示匹配cat或dog。选择符会
2017-10-03 20:19:25
5646
7
原创 解析webpack——模块化历史与webpack的诞生
本文将通过前端模块化发展历史引入webpack出现的原因，解决的问题，以及目前的困境。
2022-08-09 18:09:32
507
1
原创 leetcode基础-二叉树
本文主要总结了二叉树基础，以及遍历二叉树的常见方法，分别用递归和栈的方式实现前中后遍历，用深度和广度的方式实现层序遍历。还总结了一些常用的考察点，可以在其他复杂二叉树算法中起到辅助作用。......
2022-06-29 19:35:38
363
原创 三年经验前端面试小记
主要总结前两面基础问题，后面面试更多的是项目相关。字节三面一面基础题HTTPS? VS HTTP 知道哪些对称加密/非加密算法HTTPS 详细的SSL/TLS握手过程？React hooks理念， diff原理，为什么要key prop插入大量DOM节点，react 、 原生分别怎么处理，原生会用到哪些方法React使用Fragment，原生使用createDocumentFragmentJWT是什么，cookie细节模块化了解吗？AMD CMD CommonJS
2021-06-26 21:02:01
261
原创 解析浏览器渲染的“一帧”——事件循环、帧动画、空闲回调
目录概述eventLoop一帧可能执行多个taskrequestAnimationFramerequestIdleCallback掉帧与时间切片参考资料概述一般浏览器的刷新率为60HZ，即1秒钟刷新60次。1000ms / 60hz = 16.6 ，大概每过16.6ms浏览器会渲染一帧画面。在这段时间内，浏览器大体会做两件事：task与render。task被称为宏任务，包括 setTimeout，setInterval，setImmediate，postMessage，requestAnimati
2021-05-05 14:44:08
3617
原创 Location对象
Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。属性Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。Location.href整个URLLocation.protocolURL对应协议，最后有一个":"。Location.host域名，可能在该串最后带有一个":"并跟上URL的端口号。Location.hostname URL域名Locat
2021-03-06 13:20:19
106
原创 Scroll详解
➡️ = 只读↔️ = 可读可写（默认）ElementclientHeight ➡️clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.scrollHeight ➡️一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrol
2021-03-06 13:16:23
3078
原创 Mac卸载Xcode，IDE无法使用Git
需要单独安装CommandLineTools，并切换路径1.xcode-select --install # 单独安装CommandLineTools，不需要Xcode2.sudo xcode-select --switch /Library/Developer/CommandLineTools # 指定路径
2020-10-09 11:38:05
660
原创 Git 操作
常用操作git rm <file> 删除文件 (删除后要提交更改)git mv <file> <filename> 重命名文件git commit --amend -m ‘提交注释’ 修正上一次消息提交的注释git push --set-upstream origin <分支名> || git push -u origin <分支名> 向远程推送并创建该分支git fetchgit pull = git fetch + g
2020-09-25 10:32:26
183
原创 datePicker使用服务器时间，避免用户修改系统时间导致的bug
使用到的的技术栈：react + umi +antd +moment前因项目中一个表单包含时间组件datePicker，选取的时间范围为包括今天在内的15天。BUG：如果用户修改了当前系统时间，那么datePicker的今天就会同步变化，相应的选取范围也会变化期望：datePicker采用服务器时间（网络标准时间），不会因为客户端时间的修改而变化。解决过程首先如果你的网站使用了HTTP协议，那么在如果你修改时间超出数字证书的有效期，浏览器会自动禁止你的访问但是如果你更改的客户端时间在证书
2020-08-07 16:49:58
709
原创 经典算法解 · 最大子序合（贪心·分治·动态规划）
部分转载：LeetCode题解——————————————————题目：最大子序合给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。示例:输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释: 连续子数组 [4,-1,2,1]的和最大，为6。方法一：贪心算法使用单个数组作为输入来查找最大（或最小）元素（或总...
2019-12-26 14:16:21
334
原创 React-Native使用Nanohttpd实现跨平台互传文件
React-Native 局域网内文件传输小结我使用的技术栈是：react-native（0.56.0）+ react-navigation + react-redux + ant-design + axios我在做的ReactNative项目需要实现同一WIFI下跨平台互传文件功能，涉及原生模块的功能我实现这两个功能使用的库有@react-native-community/netin...
2019-11-27 16:48:16
872
原创 RN的几种嵌套滑动总结
RN的几种嵌套滑动总结安卓常用的几种嵌套滑动的组合：ScrollView嵌套WebViewScrollView需要高度才能渲染，直接嵌套会导致空白。通过插入js的方式，在载入WebView的时候先传回WebView高度，::动态设置高度::const BaseScript = ` (function () { var height = null; ...
2019-07-29 19:43:22
2436
原创 React-Native 扫码功能以及从相册读取二维码
我使用的技术栈是：react-native（0.57.8）+ react-navigation + react-redux + ant-design + axios我在做的ReactNative项目需要实现扫码功能以及从相册读取本地二维码的功能我实现这两个功能使用的插件有react-native-camerareact-native-image-pickerreact-native-...
2019-03-02 12:30:24
8410
12
原创 react-native 填坑集合
react-native巨坑，相关插件也巨坑，版本更新慢，维护不及时。我手头使用的是RN目前最新版本0.57.8，以下均为此版本环境下遇到的问题，在解决问题时配合开发调试方法，事半功倍。我使用的技术栈是：react-native（0.57.8）+ react-navigation + react-redux + ant-design + axios项目中使用的插件有react-nativ...
2019-02-27 14:11:18
593
原创 react-native 调试大法
react-native调试不友好，不像web端可以直接定位到具体组件，还可以选择相应的代码块。主要调试工具可以配合使用Android Studio，Chrome，终端，真机提示等，我用的IDE是VS Code，一般使用Developer Menu中的debug in remotely，根据打印在Chrome控制台的信息进行开发。这篇详细的关于Developer Menu的文章，比官网描述详细...
2019-02-27 14:03:57
947
原创 iview Form 表单验证小结
手头的项目有一个需求是创建自定义表单模板，深入使用了iview的Form控件，踩了不少iview的坑，同时也锻炼了validate相关的能力。基本知识 Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。 通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormI...
2018-09-19 15:55:38
23498
原创 vue中实现基础组件——拖拽组件
&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;div style=&quot;overflow:hidden&quot;&amp;gt; &amp;lt;div class=&quot;no-select&quot; v-for=&
2018-09-19 15:36:20
17562
6
原创 GOJS + VUE 流程图实现
前言及展示在项目中需要根据传过来的数据画出流程图，采用了GOJS插件，功能很全面，可以根据自己的需要调整，不过建议简单的流程图还是自己手写一个组件，更加便于维护和变换。有一点需要注意的是，GOJS是需要收费的，有水印，虽然可以手动去掉，但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子：Minimal GoJS Sample in Vue.js。推荐看一下，可以解决...
2018-08-21 16:32:25
49686
17
原创 常用HTTP返回码记录
记录常遇到的HTTP CODE百度百科相关304 Not Modified 如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。 该响应必须包含以下的头信息：Date，除非这个服务器没有时钟。假如没有时钟的服务器也遵守这些规...
2018-08-20 20:05:10
208
原创 有关浏览器缓存 200vs304
基本概念Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进...
2018-08-20 19:57:39
704
原创 关于Vue中nextTick()的思考
我的项目中有一个swiper插件，在vue实例created(生命周期相关)函数中，先用ajax异步加载数据，再初始化swiper轮播插件时，遇到了一个问题，由于动态数据加载导致了swiper初始化后会滑动到最后一个item。我当时的解决方法是用setTimeout()来延迟初始化，之后在学习es6的时候，我发现更好的解决办法是使用promise.then.但是，没有最后只有更好，promise.t
2017-10-27 16:55:53
2063
原创 JS——事件绑定与处理总结（上）
JavaScript与HTML之间的交互是通过事件实现的。事件是指文档或浏览器窗口发生的一些特定的交互瞬间，可以用监听器（或处理程序）来预定事件，以便在事件发生时执行相应的代码。——摘自《高程》 理解事件是实现良好交互的必要条件，本文旨在系统地总结事件相关知识。 (上)主要内容：理解事件流使用事件处理程序1.理解事件流 事件流描述的是从页面中接收事件的顺序。 首先你应该
2017-10-14 20:44:45
441
原创 移动端布局单位
移动端设备种类繁多，需要适配多种情况的响应式布局来保证美观的页面实现，先来解释容易弄混的多个名词。PPI 单位英寸像素数DPR 设备像素比： 设备像素 / CSS像素(某一方向上)DPI Dpi（每平方英寸像素数目）：图像细节程度的度量建议看一下知识小科普！像素英寸与DPI的那些事儿单位： - em em是相对长度单位。相对于当前对象内文本的font-size(即父元素
2017-10-06 20:31:42
1702
原创 如何更快地构建与渲染
在上一篇中，我详细描述了浏览器渲染的过程，那么，如何来提升渲染效率，使页面更快的加载完成呢。 我将这些方法分为几部分分别介绍。CSS部分1. 媒体类型和媒体查询 将CSS分割为片段，对于不同的浏览器，不同的终端，不同的阅读模式，应用不同的CSS样式表。如果将这些内容写到统一个文件中，浏览器需要下载并解析他们。所以我们应该将这些内容通过对link元素的media属性来指定：<head><link
2017-10-06 18:13:14
468
原创 基本包装类型
为了便于操作基本类型，ECMAScript提供了三个特殊的引用类型：Boolean、Number、String。 他们存在的意义是什么呢
2017-10-05 12:17:33
444
1
原创 菜鸟系列——forEach、map、for...in、for...of
作为一个前端菜鸟，有好多容易弄混的名词我想把搞清楚的一一记录下来，帮助记忆forEach、map、for...in、for...of这四个方法都是可以遍历数组或类数组的，很容易就懵了，必须总结一下他们的使用对象和区别，加以区分。首先，map()和forEach()是Array自带的方法，Map对象也有forEach()方法，而for...in和for...of是对数组/类数组元素进行for
2017-10-03 20:19:38
1057
原创 操作系统部分（持续更新中）
1.进程与线程进程是CPU资源分配的最小单位，是具有一定独立功能的程序。 线程是CPU调度的最小单位，基本上不拥有系统资源。 一个进程可以包含1+个线程。 进程与线程之间关系的简单解释：http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html2.几个基本概念临界区，互斥量，信号量，事件这些概念解释了线程间
2017-10-03 20:19:30
366
原创 笔试总结（HTTP(S)/虚拟内存/xhr）
同花顺的笔试完虐我这种渣渣，没有选择填空，只有问答和编程题，且大部分C++/JAVA,完全懵逼，陌陌的算法题60分，也懵到题目都搞不清楚完美世界的比较均衡，选择很基础，编程题也不难，只是我的编译一直不通过很伤下面总结一下不太清楚的知识点1.虚拟内存虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存（一个连续完整的地址空间），而实际上，它通常是被分隔成多个物理
2017-10-03 20:19:27
511
原创 JS Test（44道）总结
题目来自javascript-puzzlers1.reduce没有设置初始值的空数组使用reduce方法会抛出错误reduce的callback函数有四个参数，preValue，curValue，curValue-index，array，如果没有设定初始值，reduce开始时第一个值为preValue，第二个为curValue2.map&parseIntmap默认参数有两个
2017-10-03 20:19:19
318
原创 8月第四周
8.24zoom：1 的作用http://blog.csdn.net/u010313768/article/details/47067593根据这篇文章我又沿着问题链了解了很多关于清除浮动和IE的知识关于清除浮动，严格来说是闭合浮动，可以参考下文来了解：http://www.iyunlu.com/view/css-xhtml/55.html这篇文章详细描述了清除浮动的七种方法，这些方法
2017-10-03 20:19:17
512
原创 8月第三周
8.18will-change 属性The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimi
2017-10-03 20:19:14
321
原创 8月第二周
8.7vue-cli vue-router用法总结： 包含默认路由的地址写法，父子路由的嵌套，redirect重定向的使用，exact属性8.8vue练习解惑在methods中设置函数来修改class时，v-for渲染的动态数据组成的DOM节点不能被获取到但是在mounted中，所有的DOM挂在和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。vertical-al
2017-10-03 20:19:11
463
原创 8月第一周
7.31-1- 原生JS的轮播用惯了swiper，今天练习一下原生JS的轮播写法-2- Flex 的兼容性今天遇到了display:-webkit-box，搜索了一下发现是旧版的display:flex通常适应旧手机版本时会使用display:box来表示flexbox通过这个延伸出思考，mobile端和PC端的主要差异，目前根据我的实际开发经验可以了解到三点：Mobile端re
2017-10-03 20:19:08
422
原创 7月第三周
7.20vue中index的使用可以通过data中每个数组都有的一个参数（如isHide）来传递v-for内的参数，利用被选中项该参数值的唯一性（比如其他都为0，被选中为1），遍历后得到被选中值的index:nth-child(x)的用法x可以为整数，也可以为用n表示的表达式，还可以是even/oddx为表达式时，n=0,1,2...正整数如n+4表示大于等于4的正整数，-n+4
2017-10-03 20:19:06
187
原创 7月第二周
7.10Webview模式初识mui.fire()自定义事件dev.dcloud.net.cn/mui/event/7.11flexbox 弹性布局语法篇：www.ruanyifeng.com/blog/2015/07/flex-grammar.html实用篇：www.ruanyifeng.com/blog/2015/07/flex-examples.html详细的标准：www.w3.org/ht
2017-10-03 20:19:03
212
原创 7月第一周
7.5mui框架：init()和plusReady()7.6text-overflow:ellipsis 超出省略text-overflow:ellipsis 一般与overflow : hidden;连用结合-webkit-line-clamp可以限定文字最小行数，超出即用省略号替换注意：-webkit-line-clamp一定要与display: -webkit-box以及-webkit-bo
2017-10-03 20:19:00
180
原创 7月第四周
7.24CSS3 属性之 transform & translationtransform:transform属性translation:transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delayJQuer
2017-10-03 20:18:57
178
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人