前端面试题集合一

2024-01-08 13:40:18

Canvas是什么?怎样写Canvas?

Canvas是HTML5的一个元素,它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。

如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。

<canvas id="myFirstCanvas" width="100" height="100"> </canvas>

Vue里面router一link在电脑上有用,在安卓上没反应 怎么解决?

Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。 框架底层

Js面向对象的几种方式

1.对象的字面量 var obj = {}

2.创建实例对象 var obj = new Object();

3.构造函数模式 function fn(){} , new fn();

4.工厂模式:用一个函数,通过传递参数返回对象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

5.原型模式:function clock(hour){} fn.prototype.hour = 0; new clock(); 首先,每个函数都有一个prototype(原型)属性,这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor,指向clock,这个属性可读可写。而当我们在实例化一个对象的时候,实例newClock除了具有构造函数定义的属性和方法外(注意,只是构造函数中的),还有一个指向构造函数的原型的指针,ECMAScript管他叫[[prototype]],这样实例化对象的时候,原型对象的方法并没有在某个具体的实例中,因为原型没有被实例。

为什么虚拟dom会提高性能?

虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提髙性能。 具体实现步骤如下:

1. 用JavaScript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树,插到文档当中

2.当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异

3.把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。 参考链接:如何理解虚拟DOM? - 知乎

Cookie、sessionStorage、localStorage的区别?

共同点:都是保存在浏览器端,并且是同源的

Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 (key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)

localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)

补充说明一下cookie的作用:

保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。

跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递

cookie数据还有路径(path)的概念,可以限制。cookie只属于某个路径下

存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如回话标识。

webStorage虽然也有存储大小的限制,但是比cookie大得多,可以达到5M或更大

数据的有效期不同sessionStorage:仅在当前的浏览器窗口关闭有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前一直有效,即使窗口和浏览器关闭

作用域不同sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;localStorage:在所有同源窗口都是共享的;cookie:也是在所有同源窗口中共享的

你们vue项目是打包了一个js文件,一个css文件, 还是有多个文件?

根据vue一cli脚手架规范,一个js文件,一个CSS文件。 详细参见:?Vue2.0 框架配置:vue-cli + vue-router + vuex_vue-cli2.0基础框架-CSDN博客?vue-cli#2.0 webpack 配置分析 - 知乎

解释下1px、1rem、1em、1vh代表的含义分别是什么?

  • 1px
    像素(Pixel),相对于显示器屏幕分辨率而言的,即一个像素点。
  • 1rem
    相对于根元素HTML,即同根元素font-size大小。
  • 1em
    相对于父元素
  • 1vh
    相对于视口/视窗,即可视区域

css3有哪些新特性?

1)CSS3 实现圆角(border-radius:8px;), 2)阴影(box-shadow:10px), 3)对文字加特效(text-shadow), 4)线性渐变(gradient), 5)旋转(transform), 6)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 7)增加了更多的 css 选择器 , 8)多背景 rgba?

说一下你对 web worker的理解?

在HTML页面中,如果在执行脚本时,页面的状态是不可相应的,直到脚本执行完成后,页面才变成可相应。web worker是运行在后台的js,独立于其他脚本,不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。

click事件在ios上有300ms延迟,原因及如何解决?

(1)粗暴型,禁用缩放

(2)利用FastClick,其原理是:

检测到touchend事件后,立刻出发模拟click事件,并且把浏览器300毫秒之后真正出发的事件给阻断掉

Cookie如何防范XSS攻击?

XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入javascript脚本,为了减轻这些攻击,需要在HTTP头部配上,set-cookie:

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie

权限管理如何实现?

1)前端控制: 前端的控制比较简单,从后台获取到用户的权限之后,可以存在session或者cookie中,然后在页面加载的时候,通过session或者cookie中存的权限来选择让该功能展现或者禁用。 前端实现代码详细参见:js对权限的控制_js 权限-CSDN博客

(2)后台控制: 仅仅依靠前端的控制是无法完美解决权限控制的问题,因为前端页面的加载过程是在浏览器中完成的,用户可以自行篡改页面;或者用户可以直接通过URI请求来获取非法权限功能。所以需要在后台实现权限控制。   后台的控制方法也很多,比如filter、spring的AOP等。在此选用springMVC的interceptor来控制。

(3)全局异常管理: 思路是在拦截器中权限校验失败时,抛出一个权限校验失败的异常,然后通过全局异常管理类来捕获并返回前端特定的格式。具体如下。

说一下你对浏览器缓存的理解?

缓存分为两种:强缓存和协商缓存,根据响应的header内容来决定。

强缓存相关字段有expires,cache-control。如果cache-control与expires同时存在的话,cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since,Etag/If-None-Match

浏览器在生成页面的时候,会生成那两颗树?

构造两棵树,DOM树和CSSOM规则树

当浏览器接收到服务器相应来的HTML文档后,会遍历文档节点,生成DOM树,

CSSOM规则树由浏览器解析CSS文件生成

iframe是什么?有什么缺点?

定义:iframe元素会创建包含另一个文档的内联框架

提示:可以将提示文字放在之间,来提示某些不支持iframe的浏览器

缺点:

会阻塞主页面的onload事件

搜索引擎无法解读这种页面,不利于SEO

iframe和主页面共享连接池,而浏览器对相同区域有限制所以会影响性能。

如何实现一个私有变量,用getName方法可以访问,不能直接访问?

(1)通过defineProperty来实现

obj={
    name:yuxiaoliang,
    getName:function(){
        return this.name
    }
}
object.defineProperty(obj,"name",{
    //不可枚举不可配置
});

(2)通过函数的创建形式

function product(){
    var name='yuxiaoliang';
    this.getName=function(){
        return name;
    }
}
var obj=new product()

前端web如何进行性能优化?有哪些方法?

降低请求量:合并资源,减少HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。

加快请求速度:预解析DNS,减少域名数,并行加载,CDN 分发。

缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存localStorage。

渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline。

如何用箭头函数获取arguments

箭头函数是没有arguments的
我们可以用rest代替
let func=(…rest)=>{
????????console.log(rest)
}

box-sizing常用的属性有哪些?分别有什么作用?

  • box-sizing常用的属性有 content-box 和 border-box。
  • content-box 盒子的宽度不包含 border和padding,border-box盒子的宽度包含border 和padding。

一句话概括RESTFUL 接口?

就是用URL定位资源,用HTTP描述操作

几个很实用的BOM属性对象方法?

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢?

(1)location对象

location.href-- 返回或设置当前文档的URL location.search -- 返回URL中的查询字符串部分。例如?http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu?返回包括(?)后面的内容?id=5&name=dreamdu location.hash -- 返回URL#后面的内容,如果没有#,返回空 location.host -- 返回URL中的域名部分,例如www.dreamdu.com?location.hostname -- 返回URL中的主域名部分,例如dreamdu.com location.pathname -- 返回URL的域名后的部分。例如?http://www.dreamdu.com/xhtml/?返回/xhtml/ location.port -- 返回URL中的端口部分。例如?http://www.dreamdu.com:8080/xhtml/?返回8080 location.protocol -- 返回URL中的协议部分。例如?http://www.dreamdu.com:8080/xhtml/?返回(//)前面的内容http: location.assign -- 设置当前文档的URL location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url); location.reload() -- 重载当前页面

(2)history对象

history.go() -- 前进或后退指定的页面数 history.go(num); history.back() -- 后退一页 history.forward() -- 前进一页

(3)Navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串) navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

说说vue react angularjs jquery的区别?

JQuery与另外几者最大的区别是,JQuery是事件驱动,其他两者是数据驱动。

JQuery业务逻辑和UI更改混在一起, UI里面还参杂这交互逻辑,让本来混乱的逻辑更加混乱。

Angular,vue是双向绑定,而React不是

页面导入样式时,使用link和@import有什么区别?

1)link属于XHTML标签,而@import是css提供的;

2)页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;

3)@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;

4)link方式的样式的权重高于@import的权重。

addEventListener的参数有哪些?

addEventListener(event, function, useCapture)

其中,event指定事件名;function指定要事件触发时执行的函数;useCapture指定事件是否在捕获或冒泡阶段执行。

你平时如何评测你写的前端代码的性能和效率

Chrome DevTools的Timeline:是用来排查应用性能瓶颈的最佳工具。 Chrome DevTools的Audits:对页面性能进行检测,根据测试的结果进行优化。

第三方工具Yslow。 详细参见:?博客园 - 开发者的网上家园一simon/p/5883336.html?http://blog.csdn.net/ivan0609/artide/details/45508365?http://www.wtoutiao.com/p/1305TZW.html

redux有啥用处?

在组件化的应用中,会有着大量的组件层级关系,深嵌套的组件与浅层父组件进行数据交互,变得十分繁琐困难。而redux,站在一个服务级别的角度,可以毫无阻碍地将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。

你知道CSS中的字母"C"代表什么吗?

CSS(Cascading Style Sheets)。"C" 即为 Cascading 层叠的意思,我们编写 CSS 的时候,写在后面的样式会覆盖前面的样式即层叠。

在地址栏里输入一个URL,到这个页面呈现出来,中间会发生什么?

这是一个必考的面试问题

输入url后,首先需要找到这个url域名的服务器ip,为了寻找这个ip,浏览器首先会寻找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存-》系统缓存-》路由器缓存,缓存中没有则查找系统的hosts文件中是否有记录,如果没有则查询DNS服务器,得到服务器的ip地址后,浏览器根据这个ip以及相应的端口号,构造一个http请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个http请求封装在一个tcp包中,这个tcp包会依次经过传输层,网络层,数据链路层,物理层到达服务器,服务器解析这个请求来作出响应,返回相应的html给浏览器,因为html是一个树形结构,浏览器根据这个html来构建DOM树,在dom树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐JS代码应该放在html代码的后面,之后根据外部央视,内部央视,内联样式构建一个CSS对象模型树CSSOM树,构建完成后和DOM树合并为渲染树,这里主要做的是排除非视觉节点,比如script,meta标签和排除display为none的节点,之后进行布局,布局主要是确定各个元素的位置和尺寸,之后是渲染页面,因为html文件中会含有图片,视频,音频等资源,在解析DOM的过程中,遇到这些都会进行并行下载,浏览器对每个域的并行下载数量有一定的限制,一般是4-6个,当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间,Expires使用的是基于服务器 端的绝对时间,因为存在时差问题,一般采用Cache-Control,在请求这些有设置了缓存的数据时,会先 查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验,如果一致,继续校验 Last-Modified,没有设置ETag则直接验证Last-Modified,再决定是否返回304

vue的双向绑定的原理,和angular的对比

在不同的MWM框架中,实现双向数据绑定的技术有所不同。 AngulaJS采用‘‘脏值检测”的方式,数据发生变更后,对于所有的数据和视图的绑定关系进 行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改 变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视 图,更新页面展现。如果是手动对ViewModel的数据进行变更,为确保变更同步到视图, 需要手动触发一次‘‘脏值检测”。 VueJS则使用ES5提供的〇bject.defineProperty()方法,监控对数据的操作,从而可以自 动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的 视图,而不是对所有的数据都执行一次检测。

promise是什么,其底层如何实现?

Promise是一个对象,保存着未来将要结束的事件,她有两个特征:

1、对象的状态不受外部影响,Promise对象代表一个异步操作,有三种状态,pending进行中,fulfilled已成功,rejected已失败,只有异步操作的结果,才可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也就是promise名字的由来

2、一旦状态改变,就不会再变,promise对象状态改变只有两种可能,从pending改到fulfilled或者从pending改到rejected,只要这两种情况发生,状态就凝固了,不会再改变,这个时候就称为定型resolved,

Promise的基本用法,

let promise1 = new Promise(function(resolve,reject){
        setTimeout(function(){
        resolve('ok')
        },1000)
    })
    promise1.then(function success(val){
   	 console.log(val)
})

最简单代码实现promise

class PromiseM {
    constructor (process) {
        this.status = 'pending'
        this.msg = ''
        process(this.resolve.bind(this), this.reject.bind(this))
        return this
    }
    resolve (val) {
        this.status = 'fulfilled'
        this.msg = val
    }
    reject (err) {
        this.status = 'rejected'
        this.msg = err
    }
    then (fufilled, reject) {
        if(this.status === 'fulfilled') {
        fufilled(this.msg)
    }
    if(this.status === 'rejected') {
        reject(this.msg)
    }
}

//测试代码

var mm=new PromiseM(function(resolve,reject){
    resolve('123');
    });
    mm.then(function(success){
  	  console.log(success);
    },function(){
   	 console.log('fail!');
});

简述一下src与href的区别

  1. href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
  2. src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

js如何实现跨域?

JSONP:通过动态创建script,再请求一个带参网址实现跨域通信。document.domain + iframe跨域:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。

location.hash + iframe跨域:a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。

window.name + iframe跨域:通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。

postMessage跨域:可以跨域操作的window属性之一。

CORS:服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求,前后端都需要设置。

代理跨域:启一个代理服务器,实现数据的转发

vue:proxy代理

get和post请求在缓存方面的区别?

post/get的请求区别,具体不再赘述。

补充补充一个get和post在缓存方面的区别:

get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。

post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

?

文章来源:https://blog.csdn.net/qq_43592064/article/details/135450722
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。