![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
面试
文章平均质量分 55
gigi就是我
这个作者很懒,什么都没留下…
展开
-
一些CSS的奇淫技巧
用纯CSS创建一个三角形当一个盒容器的两条边框在边角处相交时,浏览器就会在交点处按某个角度绘制接合线。 如果将这个盒容器的width和height设置为0,并为每条边框设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接到一起的三角形,它们分别指向不同的方向:<div id="demo"></div>#demo { width: 0; height: 0; border-w原创 2016-12-25 20:15:54 · 1825 阅读 · 0 评论 -
js学习笔记:数组去重
数组去重是面试中常见的一个算法问题。 数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 “1” 是不同的元素,1 和 new Number(1) 是不同的元素,{}和 {} 是不同的元素(引用不同)。方法一利用另一个数组res,遍历原数组,如果res中没有的话就加入,如果原创 2017-02-16 22:54:16 · 499 阅读 · 0 评论 -
什么是前端路由
传统的路由指的是:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发。而前端路由是不涉及服务器的,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。其实前端路由要做的就是两点:在页面不刷新的情况下实现url的变化捕捉url的变化,根据url更改页面内容hashhash是url原创 2017-08-20 19:50:55 · 3079 阅读 · 0 评论 -
js解析url查询参数
var path = 'www.u.com/home?id=2&type=0&dtype=-1';function parseUrl(url){ var result = []; var query = url.split("?")[1]; var queryArr = query.split("&"); queryArr.forEach(function(item)原创 2017-08-06 12:56:56 · 8383 阅读 · 0 评论 -
js学习笔记:柯里化
柯里化是指将使用多个参数的函数转换成一系列使用一个参数的函数的技术。柯里化的用途主要是参数复用,例如:function add(a, b) { return a + b;}add(1,2) //3在柯里化之后或许可以这样使用:var addCurry = curry(add);addCurry(1)(2); //3或许针对这种简单的将两个数相加的场景,柯里化显得有点多余。但是如果我原创 2017-08-13 14:44:07 · 8746 阅读 · 3 评论 -
实现jQuery.each方法
参考JavaScript专题之jQuery通用遍历方法each的实现 $.each是一个通用的迭代函数,可以用来迭代数组与对象。$.each(arr,function(index,value){ ……})$.each(obj,function(prop,value){ ……})$.each()函数和 $(selector).each()是不一样的,那个是专门用来遍历一个jQue原创 2017-08-12 21:25:54 · 547 阅读 · 0 评论 -
js数组扁平化
参考自JavaScript专题之数组扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。var arr = [1, [2, [3, 4]]];//扁平化之后:[1,2,3,4];递归 循环数组元素,如果还是一个数组,就递归调用该方法function flatten(arr){ var res = []; for(var i原创 2017-08-12 21:00:59 · 10902 阅读 · 0 评论 -
js中求数组的最大值与最小值
主要是利用Math.max()与Math.min()方法,这里统一以求最大值为例:最原始的方法,循环:function max(arr){ var max = arr[0]; for(var i=1;i<arr.length;i++){ max = Math.max(max,arr[i]); } return max;}reduce 也是遍历原创 2017-08-12 20:30:07 · 1748 阅读 · 0 评论 -
js学习笔记:浅复制&深复制
对象复制,就是以一个对象为基础生成一个一模一样的对象。但是在javascript中,使用简单的赋值语句所实现的是原对象的一个引用,对其中任何一个对象属性方法的改变,都将会影响另一个的属性方法.浅复制仅仅复制原对象的各个属性,而不复制原对象属性中引用的其他对象,导致新对象和原对象的这些属性引用的是一个地址。 也就是所,假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。function s原创 2017-02-19 22:00:23 · 467 阅读 · 0 评论 -
js:防抖动与节流
针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。因此针对这类事件要进行防抖动处理: 它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成 一次,并在给定时间过去之后仅被调用一次。// 将会包装事件的 debounce 函数function deboun原创 2017-03-15 20:15:46 · 29453 阅读 · 4 评论 -
知识点:居中大盘点
居中大盘点行内元素<div> <span>element</span></div>基础样式:div{ width:300px; height:200px; background-color:#777;}水平居中text-align<div> <span>element</span></div>div{ text-align:center;}垂直居中line-hei原创 2016-12-23 15:39:11 · 391 阅读 · 0 评论 -
知识点:BFC、IFC
引子定位方案控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) 。普通流在普通流中,元素按照其在 HTML 中的先后位置至上而下布局。行内元素水平排列,直到当行被占满然后换行块级元素则会被渲染为完整的一个新行除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流原创 2016-12-26 15:14:09 · 508 阅读 · 0 评论 -
浏览器的 16ms 渲染帧
渲染帧是指浏览器一次完整绘制过程,帧之间的时间间隔是DOM视图更新的最小间隔。 由于主流的屏幕刷新率都在60hz,因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。 这段时间内浏览器需要完成如下事情:js执行:脚本造成了需要重绘的改动,比如增删 DOM、请求动画等样式计算layoutpaint:各层分别进行绘制(原创 2017-08-18 09:44:11 · 2806 阅读 · 0 评论 -
兼容性问题总结
以便面试被问到的时候什么都说不出来…… 不过现在已经不是之前需要关注ie6那些怪异兼容性问题的时代了,ie最多支持到8。 除了ie8的兼容性问题外,还有一些移动端的兼容问题。 面试中被问到的话,最好结合自己实际的经验说一下,什么情况下遇到的,怎么处理的,而不是背书。使用reset来使所有浏览器初始样式相同针对ie8兼容性视图当初IE8发布时,相对于IE6/7已经做出了非常大的改进,但是很多老站原创 2017-08-17 20:46:37 · 335 阅读 · 0 评论 -
web安全学习笔记
XSS 跨站脚本攻击,指攻击者在网页中嵌入恶意脚本,当用户浏览此网页时脚本就会执行,从而达到攻击者的目的,比如获取cookie、导航到恶意网站等。分类反射型XSS将用户输入的存在XSS攻击的数据,发送给后台,后台并未对数据进行存储,也未经过任何过滤和转义,直接返回给客户端被浏览器渲染。就可能导致XSS攻击; 假设站点http://www.test.com/xss/refl原创 2017-08-17 11:06:15 · 2229 阅读 · 2 评论 -
移动端web适配
移动端web适配我了解的总共有4种方法:固定宽度 定死页面宽度,直接写一个div把宽度订到设计稿的宽度或者你需要的宽度,然后让它居中,再在这个div盒子里进行你的页面开发,这种开发的缺点就是当遇到较大的屏幕时,屏幕的两边会流出白边,影响美观,体验不好。宽度百分比使用媒体查询 但媒体查询一般是针对几种主流分辨率进行定制,用户体验也不能说有多好,毕竟在一些分辨率变换的瞬间,布局会突然性地变化。原创 2017-05-01 19:43:22 · 1198 阅读 · 0 评论 -
移动web开发要点总结
摘录自无线Web开发经验谈针对移动端的web开发主要基于移动端的浏览器,不管安卓还是IOS的浏览器都是基于webkit的,因此移动端开发可以说是针对webkit浏览器的开发。HTMLmeta-viewport<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimun-s转载 2017-07-14 15:02:55 · 519 阅读 · 0 评论 -
各种排序
快速排序Ο(n log n)从数列中挑出一个元素,称为 “基准”(pivot),重新排序数列,所有比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面。这个过程结束后,该基准就处于其正确的位置上。这个称为分区(partition)操作。递归地进行上面两步传统实现方法function quickSort(arr){ if(arr.length == 0) return;原创 2017-03-11 09:58:57 · 278 阅读 · 0 评论 -
TCP三次握手与四次挥手
三次握手:第一次 A发送连接请求报文段。首部中的同步位SYN=1,同时选择一个初始序号seq=x。此时A进入SYN_SENT状态。第二次 B收到连接请求报文段后,如果同意建立连接,则向A发送确认。 在确认报文段中把SYN和ACK都置1,确认号ack为x+1,同时自己也要喧杂一个初始序号seq = y。B进入到SYN_RCVD状态;第三次 A收到B的SYN+ACK包,还要向B发出确认,A原创 2017-02-19 18:40:13 · 367 阅读 · 0 评论 -
正则表达式实战
参考文章 JS正则表达式完整教程(略长)正则相关的那些方法检查是否有匹配项regexp.test(str):返回true或falsestr.search(regexp):匹配成功则返回第一个匹配项的索引,否则返回-1返回所有匹配项regexp.exec(str) 这个方法一般只用于获取第一个匹配结果或者获得捕获组。 若想匹配多个结果需要多次调用exec方法,下一次查找将从last原创 2017-08-19 11:43:02 · 441 阅读 · 0 评论 -
CSS实现单行、多行文本溢出时显示省略号
text-overflow属性这个属性针对那些在块级元素溢出的内容有效。 文本可能在以下情况下溢出:由于某种原因无法换行,如设置了white-space:no-wrap或者一个单词因为太长而不能被合理地安置为了能让text-overflow属性生效,必须在元素上添加几个额外的属性:overflow:hiddenwhite-space:no-wrap:不换行,只显示单行文本text-ov原创 2017-08-28 22:46:50 · 1187 阅读 · 0 评论 -
移动端点击与点击穿透
移动端click事件的300ms延迟由于移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击。解决方案:浏览器开发商 如果在meta中设置了禁止缩放:<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scaleble = no" />表明这原创 2017-08-24 11:44:45 · 1899 阅读 · 0 评论 -
TCP与UDP的区别
是否面向连接TCP 发送数据前使用三次握手建立连接UDP 发送数据前不需要建立连接。是否可靠TCP 保证可靠性。 TCP 可靠性由三个机制保证: 序号(TCP 报文的序号),保证顺序确认(ACK 机制)超时重传(超时或者冗余的 ACK)UDP 不保证可靠性(任何必需的可靠性必须由应用层来提供)TCP 有流量控制(拥塞控制),UDP 没有 TCP 协议的流量控制是基于滑窗协议实现的。原创 2017-02-19 18:57:59 · 314 阅读 · 0 评论 -
使用timeline分析动画性能
在使用动画的时候,在PC上看往往察觉不到太明显的卡顿,但在移动端中却会出现明显的卡顿,这是就要使用硬件加速来提升动画性能,具体可以看CSS动画的性能优化。这篇文章主要写的是如何通过chrome的timeline来观察到动画性能的提升。timeline面板可以用来录制页面运行的某一时间段,由此分析性能。 timeline面板主要包含以下几块:Controls:一些选项,以及开始和停止记录的按钮O原创 2017-08-23 21:40:09 · 1501 阅读 · 0 评论 -
知识点:CSS实现一个图案
也是面试中遇到的,要实现这样一个图形: 其实就是使用一个宽高为0的边框实现这个图案,然后再旋转45度。<div id="box"> <div></div></div>#box{ width:100px; height:100px; border-radius:50px; overflow:hidden;}#box>div{ width:0; height:0;原创 2017-08-23 16:28:39 · 436 阅读 · 0 评论 -
知识点:阻止scroll事件
面试的时候被问道怎么取消一个事件的默认行为,当然是用event.preventDefault()了。 但是怎么屏蔽页面的滚动?这里event.preventDefault()不起作用,原因就是scroll事件属于UI事件,而UI事件一般是不能够取消默认行为的。UI事件包括:load、unloadaborterrorselectresizescroll为这类事件绑定事件处理函数,只会在原创 2017-08-23 16:12:52 · 10732 阅读 · 2 评论 -
setTimeout与setInterval
基本概念与用法就忽略了。主要是使用这两个定时器可能出现的问题:this由setTimeout与setInterval调用的代码运行在与所在函数完全分离的执行环境上。这会导致,这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象,严格模式下为 undefined,这和所期望的this的值是不一样的。在ES6中可以使用箭头函数来绑定外层this;要么就是用bind进行硬原创 2017-08-22 23:01:10 · 290 阅读 · 0 评论 -
不支持冒泡的事件
blurfocusmouseleave原创 2017-02-18 22:15:40 · 3345 阅读 · 0 评论 -
CSS:等高布局
方法一:使用数值非常大正padding-bottom与负margin-bottom<div id = "container"> <div id="left"></div> <div id = "right"></div></div>*{ margin:0; padding:0;}#container{ overflow:hidden;}#left{ width:30原创 2017-02-16 10:50:25 · 1325 阅读 · 0 评论 -
CSS:两栏布局,三栏布局
两栏布局方法一:浮动布局<div id = "aside"></div><div id = "main"></div>div{ height:500px;}#aside{ width:300px; background-color:yellow; float:left;}#main{ background-color:aqua; margin-left:300原创 2017-02-15 23:34:10 · 9671 阅读 · 0 评论 -
浏览器结构
User Interface用户界面:包括地址栏、前进/后退按钮、书签菜单等Browser Engine浏览器引擎:在用户界面和呈现引擎之间传送指令Rendering Engine呈现引擎(渲染引擎):负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。Networking网络:用于网络调用,比如 HTTP 请求JavaSc原创 2017-08-17 09:35:23 · 680 阅读 · 0 评论 -
display: none;与visibility: hidden;的区别
都能使元素不可见,区别:display:none会让元素在渲染树中消失,不占用任何空间; visibility: hidden;则保留元素占据的空间,也依旧在渲染树中。display:none是非继承属性,但由于元素在渲染树中消失因此子孙节点也会一并消失,通过修改子孙节点的属性也无法显示。 visibility: hidden;是继承属性,子孙节点消失是由于继承了hidden值,那么只要设置原创 2017-08-09 21:47:45 · 1134 阅读 · 1 评论 -
如何区分[]与{}
如何区分空数组与空对象?使用typeof去测试的话都会返回object,所以不可取。[]是否是数组非常好判断,可以使用Array.isArray(),看有没有length属性。可以使用Object.prototype.toString.call()方法来检验:Object.prototype.toString.call({}); //"[object Object]"Object.prot原创 2017-03-01 20:16:05 · 745 阅读 · 0 评论 -
js学习笔记:严格模式
概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。设立”严格模式”的目的,主要有以下几个:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版本的Javascri原创 2017-02-20 14:01:59 · 293 阅读 · 0 评论 -
js判断浏览器类型及其版本
navigator利用navigator对象的useragent属性, 返回当前浏览器的user agent字符串并进行解析,进而得到浏览器类型及版本。var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like ge原创 2017-02-20 13:22:14 · 425 阅读 · 0 评论 -
HTML4,HTML5,XHTML 之间有什么区别?
HTML4是在HTML5推出之前广泛流行的HTML版本HTML5则是新一代的HTML版本,加入了许多新特性,包括语义化标签、多媒体支持、本地存储、以及对设备API的调用……XHTML则是由于当时浏览器对HTML错误太过宽容,导致了很多不规范的页面产生。于是就结合XML制定了XHTML标准,也就是以XML的要求来规范HTML,更加地严格。原创 2017-02-20 11:14:41 · 547 阅读 · 0 评论 -
知识点:src为空
img 标签src属性为空有两种情况,一种是基本的HTML:<img src="" />另外一种是在 JavaScript 里面:var img = new Image();img.src = "";无论哪种情况,都会向服务器多做一次请求。在IE中,这样做会请求一次当前页面所在的目录。如在http://playgoogle.com/demo/a.html 中出现这种空src的标签,会导致重新请求原创 2017-02-18 23:46:22 · 1415 阅读 · 0 评论 -
知识点:浏览器内核
问: 常见的浏览器内核有哪些?浏览器内核其实是指layout engine/rendering engine,即图形引擎/渲染引擎,它负责解析HTML和CSS,渲染网页。Trident是ie的浏览器内核。 现在已经停止开发,被EdgeHTML替换。Trident内核的常见浏览器有:ie6,7,8,9,10360搜狗腾讯TT猎豹GeckoGecko原本由网景公司开发,现在则由Mo原创 2016-12-19 22:25:13 · 360 阅读 · 0 评论 -
CSS:readonly与disabled属性
共同点:二者都不可被编辑; input的disable和readonly的区别:disabled:在表单被提交的时候不会被发送无法被focus,在使用tab切换表单项的时候也会被跳过readonly:在表单被提交时数据会被发送可以被focus,也可以被tab切换选中原创 2017-02-17 12:18:21 · 6454 阅读 · 0 评论 -
知识点:label
问: Label的作用是什么?是怎么用的? 答: HTML <label> 元素表示一个表单元素的标题。通常关联一个表单控件,起到一个控制的作用。 label通过for属性关联一个表单控件,或将一个表单控件包含在其内部。 label还能起到一个扩大焦点范围的作用。点击label就相当于点击了对应的表单控件。<label>Click me <input type="原创 2016-12-20 21:15:04 · 380 阅读 · 0 评论