H5C3
冲压
eswang
这个作者很懒,什么都没留下…
展开
-
Web Component小记
前言前端组件化可以并不基于JS框架完成吗?本质上,JS完全可以做到,真正阻碍前端组件化的是另外两个小朋友,CSS和DOM。web componentWebComponent给出的解决思路是提供了对局部视图封装能⼒,可以让DOM、CSSOM和JavaScript运行在局部环境中,这样就使得局部的CSS和DOM不会影响到全局。这是一套技术的组合,包括自定义元素,shadow DOM和HTML模板,我们拿一段代码分析一下:<!DOCTYPE html><html lang="en"&g原创 2020-08-09 20:22:04 · 553 阅读 · 0 评论 -
最近10余篇文章的一篇汇总
前言这个月基本都是记录一下面试时的一些知识点,这里找自己记得不是很熟练的汇总一下。手写手写部分,掌握的不熟的主要有深拷贝,JSONP和event bus。function dcopy(obj){ let map = new WeakMap() let help = function(obj){ if(typeof obj!=='object' && type...原创 2020-03-31 10:41:23 · 189 阅读 · 0 评论 -
transform居中,二维码,事件委托,数组去重,webpack,domain、samesite和viewport
transform比top更适合进行居中今天看到一个回答说transform比top更适合居中操作的原理,主要有三个部分,一是transform可以生成新的合成层,合成层上有GPU加速,二是它的使用不会引起回流,三是top的动画处理是是以px为单位,但是transform的处理更加平滑,因为它的基本单位更小。首先对于第二点,因为transform会生成新的渲染层,并使用一种合成渲染的方式,讲渲...原创 2020-03-22 18:16:55 · 299 阅读 · 0 评论 -
WebAssembly,options, 一道this题,finally
WebAssembly看一下WebAssembly的来源,JIT的出现确实带来了可观的性能提升,但是受限于JS动态类型和运行时编译的特点,判断类型成为了限制JIT的一个重要因素。对此Mozilla提出了asm.js,通过注解和检测等手段确保强类型,减少JS依据上下文判断类型的损耗,优化机器码的解释过程。后来各家各户觉得Mozilla这思路挺好,于是联合起来,设定了WebAssembly,即一份...原创 2020-03-19 23:48:47 · 183 阅读 · 0 评论 -
再撸一梭子渐渐你该懂得知识
typeof原理JS底层存储变量会在机器码低位1-3位存储类型信息,typeof也是据此判断的,巧合的是null和object的这三位都是000,因此typeof null == typeof {} == ‘object’。Chrome80对SameSite的使用之前写过Chrome80更新,很重要的一点改动就是对sameSite的改动,之前samesite默认是使用none的,Chrome...原创 2020-03-18 23:53:02 · 624 阅读 · 0 评论 -
IFC,渲染层与合成层,Hidden_Class,Fiber,Node多进程等
IFCIFC的行框高度由它包含元素的最高高度来决定。在一个行内格式化上下文中,盒是一个接一个水平放置的,从包含块的顶部开始,同时这些盒之间的水平margin,border和padding都有效。创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。当inline-level box宽度大于父容器宽度时会...原创 2020-03-14 23:25:06 · 516 阅读 · 0 评论 -
每天写一点(单向数据流、观察者模式)
前言最近每天学的都是些查缺补漏的知识,深度一般广度到不少,因此用这样的方式做个每日总结感觉还不错,今天主要写三个东西,一个是偶然看到的易混点,一个是发布订阅模式与Vue的结合问题,还有就是一次nice的面试收获。怎么理解React没有实现数据双向绑定首先React不是一个MVVM框架,他只是一个View层的库,而View层的数据渲染,即简单的props和state,并不需要双向绑定也能满足基...原创 2020-03-14 00:50:37 · 221 阅读 · 0 评论 -
查缺补漏,下一个永远不会
为什么说DOM操作是昂贵的TCP字段和HTTP字段React怎么实现Vue的双向绑定Hooks的优点解决首屏渲染问题原创 2020-03-12 23:49:30 · 202 阅读 · 0 评论 -
简述一些概念:前端路由、按需加载、服务器推送
前言被问到的前端路由、按需加载、服务器推送,磕磕绊绊说出了点东西,细问下去就是一脸懵逼了,时间原因,先在这里纠纠错。路由简单的来说,要实现前端路由需要满足几个条件。首先,我们要做到URL改变的情况下不刷新界面,其次我们要做到如何在不刷新界面的状态下去检测到URL的改变。从Hash路由来说,因为锚点的存在,当我们去修改锚点后面的数据,页面本身并不会发生改变,因此也就不存在上面的第一个问题,...原创 2020-03-11 21:50:39 · 321 阅读 · 0 评论 -
一文带你看懂从URL输入到页面呈现发生了什么(下)
前言之前写过一篇关于这个经典面试题的,但是从拿到响应到渲染,包括重绘,我都没有详细的讲,这次我们就稍微认真的去了解一下这个过程。原创 2020-02-19 21:27:18 · 205 阅读 · 0 评论 -
Chrome80更新
前言水一篇,说说Chrome80Chrome 80这是Chrome近年来做出的最大改动,至少官方是这么说的。关于Chrome自身的更新,并没有感受到太多,放在最后讲讲,这里主要讲的是devtools的更新。let const可以重新声明了。let a = 2undefinedlet a = 1undefineda1WebAssembly的调试更新,详情source...原创 2020-02-10 19:31:41 · 2353 阅读 · 0 评论 -
一只小白对HTML与CSS的误解
博客建站的任务已经初步完成,部署的事先放在一边,觉得很有必要把前端知识过一遍,尤其是JS。今天买的脑残专属“head first html and css”到了,迫不及待的读起来,然而有些头痛,无法将今天所学更新,而且前端入门还是较为简单,争取花费三天时间将脑残入门系列吃透。全部经验会在这里分享,持续更新中~~~———————————————————————————————美丽的分割线挤出...原创 2019-05-15 23:05:00 · 187 阅读 · 0 评论 -
一文带你看懂BFC
前言BFC(块级上下文)是CSS学习过程必须要搞懂的一个点,浮动元素和绝对定位元素,非块级盒子的块级容器,以及overflow值不为"visiable"的块级盒子(如flex布局的直接子元素),都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。防止父元素高度塌陷看下面这个场景<!DOCTYPE html><html ...原创 2020-01-18 20:32:58 · 467 阅读 · 0 评论 -
一文带你看懂从URL输入到页面呈现发生了什么(上)
前言URL输入到页面呈现到底发生了什么呢?这怕是已经被问烂的问题了,其中涉及的内容或浅或深,可以说是非常经典了,这里我们盘点一下,给出个还算过得去的答案。从URL输入到响应首先,当我们输入了一个URL时,浏览器会生成请求行,主要有三个部分,请求方法,根路径以及HTTP版本,典型如:GET / HTTP/1.1请求之后呢,我们首先会去强缓存看有没有命中,有的话就不需要发送HTTP请求,关...原创 2020-01-18 18:13:48 · 339 阅读 · 0 评论 -
一文看懂浏览器存储
前言前面讲完了HTTP缓存,今天继续讲浏览器存储。Cookie明明有了HTTP缓存,那么多协议字段还没搞明白呢,为嘛H5又来了个WebStorage呢?其实它的出现主要是为了弥补使用 Cookie 作为本地存储的不足。那么首先我们要知道什么是cookie。...原创 2020-01-14 21:32:04 · 277 阅读 · 0 评论 -
一文看懂前端应该了解的HTTP缓存机制
前言最近有些标题党的嫌疑,但是我还是觉得这些前端相关的重要概念确实应该简洁明了的总结一下,也是对自己学习的负责吧。概念缓存,作为前端核心技术中非常重要但是却不那么直观的概念,一直以来其实处于一种边缘状态,有些前端同学甚至认为这完全是一个后端的概念,也有些人仅仅知道304,其他的就随缘了。显然这是不够的。缓存,又叫cache,首先关于缓存有什么作用大家应该都清楚,毕竟都缓存过视频。就前端来说...原创 2020-01-14 17:14:58 · 287 阅读 · 0 评论 -
精读CSS权威指南第四版(4)
前言雪停了,继续读书outline很少用到这个属性,可能还有小伙伴们都不知道,在padding外,border外还有个outline,我们称border为边框,而称outline为轮廓。渐变首先要明确的是,渐变得到的是图像。 background-image: linear-gradient(to right, #243, #2354e188);最简单的渐变,一个方向...原创 2020-01-08 21:04:24 · 1822 阅读 · 0 评论 -
精读CSS权威指南第四版(3)
前言大雪纷飞,继续读书。神奇的text-decoration做全局样式往往要把:a { text-decoration: none;}却很少有人真的认真取去学习这个属性,首先text-decoration是不被继承的,看这段:<div> <p> 123123sadw <strong>insdawh</stro...原创 2020-01-07 18:42:00 · 945 阅读 · 0 评论 -
精读CSS权威指南第四版(2)
前言今天主要看一些基础CSS系统知识,不会详谈,大家需要的自行搜索。关键字全局关键字:inherit initial unset,即继承父类,默认样式,以及前两个的综合模式(可继承则继承;不可继承则原始属性)。相对尺寸em和rem的区别,rem的r是相对于root node,其他如vw、vh以及ch(一个字符)。颜色RGB和RGBa表示法以及他们对应的十六进制表示。HSL是CSS3...原创 2020-01-06 15:52:17 · 313 阅读 · 0 评论 -
精读CSS权威指南第四版(1)
前言即使我们访问github已经很流畅了,可是使用git clone拷贝远程库时还是出奇的慢。有没有什么解决办法呢?当然这篇文章的重点还是CSS权威指南到手啦!开始精读之旅!proxy目前的方法还是需要自己的工具的,首先查看自己代理的本地端口,很简单放在你的工具上就会出现。然后设置git 地址git config --global http.https://github.com.pro...原创 2020-01-06 11:46:50 · 2440 阅读 · 0 评论 -
Three.js 学习总结
前言这两天博客停更,主要是没想到放假之前还真要开毫无意义的组会,更没想到是这么个毫无意义的组会要将25分钟。想想我在波兰科研摸鱼的三个月,这25分钟真令人头秃。Three.js选型由于后续涉及到一些基本的业务开发,我选择把React和Three结合起来使用,社区关于这个选项有一个热度很高的"react-three-fiber"的工程,最大的优势就是可以把每部分都当作dom节点来操作,虽然最...原创 2019-12-30 22:08:20 · 543 阅读 · 0 评论 -
6道简单的CSS问题
前言有些知识,就得用写作业的方法才能记的住。div居中最熟悉的flex布局,父组件使用flex布局,使用 justify-content: center; align-items: center;...原创 2019-12-22 23:23:12 · 125 阅读 · 0 评论 -
Oauth授权和session、cookie的讨论
前言Oauth现在是处理网站认证问题的一个非常好用的工具,或者成为标准,它在我们身边的使用几乎无处不在,这篇文章我们以GitHub为例,看一下Oauth授权过程,并把它集成到我们的应用当中去。关于如何获取Github的Oauth 这里就不多说了,之前也介绍过,其实都是大同小异,只不过国内的Oauth授权要求有点多而已。Oauth 流程模拟首先是跳转字段,这里拿一个授权过程举例:https...原创 2019-11-10 08:03:55 · 3357 阅读 · 0 评论 -
PWA 简介和个人看法
前言想起这个思路的缘由是在medium上看到很多关于PWA的文章,但是国内接受度似乎还不高,因此我也没太在意,看了下PWA的简洁,知道它的一些优点之后就没打算深入学习。直到今天看见一篇文章这样形容PWA:可以把它(PWA)理解为国外版的小程序这让我对PWA的实现产生了一定的兴趣。为什么这个问题的原因其实官网有详细的阐述,我这里用比较通俗的语言解释一下:首先我们要了解的是原生应用对...原创 2019-10-27 07:28:02 · 836 阅读 · 0 评论 -
CSS 那些你必须知道的知识 (字体,Auto)
前言对于前端开发,或许流畅是最需要关注的问题,但是美观也是你需要关注的一部分,包括移动端等适配,这部分实现的基石便是CSS技术。字体字体可能是前端萌新们最容易忽略的一点,平时写网页的时候就觉得找适合自己的个性化的字体就好啦,然而发现在别人电脑上你的网页显示的样子和你想得完全不一样。这时候你开始怀疑一切似乎没那么简单,于是你开始学会了@font-face,于是你知道了去看别人网站的font-f...原创 2019-10-26 04:42:06 · 1093 阅读 · 0 评论 -
一文带你了解初学者应该知道的关于Sass的一切
你可能学过Vue,可能学过React或者Angular,可能用过element,可能用过nx等生成全栈式的脚手架工具,那么下面几段代码你可能很熟悉:// Vue-cli? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ...原创 2019-10-11 21:54:23 · 739 阅读 · 0 评论 -
H5C3学习笔记(5)
3D3D就不多说了说一下坐标系吧,刚开始写还是会混的:X右为正;Y下为正;Z外是正。我个人的话总是把外是正给记错,,,3D位移首先看移动,老规律,贴demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>class8...原创 2019-09-24 07:27:09 · 196 阅读 · 0 评论 -
H5C3学习笔记(4)
目录2D平移2D旋转动画2D平移老样子,看demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>class5</title> <style> div:nth-child(1)...原创 2019-09-24 02:13:54 · 151 阅读 · 0 评论 -
H5C3学习笔记(3)
目录属性选择器结构伪类选择器伪元素选择器属性选择器先看一段demo:<!--@Date: 2019/9/22 13:50 @Author: Asen Wang@Contact Email: taiyangdexingxing@gmail.com@content:--><!DOCTYPE html><html lang="en"&...原创 2019-09-23 02:10:16 · 227 阅读 · 0 评论 -
H5C3学习笔记(2)
语义标签顾名思义,之前我们写的:<div class="header"></div>现在我们完全可以用:<header></header>来代替,H5新增了六种语义标签:header, nav, article, section, aside, footer:这种写法有什么好处呢,其实这种方式主要是针对搜索引擎的,可以...原创 2019-09-22 16:25:52 · 179 阅读 · 0 评论 -
H5C3学习笔记(1)
其实学HTML5和CSS3,我也是没想到的。原以为自己更喜欢Python,后来觉得JS也很好,原来以为前端界面枯燥无聊,后来觉得能做出漂亮的界面真有意思,原来以为简单的用用Vue就好了,后来发现我前端学的东西似乎比后端多多了,像现在我也没搞明白啥是大数据,却能对SSR说个头头是道。HTML5和CSS是绕不开的,以前只会简单的div,一些简单的CSS,有时候为了记住这些简单的指令甚至去写博客...原创 2019-09-22 01:35:23 · 342 阅读 · 0 评论