程序员面试常考知识点之 前端篇

最新推荐文章于 2023-01-05 11:24:42 发布
最新推荐文章于 2023-01-05 11:24:42 发布
阅读量470 收藏 1
点赞数 1
分类专栏： 面试 前端 文章标签： javascript 面试 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39956624/article/details/82667858
版权

前言：最近在准备校招，所以整合了一些前端方面的知识点来学习

HTML

  • Doctype作用？标准模式与兼容模式各有什么区别?

（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

  • HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

  • 页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

  • 常见的浏览器内核有哪些？

浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内 容的应用程序都需要内核。（参见维基百科）JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

  • 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。

一、cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。
原因如下：
（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；
（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；
（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
（4）sessionID是加密的
（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数
session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录

7、缺点：cookie：
（1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
　　　
　session：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

二、WebStorage
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：
（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：
（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP
header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

  • 如何在页面上实现一个圆形的可点击区域？

1、map+area或者svg
2、border-radius
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

  • html5有哪些新特性、移除了那些元素？

*HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;

移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

  • 对BFC的了解

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

  • jpg和png有什么区别？

jpg不支持透明，采用的是有损压缩，可以用较少的磁盘空间得到较好的图像质量；
png支持透明，无损压缩；

  • 矢量图和位图有什么区别？

矢量图形与分辨率无关，将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会影响清晰度，而位图是由一个一个像素点产生，在放大图像时，像素点也放大了；
位图表现的色彩比较丰富，可以表现出色彩丰富的图象，可逼真表现自然界各类实物；而矢量图形色彩不丰富，无法表现逼真的实物，因此矢量图常常用来表示标识、图标、Logo等简单直接的图像；
位图占用的空间比较大，矢量图占用的空间小。

CSS

  • 块级元素，行内元素有什么，有什么区别？

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

区别：块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度. 　　行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 　　 　　块级元素可以设置width,height属性. 　　行内元素设置width,height属性无效. 　　块级元素即使设置了宽度,仍然是独占一行. 　　 　　块级元素可以设置margin和padding属性. 　　行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果. 　　 　　块级元素对应于display:block. 　　行内元素对应于display:inline.

  • CSS display:none和visibility:hidden的区别

visibility:hidden隐藏，但在浏览时保留位置
display:none视为不存在，且不加载

  • 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;

  • 用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

  • CSS预处理器
  • 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
    还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

    后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
    是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

JavaScript

  • 正则表达式-邮箱

function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}

  • ES6新特性？

1.默认参数
2.模版表达式
3.多行字符串
4.拆包表达式
5.改进的对象表达式
6.箭头函数 =&>
7.Promise
8.块级作用域的let和const
9.类
10.模块化

  • Javascript作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，
直至全局函数，这种组织形式就是作用域链。

  • Ajax 是什么? 如何创建一个Ajax？

ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

  • 哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

其他问题

  • http状态码

简单版
[
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
]

  • 你有用过哪些前端性能优化的方法？

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

  • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

详细版：
1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

  • web前端开发中的安全问题

跨站脚本攻击(XSS攻击)
恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击.
解决方案:
1.输入过滤，输入符合预期的格式的数据，比如图片上传，设置accept属性，或者只能输入字母或者日期格式等，同时后台对前台输入的数据也应该做编码或转义来防范XSS攻击。
2.对所有要动态输出到页面的内容，进行相关的编码和转义.主要有HTML字符过滤和转义,JS脚本转义过滤.url转义过滤.。
3.CSP，原理其实就是白名单机制，开发者明确告诉客户端(浏览器)哪些资源可以加载并执行，我们只需要提供配置，其他的工作由客户端(浏览器)来完成。通过 <meta> 标签开启 <meta http-equiv="Content-Security-Policy" content="配置项" >

跨站请求伪造(CSRF攻击)
CSRF攻击过程是受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到
B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是交易转账.
解决方案:
1.在关键业务点设置验证码验证。
2.在HTTP 请求中以参数的形式加入一个随机产生的token，并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值，会进行校验该请求当中的token和cookie当中的token值是否都存在且相等，才认为这是合法的请求。否则认为这次请求是违法的，拒绝该次服务。
3.通过检查一下两个 header:Origin Header、Referer Header

SQL注入攻击
SQL注入(SQL Injection)，应用程序在向后台数据库传递SQL(Structured Query Language，结构化查询语言)时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令.
解决方案:
(1) 防止系统敏感信息泄露。设置php.ini选项display_errors=off，防止php脚本出错之后，在web页面输出敏感信息错误，让攻击者有机可乘。(2) 数据转义。设置php.ini选项magic_quotes_gpc=on，它会将提交的变量中所有的’(单引号)，”(双引号)，(反斜杠)，空白字符等都在前面自动加上\。或者采用mysql_real_escape()函数或addslashes()函数进行输入参数的转义。(3) 增加黑名单或者白名单验证。白名单验证一般指，检查用户输入是否是符合预期的类型、长度、数值范围或者其他格式标准。黑名单验证是指，若在用户输入中，包含明显的恶意内容则拒绝该条用户请求。在使用白名单验证时，一般会配合黑名单验证。

  • HTTP 2.0
  1. 二进制协议
  2. 多路复用
  3. 数据流（可以取消某一次请求，同时保证TCP连接还打开着，可以被其他请求使用）
  4. 服务器推送
  5. 头信息压缩
  • 跨域

1.什么是跨域？
跨域是指浏览器不能执行其他网站的脚本，由于浏览器的同源策略，是浏览器对JavaScript实施的安全限制。

2.常见跨域
http://zxy.com/index.html 调用http://zxy.com/server.php 非跨域
http://zxy.com/index.html 调用http://hzx.com/server.php 跨域，主域不同
http://aa.zxy.com/index.html 调用http://bb.zxy.com/server.php 跨域，子域不同
http://zxy.com：8080/index.html 调用http://zxy.com/server.php 跨域，端口号不同
https://zxy.com/index.html 调用http://zxy.com/server.php 跨域，协议不同

3.跨域的解决办法

1.jsonp跨域

因为浏览器对script标签没有同源限制，所以可以通过动态创建script标签来加载外部资源
但是这种方法只能实现get请求

//jquery实现
$.ajax({
  url:"外部地址",
  type:'GET',
  dataType:jsonp',//服务器返回的数据
  data:{"name":"zxy"},//发送的数据
  jsonpCallback:'callback'//回调函数 
  })
2.通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
主域相同的使用document.domain

3.使用window.name来进行跨域

.window.name+iframe 需要目标服务器响应window.name,window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的!

4.通过CORS解决AJAX跨域(主流)

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
定义：CORS其实出现时间不短了，它在维基百科上的定义是：跨域资源共享（CORS）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。而W3C的官方文档目前还是工作草案，但是正在朝着W3C推荐的方向前进。
简言之，CORS就是为了让AJAX可以实现可控的跨域访问而生的。
以往的解决方案：
以前要实现跨域访问，可以通过JSONP、Flash或者服务器中转的方式来实现，但是现在我们有了CORS。
CORS与JSONP相比，无疑更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

5.通过设置Access-Control-Allow-Origin
在被请求的Response header中加入 :
// 指定允许其他域名访问  
header('Access-Control-Allow-Origin:*');  
// 响应类型  
header('Access-Control-Allow-Methods:POST');  
// 响应头设置  
header('Access-Control-Allow-Headers:x-requested-with,content-type');
  • 什么是渲染树？和DOM树及CSSOM树有什么关系？

首先我们得先了解一下渲染的基本步骤
当用户请求的资源通过浏览器网络层到达渲染引擎后。渲染工作就会开始。
第一步：浏览器解析HTML文档和解析CSS样式表形成DOM树和CSSOM树
第二步 : 结合DOM树和CSSDOM树形成 render树。 也就是我们所说的渲染树。
第三步： 浏览器在render树内对每个render节点进行布局处理，计算出每一个元素的大小和位置。确定其在屏幕上的位置
第四步：绘制。通过遍历render树将实际的像素显示到屏幕上

以上的步骤是一个渐进的步骤，但是为了提高用户体验，浏览器并不会等待所有html文档加载完成之后才建立渲染树并渲染。 他会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来

知识点:JavaScript的hoisting机制（声明提升机制）

1.我是变量声明，我会被提升在作用域顶端！

var a;

2.我是变量定义，我的声明部分会被提升，赋值部分不会被提升！

var b = 'test';

3.我是函数定义，或者叫我函数表达式。其实我就是变量定义，只不过恰好被赋值的类型是函数，所以也只提升变量名，不提升函数值！

var c = function() {
    console.log('test');
}

4.我是函数声明，所以我全部被提升了，包括函数名和函数体。另外，我的优先级比变量声明要高，名字和我相同的变量声明会被忽略！

function d() {
    console.log('test');
}

JS 原型与原型链终极详解

JavaScript 作用域链、闭包、原型和原型链

Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。

自调用函数

函数表达式可以 “自调用”。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式

Promise 对象

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

  • pending: 初始状态，不是成功或失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 优缺点
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

JavaScript数据类型

  1. JavaScript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。

  2. 基本类型：null，undefined，number，boolean，symbol（ES6新增）；string比较特殊！！！ 引用类型 Obeject，function，array；
    “JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。”

类型转换

引用类型转换成基本类型才能进行==运算；
引用类型转换成布尔都是true；

“==”运算符（两个操作数的类型不相同时）

  • 如果一个值是null，另一个值是undefined，则它们相等
  • 如果一个值是数字，另一个值是字符串，先将字符串转换为数学，然后使用转换后的值进行比较。
  • 如果其中一个值是true，则将其转换为1再进行比较。如果其中的一个值是false，则将其转换为0再进行比较。
  • 如果一个值是对象，另一个值是数字或字符串，则将对象转换为原始值，再进行比较。

对象到数字的转换

  • 如果对象具有valueOf()方法，后者返回一个原始值，则JavaScript将这个原始值转换为数字（如果需要的话）并返回一个数字。
  • 否则，如果对象具有toString()方法，后者返回一个原始值，则JavaScript将其转换并返回。（对象的toString()方法返回一个字符串直接量（作者所说的原始值），JavaScript将这个字符串转换为数字类型，并返回这个数字）。
  • 否则，JavaScript抛出一个类型错误异常。

空数组转换为数字0

  • 数组继承了默认的valueOf()方法，这个方法返回一个对象而不是一个原始值，因此，数组到数学的转换则调用toString()方法。空数组转换为空字符串，空字符串转换为数字0.

NaN != NaN（NaN代表一个范围）
任何对象转为布尔值，都为得到 true（切记！在 JS 中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false

JavaScript 中 call()、apply()、bind() 的用法

call()、apply()、bind() 都是用来重定义 this 这个对象的！

scu_南
关注
专栏目录
前端常见考试知识点笔记
YmwWow的博客
08-02 595
原始类型：undefined与null的区别 Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。 Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 var a; console.log(a) // undefined console.log(null...
程序员面试的一些知识点（一）
lukeweiduo的博客
10-30 320
1.黑盒测试设计方法 等价类划分   边界值分析  错误推测法  因果图 2.什么是软件测试，软件测试分为几个阶段 一种用来促进鉴定软件的正确性、完整性、安全性和质量的过程。换句话说，软件测试是一种实际输出与预期输出之间的审核或者比较过程。软件测试的经典定义是：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。 按照开发阶段划分，软
程序员面试知识点
qq_43592587的博客
02-22 296
前言 面试考察的知识点多而杂，要完全掌握需要花费大量的时间和精力。但是面试中经常被问到的知识点却没有多少，你完全可以用 20% 的时间去掌握 80% 常问的知识点。在这里我将这 80% 常问的知识点整理出来，方便大家快速地掌握。这些知识点也标注了重要程度，从而让大家可以根据知识点的重要程度去制定学习计划。 如果你想更好的学习这些知识点，可以参考 知识总结方法 一文，这篇文章的最后给出了比本文更...
程序员面试宝典 知识点总结
qq_42209189的博客
09-11 626
1.C语言，printf计算参数是是从右向左计算的，如printf("%d,%d\n",a++,b++)   此时，先计算b++，然后计算a++。 2.x&amp;y+(x^y&gt;&gt;2)  表示x于y的平均数。分为三部分，第一部分是两个数二进制均为1的位，&amp;后还为1，相当于取和后除以2。第二部分，两个数有一个为1的位相加，然后右移两位相当于除以二，第三部分，全为0的部分，取和无...
程序员面试的一些知识点（三）
lukeweiduo的博客
10-30 227
1.thread类的常用方法 String getName()　　返回该线程的名称。 void setName(String name)　　改变线程名称，使之与参数 name 相同。 int getPriority() 　　返回线程的优先级。 void setPriority(int newPriority) 　　更改线程的优先级。 boolean isDaemon() 　　测试该线程是
程序员面试宝典-前端-2023最新
02-23
【程序员面试宝典-前端-2023最新】涵盖了前端开发者面试的全面知识体系，旨在帮助应聘者准备各类面试题目。这份宝典注重考察应聘者的综合素质，包括技术深度、项目经验、问题解决能力和学习能力等多个方面。以下是...
前端初级程序员面试宝典
02-12
【前端初级程序员面试宝典】是一本专门为正在寻求前端开发职位的初级工程师和学生准备的面试指南。它涵盖了从基础到进阶的各种知识点，旨在帮助求职者全面了解和掌握前端开发的核心技能，以便在面试中表现出色。 ...
前端程序员面试分类真题18.pdf，这是一份不错的文件
06-09
【前端程序员面试知识点】 在前端程序员的面试中，考察的知识点涵盖了多个方面，包括但不限于软件开发方法、敏捷开发、软件复用以及软件测试等。以下是对这些知识点的详细阐述： 1. **敏捷软件开发方法**：敏捷...
前端程序员面试题(内有三篇)
最新发布
03-25
以下是一些可能在前端程序员面试中出现的重点知识点： 1. **JavaScript基础**： - 变量、数据类型（包括基本类型和引用类型）、作用域、闭包。 - 函数：函数表达式、箭头函数、this指向、回调函数、函数参数...
前端技术栈，程序员面试宝典
02-18
《前端技术栈，程序员面试宝典》是一份详尽的前端面试参考资料，共计224页，涵盖了从基础到高级的各类前端知识点，是前端开发者求职面试或技能提升的重要资源。这份资料旨在帮助无论是初学者还是有经验的前端工程师...
程序员面试必备知识点之 计算机网络
scu_南的博客
09-03 1652
1.计算机网络分为哪几层？ ISO/OSI七层模型 ISO：国际标准化组织 OSI：开放系统互联模型 IOS：苹果操作系统，而且是思科公司为其网络设备开发的操作维护系统 以下是ISO七层模型图解： 其中上三层是对用户提供服务的，下四层是对用户信息传递进行传递的。 各层功能详解 物理层：物理层是最底层的一层，它是数据之间比特流传输的实际形式； 数据链路层：数据...
java程序员面试知识点总结
zyf2695421695的博客
03-19 220
动态绑定的方法实现多态：由于子类可以覆盖父类的方法，因此，同样的方法会在父类和子类中有着不同的表现形式。在java语言中，基类的引用变量不仅可以指向基类的实例对象，也可以指向其子类的实例对象。同样，接口的引用变量也可以指向其实现类的实例对象。而程序调用的方法在运行期间才动态绑定（绑定指的是讲一个方法调用和一个方法主体连接到一起），就是引用变量所指向的具体实例对象的方法，也就是内存里正在运行的那个对...
程序员面试宝典知识点总结(一)
潜行墨者
07-27 955
1.  变量初始化 int ival(1024); //直接初始化，效率更高 int ival = 1024;      //复制初始化 对于内置类型来说，复制初始化和直接初始化几乎没有差别。 double salary =9999.99, wage(salary + 0.01);     //用前面已经定义变量的值来初始化后面的变量。这是可行的。 内置类型变量，在函数体外定义的都自动初
面试程序员时都应该考察些什么？
kunwen123的博客
02-18 712
面试程序员时都应该考察些什么？ 初筛：一般由直接领导的技术经理或HR进行，重点考察教育和工作经历 一面：一般由可能直接与之共事的工程师进行，重点考察基础和工作能力 二面：一般由直接领导的技术经理进行，重点考察技术深度、广度和发展潜力 HR面：由人力资源部门进行，重点考察入职时间、职业规划、薪资要求等 程序员面试考察的5个方面 1.基本功 2.编码规范 3.分析解决问题的能力 4. 优化能力 5. 学习和沟通能力 ...
程序员面试常见问题-长期更新
TIANJIAWEN的博客
12-14 3925
目录 一.计算机网络 1.TCP的三次握手四次挥手 三次握手 四次挥手 为什么TCP连接的时候是3次？2次不可以吗？ 为什么TCP连接的时候是3次，关闭的时候却是4次？ 2.HTTP 与 HTTPS 什么是HTTP HTTP 与 HTTPS的区别 3.GET和POST 二.操作系统 1.死锁 什么是死锁？ 死锁产生有哪些条件？ 对于死锁，主要有4种解决策略 2.进程和线程 什么是进程？ 什么是线程？ 进程与线程有什么区别？ 3.分时系统和实时系...
程序员面试到底面什么？
weixin_68789096的博客
01-05 487
牛牛有一个习惯，就是每年无论跳槽不跳槽，都会找一些公司聊聊，牛牛发现，在工作6年之后，其实面试基本不会让我写代码，一些技术细节也不会深究，就是聊聊业务、场景，但是场景的细节会扣得特别的深。这块也是牛牛最喜欢的问题，社招面试预期是对这块非常清楚，校招的话，如果这些实战知识都很强，就算算法有点薄弱，也会给机会，毕竟谁不想要个入职就能抗能打的伙伴呢。国内算法面试的风气，可谓是被字节带起来的，很多公司现在都要求面试者手写算法，像字节这种，更是每面都要手写一道，如果算法没做出来，就基本凉了一半。2.考察人是否聪明。
java程序员面试必须要掌握的17条基本概念
weixin_44541500的博客
02-18 221
Java 语言的优点? 简单、高效 Java 语言与 C++ 类似，如果用户了解 C++ 和面向对象的概念，就可以很快编写出 Java 程序；此外，Java 又不同于诸如 C++ 语言提供的各种各样的方法，它只提供了基本的方法，这样就减少了编程的复杂性，例如去掉了头文件、指针变量、结构、运算符重载、多重继承等复杂特性。Java 语言虽然简单，却很高效，它可以用面向对象的方法来描述用户的每一个动...
秋招前端笔试面试的一些知识点
Maci_yera的博客
09-27 604
1.js面向对象的一整套 (1)var a =1; function main(){ var a = 2; console.log(this.a + a); } function main2(){ var a = 3; main(); } main2();最后返回3 ，main()函数虽然在另一个函数内运行，但是只要不是赋值给一个实例变量，就是相当于全局运行，this就是w
【数据结构 ?】前端笔试题总结
GO GO 加油！越努力越幸运❤~~~
03-23 2678
1.非线性结构【网易2016内推笔试题】以下哪个是非线性结构？ D A.队列 B.栈 C.线性表 D.二叉树线性结构： 结构中的数据元素之间存在一对一的关系。 如：堆、栈、队列、列表。非线性结构： 树形：结构中的数据元素之间存在一对多的关系。 图形：结构中的数据元素之间存在多对多的关系。2.非递归【网易2016内推笔试题】以非递归方式，实现深度优先搜索，用什么数据结构？ B A.队列 B.栈
Java程序员面试必备：核心知识点与面试策略
"这是一份由牛客网出品的Java程序员面试题库，包含了名企校招的历年笔试面试真题，适用于校招面试准备及个人技能提升。" 这份电子书《Java程序员进阶知识点-java篇》是专门为Java开发者设计的面试准备资料，尤其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值