前端面试
BigDaddy2333
这个作者很懒,什么都没留下…
展开
-
onclick与addEventListener区别
这次做项目遇到了这个问题,本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候,引发了我的思考,这两者有区别吗?具体的事件分析可查看另一篇文章结论:1.onclick事件在同一时间只能指向唯一对象2.addEventListener给一个事件注册多个listener3.addEventLi...转载 2018-11-12 22:52:29 · 3607 阅读 · 1 评论 -
web安全
一:CSRF1. 概念CSRF(Cross Site Request Forgery,跨站请求伪造)攻击是一种依赖web浏览器的、被混淆过的代理人攻击,通过伪装来自受信任用户的请求来利用受信任的网站,造成个人隐私泄露及财产安全 step1: 客户端向网站A发起了通信请求 step2: 网站A验证通过,并建立了通信连接,在客户端保存了A的cookie. step3: 客户端在...转载 2018-11-08 17:13:28 · 294 阅读 · 0 评论 -
em与rem的区别
rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕。rem是根据html根节点来计算的,而em是继承父元素的字体。 https://segmentfault.com/a/1190000003101394...原创 2018-11-11 13:46:43 · 120 阅读 · 0 评论 -
html5---语义化
语义化的优点:易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 方便其他设备解析,如盲人阅读器根据语义渲染网页 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。 1、<header> <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链...原创 2018-11-11 14:16:56 · 165 阅读 · 0 评论 -
css引入 link @import的区别
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。区别4:ink支持使用Javascript控制DOM去改变样...原创 2018-11-11 15:10:10 · 768 阅读 · 0 评论 -
为什么要清浮动且怎么清浮动
为什么要清浮动?因为某元素设置为了float,即脱离了文档流,将会导致其父类包含不了该元素的高度。怎么清浮动?主流方法即使用伪类加上清除浮动的类(如下代码)还有使用BFC。(BFC是什么?戳这里https://mp.csdn.net/postedit/83932038)<style type="text/css"> .div1{background:#0...原创 2018-11-03 14:56:24 · 108 阅读 · 0 评论 -
call,apply,bind的区别
文章目录直接来看 call 例子: var People = { sayHello: function(arg1) { console.log('你好,' + this.name + ',' + arg1) }}var me = { name: 'Neveryu'}People.sayHello.call(me, '很高兴见到你') // 你好,Never...转载 2018-11-13 20:05:33 · 115 阅读 · 0 评论 -
js值arguments详解
在javascript中arguments是一个类似array的存在,但它不能等同于array.arguments对象不能显示的创建,它只有在函数开始时才可用。它可以像访问数组那样去访问每一个子元素。ps:arguments[0],arguments[1],......arguments[n]; javascript并没有重载函数的功能,但是通过arguments对象能够模拟重...转载 2018-11-13 21:10:16 · 247 阅读 · 0 评论 -
深入javascript之原型和原型链
一,函数对象 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型) 所有函数拥有prototype属性(显式原型)(仅限函数) 原型对象:拥有prototype属性的对象,在定义数时就被创建二,构造函数 先复习下构造函数//创...转载 2018-11-11 20:19:53 · 170 阅读 · 0 评论 -
JS中常见原生DOM操作API【总结整理】
NodeNode是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法。常见的Node有 element,text,attribute,comment,document 等(所以要注意 节点 和 元素 的区别,元素属于节点的一种)。Node有一个属性 nodeType 表示Node的类型,它是一个整数,其数值分别表示相应的Node类型,具体如下:{ ...转载 2018-11-11 21:25:46 · 211 阅读 · 0 评论 -
js中的array math string属性方法
array: http://www.w3school.com.cn/jsref/jsref_obj_array.aspslice() 方法可从已有的数组中返回选定的元素。<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "...原创 2018-11-11 22:02:18 · 132 阅读 · 0 评论 -
原生js实现ajax以及ajax的跨域请求
传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应...转载 2018-11-12 15:23:45 · 487 阅读 · 0 评论 -
js中的基本类型和引用类型
基本数据类型:按值访问,可操作保存在变量中的实际的值。基本类型值指的是简单的数据段。基本数据类型有这五种:Undefined、Null、String、Number、Boolean。 引用类型:当复制保存着对象的某个变量时,操作的是对象的引用,但在为对象添加属性时,操作的是实际的对象。引用类型值指那些可能为多个值构成的对象。引用类型有这几种:object、Array、RegExp、D...转载 2018-11-12 16:27:09 · 145 阅读 · 0 评论 -
web前端性能优化的一些方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。 (2)减少DNS查找: 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并...原创 2018-11-08 21:04:36 · 253 阅读 · 0 评论 -
ie8的兼容一些小要点
1.jqueryjquery2.0+都不兼容ie8。2.lessless.js不能在ie8中使用。3.弹性布局ie8不支持响应式,可以采用respond.js解决问题。使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。4.css3css3的新属性跟新选择器ie8是不支持的。a...原创 2018-11-09 17:18:47 · 354 阅读 · 0 评论 -
js获取当前url,主机名和端口号
获取主机名:var hostname = location.hostname;获取端口号:var port = location.port;获取主机名+端口号:var host = location.host;访问:172.16.0.1:30/login.htmlhostname = 172.16.0.1;port = 30;host = 172.16...转载 2018-11-13 13:40:34 · 2880 阅读 · 0 评论 -
js的dom操作和bom部分基础知识
dom操作:https://www.cnblogs.com/Ry-yuan/p/6918155.htmlbom部分基础知识:https://www.cnblogs.com/2010master/p/5824215.htmlhttps://baijiahao.baidu.com/s?id=1579926650256179817&wfr=spider&for=pc...转载 2018-11-13 14:35:39 · 223 阅读 · 0 评论 -
浏览器加载,解析,渲染的过程
最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序。所以就花了时间去了解浏览器的工作,有一篇经典的文章《how browsers work》 ,讲的很详细,也有中文译本 。不过就是文章有点太长,也讲了一堆东西,还是自己总结一下。为什么要了解浏览器加载、解析、渲染这个过程?好,...转载 2018-11-13 15:00:01 · 195 阅读 · 0 评论 -
css实现水平居中
一、对于行内元素:text-align:center;二、对于确定宽度的块级元素:(1)margin和width实现水平居中常用(前提:已设置width值):margin-left:auto; margin-right:auto;(2)绝对定位和margin-left: -(宽度值/2)实现水平居中固定宽度块级元素水平居中,通过使用绝对定位,以及设置元素margin-lef...转载 2018-11-11 12:58:36 · 539 阅读 · 0 评论 -
css实现垂直居中
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下:1. 使用绝对定位和负外边距对块级元素进行垂直居中html代码:<div id="box"> <div id="child">我是测试DIV</div></div>css代码: #box { ...转载 2018-11-11 12:25:44 · 119 阅读 · 0 评论 -
BFC与IFC
先说说FC,FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。Block level 的box会参与形成BFC,比如display值为block,list-item,table的元素。Inline-level的box会参与...原创 2018-11-10 19:29:21 · 605 阅读 · 0 评论 -
盒子模型-
1)盒子模型有两种,W3C和IE盒子模型(1)W3C定义的盒子模型包括margin、border、padding、content ,元素的width=content的宽度(2)IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度,元素的width=content+padding+border2)个人理解和心得,要记住在面试时,我们和面试官是平等的,而且面试官也非常欣赏喜欢交...原创 2018-11-10 18:08:26 · 1662 阅读 · 0 评论 -
position定位及z-index的使用
使用前提z-index只能在position属性值为relative或absolute或fixed的元素上有效。基本原理z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。使用的相对性z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆...转载 2018-11-10 15:32:38 · 1056 阅读 · 0 评论 -
display position float 之间的关系
三个属性display属性规定元素生成框的类型。较为常见的有none-缺省值(用于隐藏元素,元素会消失于视界和文档流中),block-块级元素,inline-block-行内块级元素,list-item列表样式块级元素……….(display种类很多,可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp)position属性...原创 2018-11-10 15:14:28 · 3408 阅读 · 0 评论 -
http的一些知识点
HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。 HTTPS是在HTTP基础上加了SSL,以安全为目标的HTTP通道,简单讲是HTTP的安全版。 HTTP报文分为请求报文和响应报文,都由请求(响应)行、请求(响应)头和请求(响应)请求正文组成。 HTTP请求报文 当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息...原创 2018-11-09 20:04:15 · 838 阅读 · 0 评论 -
事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
附上链接:https://blog.csdn.net/qq_22855325/article/details/72550867https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html 看完这两篇就ok了转载 2018-11-12 17:21:18 · 145 阅读 · 0 评论