自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(65)
  • 收藏
  • 关注

原创 flex语法与布局

Flex语法FlexFlex作CSS3加入的弹性盒子。.box{ display:flex display:inline-flex display:-webkit-flex /*Safari Chrome*/}Flex的属性flex-flowflex-flow:<flex-direction>||<flex-wrap>例子:flex-flo...

2020-03-19 22:41:18 157

原创 2020前端实习生面经

前言末流985大三前端。一月份放假开始自学前端两个月。记录下实习的面试。加粗部分是回答不好的地方。蓦然认知一面2020.3.1757min面试体验很棒,幸运通过,二面加油!!!自我介绍原型链手写原型链继承手写bind方法事件循环机制数组去重冒泡排序8. 手写双向绑定9. 观察者模式手写防抖HTTP状态码12. 表单能不能跨域?BFC水平垂直居中...

2020-03-17 17:43:07 457

原创 关于移动端适配

视图meta viewport<meta name = "viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1,user-scalable=0">属性含义移动端会将980px的PC端网页自行缩放导致边缘留白或者是字体过小。属性含义wi...

2020-03-15 17:05:24 286

原创 玩具一

圆形可点击区域

2020-03-14 16:25:52 152

原创 2020春招美团笔试题

写在前面楼主大三,春招实习。总结一下笔试的错题。有错误望指正,感激不尽。问答题this指针的绑定var name = 'global';var obj = { name: 'local', foo: function(){ this.name = 'foo'; }.bind(window)};var bar = new obj.foo()...

2020-03-13 12:38:38 5132

原创 前端安全性

XSS攻击存储型XSS反射型XSSDOM型XSS

2020-03-12 12:39:08 154

原创 常见的浏览器兼容问题

HTML的兼容问题H5新标签在IE9以下的浏览器不兼容解决方法:从外引入HTML<!--[if It IE 9]><script src="html5shiv.js"></script><![endif]-->CSS的兼容性问题部分浏览器中img中存在空隙解决方法使用float为img布局最小高度不生效min-height...

2020-03-11 17:00:48 134

原创 模块化

模块化在模块中实现特定业务逻辑或特定功能。模块类似于JAVA的包进行导入导出,即插即用。AMD——Require.js异步模块化定义(Asynchronous Module Definition)主要实现为RequireJS前置依赖、提前执行、异步定义解决依赖问题解决JS脚本单线程等待的问题// 定义模块 myModule.jsdefine(['dependency'], f...

2020-03-08 10:58:00 118

原创 IP地址

IP地址的分类IP地址:<网络号>+<主机号>分类地址子网掩码A255.0.0.0B255.255.0.0C255.255.255.0DE问题一:如何判断是同一个网段的?将IP地址与子网掩码相与,然后对结果进行比较。问题二:如何判断是否为国内IP?根据IP地址分块。ARP协议地址解析协议将同...

2020-03-07 16:39:02 734

原创 OSI七层模型与TCP/IP四层模型

TCP/IP四层模型、OSI七层模型TCP/IP四层网络模型TCP/IP网络模型对应协议应用层DNS、HTTP、FTP、SMTP传输层TCP、UDP网络层IP、ARP数据链路层/网络接口层EthernetOSI七层中各层的作用应用层:直面用户提供服务,如邮件/文件传输。表示层:统一发送接收两方的应用层信息格式一致。如:ASCI...

2020-03-07 16:19:22 251

原创 CDN

CDN的作用和原理?CDN理解CDN(Content Delivery Network)内容分发网络。在用户和网站间添加一层“缓存”,网站将信息发布到用户周围,用户可快速访问网站内容。解决网络带宽小、用户访问量大、网站分布不均的问题。CDN原理/过程传统访问CDN访问CDN的调度内部通过算法对请求节点分配,并在本地的CDN服务器保存,以备后续的使用。CNAMECanoni...

2020-03-07 16:19:02 2213

原创 浏览器渲染

浏览器渲染解析HTML代码,生成DOM树每一个html标签均为DOM的节点解析CSS代码,生成CSS树将DOM树和CSSOM树合并形成render tree

2020-03-05 22:07:40 108

原创 前端性能优化

如何做到前端性能优化减少HTTP请求合理设置浏览器的缓存合并CSS的图片(CSS雪碧图/精灵图)优化加载资源使用CDN优化静态资源静态资源合并压缩前端资源打包使用webpack等打包工具将Js文件、CSS文件进行打包处理渲染优化CSS放在head区,Js放在body后减少DOM操作,添加事件委托。事件节流图片懒加载不使用iframe...

2020-03-05 22:02:38 342

原创 Vue声明周期与其事件

声明周期分析new Vue()新建Vue的实例,调用Vue.prototype._init函数beforeCreate之前:初始化事件、生命周期和渲染函数,并调用callHook(vm,'beforeCreate')调用钩子函数。created之前:初始化注入,初始化数据,初始化校验,调用callHook(vm,'create')Vue.prototype._init = functi...

2020-03-05 14:08:31 200

原创 跨域

同源策略浏览器处于安全考虑,只允许相同协议,相同域名,相同端口之间的进程才能发起Ajax请求。CORSCross-Origin-Resourse-Sharing跨域资源共享JSONP填充式JSON利用<script>没有同源策略的限制,通过<script>指向要访问的地址,并提供回调函数来接受通讯。Nginx代理H5新增PostMessagedocume...

2020-03-05 10:41:22 189

原创 关于进程那些事

提高并发量多进程、多线程、IO多路复用进程VS线程根本区别进程是操作系统资源分配的根本单位线程是任务调度和执行的基本单位开销进程有独立代码和数据空间,切换开销较大线程是轻量级进程,共享代码和数据空间。但有自己的运行栈和程序计数器,切换开销较小。所处环境操作系统中可多个进程共同执行,一个进程中可多个线程共同执行。(CPU调度,每个时间片只有一个线程)内存分配...

2020-03-05 09:36:51 113

原创 Webpack的一些问题

谈谈webpackwebpack是一个Js的模块打包程序。通过入口文件找到每个文件的依赖,使用loaders进行处理,最后得到Js文件。与glup和grunt的区别在于模块化(AMD,CommonJ)webpack的核心入口entry所有文件的起点,构建依赖图的开始出口output打包完成的Js文件。加载器loader打包时解析非JS的文件插件plugin存在整个打包周期中...

2020-03-04 23:01:21 168

原创 JavaScript面试篇

typeof可以判断几种类型如何判断是一个数组如何判断是空对象正则判断电话号码正则将英文中除首句外的英文小写如何渲染后台的html片段innerText和innerHtml的区别谈谈fetch如何冻结对象如何找到内存泄露的位置Number()的存储空间?如何做到大数相乘?...

2020-03-04 15:26:52 169

原创 一些Js的手写

手写Object.create()

2020-03-03 21:44:07 233

原创 WebWorker

概述Js本身单线程执行,对于一部处理使用事件循环,但H5新增WebWorker允许多线程。Js主线程创建Worker子线程,允许在后台运行。主线程和worker线程互不影响。对于计算密集型任务交予worker执行,不会阻塞更为流畅。注意点:worker线程和主线程同源worker的全局对象与主线程不一致,无法读取DOM对象。worker和主线程通信限制,不在一个上下文执行环境,需要通...

2020-03-03 12:36:42 151

原创 CSS3新增

新增选择器边框border-radius用于添加圆角边框border-shadow边框阴影border-image边框图片背景background-size规定背景大小,长/宽background-origin规定背景区域content-box,padding-box,border-box文字text-shadow文字阴影@font-face外部引入,改...

2020-03-03 12:06:19 88

原创 Js的的运行机制

Js单线程浏览器脚本语言,用于和用户互动,操作DOM。若是多线程将会复杂,一个DOM节点写入,另一个删除,将会产生混乱。Js单线程实现异步Js异步的原因,防止"卡住"同步与异步的例子console.log(1)setTimeout(()=>{console.log(2)})console.log(3)//1,3,2其中setTimeout()也就是异步代码常见的异...

2020-03-02 22:33:44 297

原创 Js一些问题

async和defer的区别都是<script>的可选属性,针对外部脚本纯<script>渲染DOM树时阻塞,等script加载完成和执行后继续渲染async异步加载,加载完成后立即执行defer异步加载,加载完成后不立即执行,等DOM渲染完成后执行常见数组API判断数组类型isArray(),instanceof,Object.prototyp...

2020-03-02 17:58:07 106

原创 常见响应式布局

三栏布局流体布局左侧和右侧固定宽度,中间自适应 <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> ...

2020-03-02 12:43:37 836

原创 BFC和IFC

BFCBFC概念格式化上下文,由浮动元素创建一个封闭环境,封闭环境与外界互不影响BFC的创建float:left|rightoverflow:hidden|auto|scrollposition:absolute|fixeddisplay:flex|inline-boxBFC的特性可清除浮动和高度坍塌解决外边距折叠的问题封闭,内外无影响BFC的作用1. 清除浮动...

2020-03-02 11:47:22 154

原创 WebSocket

WebSocket介绍H5新增,建立一个基于单个TCP的持久化全双工通讯协议WebSocket核心HTTP字段中Upgrade: websocketConnection: UpgradeWebSocket创建var websocket = new WebSocket(url,[protocal])WebSocket属性和方法readyState属性readyState...

2020-03-02 10:16:26 710

原创 WebStroage

Cookiecookie简介cookie是一个小文本文件,用于客户端和服务器通信时保存客户端状态。cookie弊端cookie在不同浏览器中数目限制不一样,IE6以下限制cookie20个,IE7以上和firefox浏览器限制50个,Safari和Chrome没有数目限制过多使用cookie会造成资源浪费安全性问题,cookie会被人截获,截获者不需破译即可利用客户端状态。(解决方...

2020-03-02 09:38:50 178

原创 HTML常见问题

HTML语义化解释:用正确的标签做正确的事作用:对人,增强可读性,便于开发人员理解网页内容和样式对机器,利于SEO和网络爬虫爬取信息,利于读屏软件常见语义化标签<p>,<header>,<address>,<footer>移动端<meta viewport><meta name="viewport" co...

2020-03-02 09:33:35 345

原创 CSS的一些问题

position属性position表现inherit子元素继承父元素static元素默认位置fixed元素相对于浏览器文档位置absolue元素相对于外层第一个父元素的位置relative元素相对于正常位置的偏移区分单位px绝对大小,像素,相对于浏览器的分辨率em相对大小,继承自父元素,相对于父元素的大小remCSS3引...

2020-03-01 22:54:17 112

原创 DOM的重绘和重排

为什么操作DOM速度慢浏览器中JavaScript和DOM分开执行Chrome中Js由V8引擎执行,DOM由Webkit内核的WebCore渲染Safari中Js由JavaScriptCore渲染,DOM由Webkit内核的WebCore渲染回流一定重绘,重绘不一定回流回流浏览器流式布局,DOM节点树形结构,一个节点改变,整个DOM结构重新计算,引发回流。触发条件:首次渲染改变...

2020-03-01 21:34:28 533

原创 SSL/TLS

HTTP的风险窃听篡改冒充HTTPSHTTPS运行在SSL/TLS协议上,使用加密认证机制,端口为443优势所在加密传输校验机制证书认证SSL/TLS加密过程基本思路采用公钥加密,客户端向服务器所要公钥,用公钥加密信息,服务器通过私钥解密。疑问公钥的保证:使用可信的数字证书数字证书数字证书中将认证使用hash算法得到摘要,使用公钥对摘要加密。接收...

2020-03-01 21:14:30 167

原创 HTTP,HTTPS

HTTP常见状态码号码类别1XX请求正在处理2XX请求正常处理完毕3XX重定向4XX客户端错误5XX服务器错误2XX状态码信息头表示200OK正确响应202Accepted异步请求,不实时处理204Not Content不返回报文信息(Ajax)206Partial大型二进制...

2020-03-01 20:08:52 134

原创 详谈DNS解析

DNS是什么DNS是因特网提供的服务,查询域名和IP地址映射的分布式数据库将域名还原为IP地址。DNS解析过程缓存查询依次查询浏览器,本地磁盘和路由器缓存所保存的IP地址。若查询失败则进行服务器查询根域名服务器、顶级域名服务器、权限域名服务器根域名服务器,13台IPV4+25台IPV6(雪人计划)服务器查询本地域名服务器递归查询,若查询到则返回IP地址,若未查询到则继续查...

2020-03-01 16:27:02 174

原创 输入URL后发生了什么

浏览器输入URL后发生了什么DNS解析三次握手建立TCP连接浏览器通过HTTP协议发送请求服务器通过HTTP协议响应请求四次挥手断开TCP连接浏览器渲染

2020-03-01 16:12:08 122

原创 操作系统的四大基本特征

并发并发和并行的区别并发:同一段时间间隔内,多道程序同时执行并行:同一时刻,多道程序同时执行对于单处理器系统,微观上多道程序交替进行;对于多处理器系统,微观上多道程序并行执行为了使程序并发执行,引入进程共享操作系统的资源允许进程/线程同时访问共享的两种方式互斥共享临界资源(读写设备,内存栈等)只允许单一进程/线程访问。同时访问宏观上某一时间段多个进程/线程同时访问,微...

2020-03-01 09:24:35 419

原创 区分bind,apply,call

JavaScript的this指向Js,函数的调用方式决定this的值function f1(){ console.log(this)}f1() // windowbind,apply,call可以更改this的指向call()call()第一个参数是指向的对象,当为null或undefined时指向window;第二个是传递的参数(任意类型)function f1(){ c...

2020-02-29 22:46:12 89

原创 JavaScript变量与函数

全局变量的声明全局变量的声明var声明全局变量在函数体外部使用var声明全局变量,在函数体内部使用var声明的为局部变量。var age= 5//全局变量function test(){ var myAge = 1;//局部变量}直接声明不使用var的变量,无论位置在何处均为全局变量age = 5//全局变量function test(){ myAge = 1...

2020-02-29 17:51:33 149

原创 Js中的垃圾回收

Js垃圾回收概念:找出不在继续使用的变量,释放其内存,避免内存泄露。垃圾的解读:不被引用的变量以及引用成环的变量标记清除将内存中所有变量标记,去掉环境中的变量及被环境中变量引用的标记,然后清除所有标记的变量。标记的方式:特殊位反转/维护变量列表引用计数跟踪变量的引用次数,声明变量+1,将变量赋给引用类型+1,取其他值则-1.当引用次数为0时,清除。弊端,循环引用无法解...

2020-02-29 15:48:25 148

原创 HTTP协议的方法

前言get,post,put,delete,均是常用的HTTP请求方法。其中只有put是幂等的。GET和POSTget一般用于向服务器查询数据,post一般用于向服务器增添数据本质上get和post均是HTTP协议的两种请求方法,运行在TCP上的两种方法参数区别get使用URL传参,post使用body传参。get对参数长度和大小有限制,post无限制安全性区别get参数外...

2020-02-29 15:22:16 245

原创 CSS3新增

对比transition和animationtransitionanimation事件触发时间触发着重属性变化@keyframe帧的变化需要-webkit兼容需要-webkit兼容transitiondiv{ width:100px; height:100px; transition:width 2s; -webkit-transitio...

2020-02-29 09:05:22 85

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除