新葡京棋牌平台:2020前端面试题及答案汇总

本文地址:http://phm.ib776.com/come0across/article/details/104895118
文章摘要:新葡京棋牌平台,让人避之三米之外血液地步了"金沙娱乐重庆时时彩"或多或少漫卷诗书喜欲狂剑无生。

文章目录

写在最开始:
工作以来,感觉自己会的东西还算多,但是面试时就答不出来、答不全面,究其原因,则是自己从来没有认真深挖、整理所有的知识点,每个知识点,都只是了解了皮毛,所以还是决定从今天开始,重新学习,并记录重要的知识点。

新葡京棋牌平台:1. 浏览器篇

1.1 常用那几种浏览器测试?主流浏览器的内核有哪些?

Q1:IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1、Trident内核
代表产品为Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎 。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎,是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。

1.2 说说你对浏览器内核的理解?

浏览器内核主要包括以下三个技术分支:排版渲染引擎、 JavaScript引擎,以及其他。
排版渲染引擎:主要负责取得网页的内容(HTML、XML、图像等)、整理信息,以及计算网页的显示方式,然后输出至显示器
JavaScript引擎:是用来渲染JavaScript的,JavaScript的渲染速度越快,动态网页的展示也越快

1.3 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

1.浏览器根据请求的URL交给DNS域名解析,找到真实IP;
2.浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后,再次向服务器发送了确认信号,然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;
4.服务器处理请求并返回HTTP报文(HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。):
a…服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
b.服务器将得到的 HTML 文件发送给浏览器;
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
d在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML 。
5.断开连接

1.4 浏览器缓存

1.sessionStorage
优点:可以临时存储,关闭页面标签自动回收,不支持跨页面交互
缺点:只能作为临时存储,不能存储持久化
2.localStorage
优点:用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
缺点:存在大小限制,IE8以上的IE版本才支持这个属性;目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3.cookie
优点:兼容性最好,几乎所有的浏览器都支持
缺点:大小有限制,而且每次发送请求,请求头里会带着cookie一起发过去,现在基本大多数登录的合法性验证都是用cookie验证的
4.userData
优点:出现的时间比sessionStorage要早
缺点:IE专门的存储方式,存储大小有限,单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB

1.5. HTTP

1.5.1 http状态码
  1. 2xx 为开头的都表示请求成功响应.
状态码含义
200请求成功
204请求处理成功,但是没有资源可以返回
206对资源某一部分进行响应,由Content-Range 指定范围的实体内容。
  1. 3xx 为开头的都表示需要进行附加操作以完成请求
状态码含义
301永久性重定向,该状态码表示请求的资源已经重新分配 URI,以后应该使用资源现有的 URI
302临时性重定向。该状态码表示请求的资源已被分配了新的 URI,希望用户(本次)能使用新的 URI 访问。
303该状态码表示由于请求对应的资源存在着另一个 URI,应使用 GET 方法定向获取请求的资源。
304该状态码表示客户端发送附带条件的请求时,服务器端允许请求访问资源,但未满足条件的情况。
307临时重定向。该状态码与 302 Found 有着相同的含义。
  1. 以 4xx 的响应结果表明客户端是发生错误的原因所在。
状态码含义
400该状态码表示请求报文中存在语法错误。当错误发生时,需修改请求的内容后再次发送请求。
401该状态码表示发送的请求需要有通过 HTTP 认证(BASIC 认证、DIGEST 认证)的认证信息。
403该状态码表明对请求资源的访问被服务器拒绝了。
404该状态码表明服务器上无法找到请求的资源。
  1. 以 5xx 为开头的响应标头都表示服务器本身发生错误
状态码含义
500该状态码表明服务器端在执行请求时发生了错误。
503该状态码表明服务器暂时处于超负载或正在进行停机维护,现在无法处理请求。
1.5.2 URL和URI有什么区别?

URI是统一资源标识符,相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称,由路径表示,着重强调于资源。

URL 是统一资源定位符,相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

1.5.3 HTTP和http的区别
  • http 协议需要到 CA (Certificate Authority,证书颁发机构)申请证书,一般免费证书较少,因而需要一定费用
  • HTTP 是超文本传输协议,信息是明文传输,http 则是具有安全性的 SSL 加密传输协议。
  • HTTP 和 http 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  • HTTP 的连接很简单,是无状态的。http 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

2. HTML篇

2.1 Doctype作用?标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

1. Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式与兼容模式各有什么区别?
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说,就是尽可能的显示能显示的东西给用户看。
3. 你知道多少种Doctype文档类型
HTML 4.01中有3种DTD(文档类型定义)声明可以选择:过渡的(Transitional)、严格的(Strict)和框架的(Frameset)

2.2 说说你对语义化的理解?

语义化的优点有:

  • 代码结构清晰,易于阅读,利于开发和维护
  • 提高用于体验,在样式加载失败时,页面结构清晰
  • 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
  • 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重
    语义化标签主要有
    title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark

2.3 HTML与XHTML有什么区别?

  • 其基础语言不同
    1、XHTML是基于du可扩展标记语言(XML)。
    2、HTML是基于标准通用标记语言(SGML)。
  • 语法严格程度不同
    1、XHTML语法比较严格,存在DTD定义规则。
    2、HTML语法要求比较松散,这样对网页编写者来说,比较方便。
  • 可混合应用不同
    1、XHTML可以混合各种XML应用,比如MathML、SVG。
    2、HTML不能混合其它XML应用。
  • 大小写敏感度不同
    1、XHTML对大小写敏感,标准的XHTML标签应该使用小写。
    2、HTML对大小写不敏感。
  • 公布时间不同
    1、XHTML是2000年W3C公布发行的。
    2、HTML4.01是1999年W3C推荐标准。

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

1 属性差别。link属于XHTML标签,而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

2.5 HTML5有哪些新特性?

  1. 语义化标签
    语义化标签使得页面的内容结构化,见名知义
标签描述
<header></header>定义了文档的头部区域
<footer></footer>定义了文档的尾部区域
<nav></nav>定义文档的导航
<section></section>定义文档中的节(section、区段)
<article></article>定义页面独立的内容区域
<aside></aside>定义页面的侧边栏内容
<detailes></detailes>用于描述文档或文档某个部分的细节
<summary></summary>标签包含 details 元素的标题
<dialog></dialog>定义对话框,比如提示框
  1. 增强型表单
    新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
输入类型描述
color主要用于选取颜色
date从一个日期选择器选择一个日期
datetime选择一个日期(UTC 时间)
datetime-local选择一个日期和时间 (无时区)
email包含 e-mail 地址的输入域
month选择一个月份
number数值的输入域
range一定范围内数字值的输入域
search用于搜索域
tel定义输入电话号码字段
time选择一个时间
urlURL 地址的输入域
week选择周和年

新增表单元素:

表单元素描述
<datalist>元素规定输入域的选项列表,使用 元素的 list 属性与 元素的 id 绑定
<keygen>提供一种验证用户的可靠方法,标签规定用于表单的密钥对生成器字段。
<output>用于不同类型的输出

新增表单属性

  • placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
  • required 属性,是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 属性,描述了一个正则表达式用于验证 元素的值。
  • min 和 max 属性,设置元素最小值与最大值。
  • step 属性,为输入域规定合法的数字间隔。
  • height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。
  • autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
  • multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。
  1. 新增视频 和音频 标签
  2. Canvas绘图
  3. SVG绘图
  4. 地理定位
  5. 拖放API
  6. Web Worker
  7. Web Storage
  8. WebSocket

2.6 iframe的优缺点?

优点:
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
缺点:
1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

2.7 img中的alt与title属性

alt是图片加载失败时,显示在网页上的替代文字;
title是鼠标放在图片上面时显示的文字,title是对图片的描述与进一步说明;
alt是img必要的属性,而title不是;
对于网站seo优化来说,title与alt还有最重要的一点:
搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要的文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里进一步对图片说明。

2.8 HTML 的中,如何写一个值为 “a”=‘b’ 的属性值?

3. CSS篇

3.1 行内元素有哪些?块级元素有哪些?CSS的盒模型?

3.2 清除浮动有哪些方式?

3.3 CSS选择符都有哪些?哪些属性可以继承?优先级算法如何计算?

3.4 CSS3新增伪类有哪些?

3.5 如何居中div?

3.6 为什么要初始化CSS?

3.7 说说你对BFC规范的理解?

一、什么是BFC?
  BFC全称:块级格式化上下文(block formatting context),简单来说它就是一种属性,这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
  1、float:给元素添加浮动(属性值为left、right,但none除外)
  2、position:给元素添加定位(属性值为absolute或fixed)
  3、display:给元素添加display属性(属性值为 inline-block、table-cell或table-caption)
  4、overflow:给元素添加overflow 属性(属性值为hidden、auto或scroll,但visible除外)
三、BFC形成后出现的常见问题
  1、margin重叠问题
  2、浮动相关问题

3.8 讲讲 position float display 各有哪些取值,它们互相之间会如何影响?

3.9 纯CSS实现三角形

.box {
	width:0px;
	height:0px;
	border-top:50px solid rgba(0,0,0,0);
	border-right:50px solid  rgba(0,0,0,0);
	border-bottom:50px solid red;
	border-left:50px solid  rgba(0,0,0,0);
}

4. JS篇

4.1 面向对象

4.2 什么是闭包?闭包的特性是什么?

闭包其实只是一个绑定了执行环境的函数
闭包的特性:
1.封闭性:外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口;
2.持久性:一般的函数,调用完之后,系统会自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包依然存在。

4.3 继承

4.4 DOM操作(添加、移除、移动、复制、创建和查找节点)

4.5 介绍一下new 操作符。New操作符具体干了什么?

1.创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用,并且最后隐式的返回this。

4.6 HTML5离线存储

4.7 JS的数据类型

基本数据类型:Number、String、Boolean、Null、 Undefined、Symbol(ES6),
引用数据类型:Object(在JS中除了基本数据类型以外都是对象)
详细请查看:typeof操作符检测变量的数据类型

4.8 null和undefined的区别

4.9 call()和apply()的区别

传参方式不同

fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])

4.10 深拷贝和浅拷贝

4.11 ajax

4.12 数组去重

4.13 this对象

4.14 eval()

1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval,不安全,而且非常消耗性能(2次,一次是解析成js语句,一次是执行)
3.由JSON字符串转换为JSON对象的时候可以用eval()

let obj = eval('(' + str + ')');

4.15 什么是UA?

4.16 什么是事件委托?

4.17 promise

Promise 是 JavaScript 语言提供的一种标准化的异步管理方式,它的总体思想是,需要进行 io、等待或者其它异步操作的函数,不返回真实结果,而返回一个“承诺”,函数的调用方可以在合适的时机,选择等待这个承诺兑现(通过 Promise 的 then 方法的回调)。

4.18 window.onload和document.ready的区别?哪一个先执行?

一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数,也就是在页面响应加载的顺序中的“加载图片等其他信息”之后,可以操作DOM。只能执行一次,如果有多个,那么第一次的执行会被覆盖
document.ready是在DOM加载完成后就可以可以对DOM进行操作,也就是在在“加载js和css”和“加载图片等其他信息”之间,就可以操作DOM了。可以执行多次
所以,document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快

4.19 var、let和const有什么区别

1.var定义的变量可以跨块作用域访问,不可以跨函数作用域访问。
2.let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问;不允许在相同作用域内,重复声明同一个变量。
3.const定义的常量,初始化时必须赋值,只能在块作用域里使用,不能修改。
详细请查看:var、let、const三者的区别

4.20 JavaScript 启动后,内存中有多少个对象?如何用代码来获得这些信息?

5. 前端安全问题

5.1 XSS

跨站脚本攻击(XSS)通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有:
1、盗用cookie,获取敏感信息。
2、利用植入Flash,通过crossdomain权限设置进一步获取更高权限;或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式,以(被攻击)用户的身份执行一些管理动作,或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点,以受信任来源的身份请求一些平时不允许的操作,如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站,实现DDoS攻击的效果。

5.2 CSRF

跨站请求伪造(CSRF)是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,比如以你的名义发送邮件、发消息,盗取你的账号,添加系统管理员,甚至于购买商品、虚拟货币转账等。
防御CSRF攻击:
目前防御 CSRF 攻击主要有三种策略:验证 HTTP Referer 字段;在请求地址中添加 token 并验证;在 HTTP 头中自定义属性并验证。
跟跨网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。

6. 跨域

6.1 什么是跨域?

6.2 什么是同源策略?

6.3 解决跨域的方法有哪些?

7. 性能优化

7.1 你都用过那种性能优化的方法?

1.尽可能的减少http请求
使用CSS?Sprites;JS、CSS源码压缩;图片大小控制合适;启用Gzip压缩,CDN托管,data缓存;图片服务器
2.避免在CSS中使用?Expression
Expression(css表达式)又称Dynamic?properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
8.前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

7.2 CSS Sprite是什么,谈谈这个技术的优缺点

8. 其他

8.1 后台系统的权限控制与管理

答案:后台管理系统的权限控制------前端权限管理

已标记关键词 清除标记
??2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 首页
淘金VR彩票百家乐时时彩平台怎么样 EB易博游戏大厅 彩运来现金直营网 优信彩票游戏直营网 澳门永利餐厅登入
乐虎国际官网 正规网赚平台 娱乐城老品牌电子游戏 澳门威尼斯人手机app 太阳城信誉登入
菲律宾申博太阳城官网网站登入 金沙国际国际赌场 菲皇娱乐 申博太阳城娱乐城官网手机APP下载登入 bet16瑞丰娱乐
申博开户网站登入 杏彩娱乐下载 www.33psb.com 大发现金网盘口 申博太阳城娱乐网登入