• 前端工程师面试题详解(一)

     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和webstorage：

    • cookie数据始终在同源的 http 请求中携带(即使不需要)，即cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，可以限制。
    • webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。

     概括主要区别

    1.存储大小的限制：
    • cookie 只属于某个路径下 存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie， 所以 cookie 只适合保存很小的数据，如回话标识。
    • webStorage 虽然也有存储大小的限制，但是比 cookie 大得多，可以达到 5M 或更大
    2,数据的有效期不同：
    • sessionStorage：仅在当前的浏览器窗口关闭有效；
    • localStorage：始终 有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
    • cookie：只在设置的 cookie 过期时间之前一直有效，即使窗口和浏览器关闭
    3.作用域不同
    • sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
    • localStorage：在所有同源窗口都是共享的；
    • cookie：也是在所有同源窗口中共享的

    cookie和session 区别

    1.  cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
    2.  cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗。考虑到安全应当使用 session。
    3.  session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用 COOKIE。
    4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

     补充说明一下 cookie 的作用：

    1.保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面
    时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置
    过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保
    持登录状态的时间：常见选项有一个月、三个 月、一年等。
    2.跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

    cookie 和 session 的区别，localstorage 和 sessionstorage 的区别

    Cookie 和 session 都可用来存储用户信息，cookie 存放于客户端，session 存放于服务器端， 因为 cookie 存放于客户端有可能被窃取，所以 cookie 一般用来存放不敏感的信息，比如 用户设置的网站主题，敏感的信息用 session 存储，比如用户的登陆信息，session 可以存放于文件，数据库，内存中都可以，cookie 可以服务器端响应的时候设置，也可以客户端通过 JS 设置 cookie 会在请求时在 http 首部发送给客户端，cookie 一般在客户端有大小限制，一般为 4K。

    下面从几个方向区分一下 cookie，localstorage，sessionstorage 的区别

    1、生命周期：

    • Cookie：可设置失效时间，否则默认为关闭浏览器后失效
    • Localstorage:除非被手动清除，否则永久保存
    • Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

    2、存放数据：

    • Cookie：4k 左右
    • Localstorage 和 sessionstorage：可以保存 5M 的信息
    3、http 请求：
    • Cookie：每次都会携带在 http 头中，如果使用 cookie 保存过多数据会带来性能问题
    • 其他两个：仅在客户端即浏览器中保存，不参与和服务器的通信
    4、易用性：
    • Cookie：需要程序员自己封装，原生的 cookie 接口不友好
    • 其他两个：即可采用原生接口，亦可再次封装

    5、应用场景：

    从安全性来说，因为每次 http 请求都回携带 cookie 信息，这样子浪费了带宽，所以 cookie 应该尽可能的少用，此外 cookie 还需要指定作用域，不可以跨域调用，限制很多，但是 用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage 可以用来在页面传递参数，sessionstorage 可以用来保存一些临时的数据，防止用户刷新 页面后丢失了一些参数。

    cookie 有哪些字段可以设置

    name 字段为一个 cookie 的名称。

    value 字段为一个 cookie 的值。

    domain 字段为可以访问此 cookie 的域名。 非顶级域名，如二级域名或者三级域名，设置的 cookie 的 domain 只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的 cookie，否则 cookie 无法生成。 顶级域名只能设置 domain 为顶级域名，不能设置为二级域名或者三级域名，否则 cookie无法生成。 二级域名能读取设置了 domain 为顶级域名或者自身的 cookie，不能读取其他二级域名 domain 的 cookie。所以要想 cookie 在多个二级域名中共享，需要设置 domain 为顶级域名，这样就可以在所有二级域名里面或者到这个 cookie 的值了。 顶级域名只能获取到 domain 设置为顶级域名的 cookie，其他 domain 设置为二级域名的无法获取。

    path 字段为可以访问此 cookie 的页面路径。 比如 domain 是 abc.com,path 是/test，那么只有/test 路径下的页面可以读取此 cookie。

    expires/Max-Age 字段为此 cookie 超时时间。若设置其值为一个时间，那么当到达此时间后，此 cookie 失效。不设置的话默认值是 Session，意思是 cookie 会和 session 一起失效。 当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此 cookie 失效。Size 字段 此 cookie 大小。

    http字段 cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过 document.cookie 来访问此 cookie。

    secure 字段 设置是否只能通过 https 来传递此条 cookie

    cookie 有哪些编码方式？

    encodeURI（）

     对 HTML 语义化标签的理解

    HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article、header、footer 等等标签。

     iframe 是什么？有什么缺点？

    定义：iframe 元素会创建包含另一个文档的内联框架
    提示：可以将提示文字放在之间，来提示某些不支持 iframe 的浏览器
    缺点：
    1. 会阻塞主页面的 onload 事件
    2. 搜索引擎无法解读这种页面，不利于 SEO
    3. iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

     Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

    Doctype 声明于文档最前面， 告诉浏览器以何种方式来渲染页面 ，这里有两种模式，严格模式和混杂模式。
    严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
    混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

     Cookie 如何防范 XSS 攻击

    XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻击，需要在 HTTP 头部配上，set-cookie：
    httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
    secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。
    结果应该是这样的：Set-Cookie=.....

     Cookie 和 session 的区别

    HTTP 是一个无状态协议，因此 Cookie 的最大的作用就是存储 sessionId 用来唯一标识用户。

     一句话概括 RESTF

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

     讲讲 viewport 和移动端布局

    1.像素分为两种类型：css像素和物理像素
    css像素为web开发者提供，在css中使用的一个抽象单位
    物理像素只与设备的硬件密度有关，任何设备的物理像素都是固定的

    2. 视口:广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口。

    (1) 布局视口（layout viewport）

    布局视口定义了pc网页在移动端的默认布局行为，因为通常pc的分辨率较大，布局视口默认为980px。不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示，导致根植于pc端的网页在移动端展示很模糊。

    (2) 视觉视口（visual viewport）

    视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。仅仅类似于放大镜中显示的内容，因此不会影响布局视口的宽度和高度。

    (3) 理想视口（ideal viewport）

    理想视口或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。

    DPR（Device pixel ratio）设备像素比来表示分辨率和物理像素之间的联系

    1 DPR = 物理像素／分辨率

    在不缩放的情况下，一个css像素就对应一个DPR

    1 CSS像素 = 物理像素／分辨率（条件：不缩放）

     在移动端的布局中，可以通过viewport元标签来控制布局

    <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
    属性名取值描述
    width正整数定义布局视口的宽度，单位为像素
    height正整数定义布局视口的高度，单位为像素，很少使用
    initial-scale[0,10]初始缩放比例，1表示不缩放
    minimum-scale[0,10]最小缩放比例
    maximum-scale[0,10]最大缩放比例
    user-scalableyes／no是否允许手动缩放页面，默认值为yes

    解决思路：在移动端布局时，device-width一般是表示分辨率的宽。在meta标签中会将width设置称为device-width，通过width=device-width的设置就将布局视口设置成了理想的视口。

    3.px与自适应

    在pc端的布局视口通常情况下为980px，移动端以iphone6为例，分辨率为375 * 667。现在有一个750px * 1134px的视口稿

    PC端： 1 CSS像素 = 物理像素／分辨率 = 750 ／ 980 =0.76 px

    iphone6：1 CSS像素 = 物理像素 ／分辨率 = 750 ／ 375 = 2 px

    意味着在PC端，一个css像素可以用0.76个物理像素来表示，而iphone6中 一个CSS像素表示了2个物理像素。无法通过一套样式，实现各端的自适应。

    4.媒体查询

    @media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。例如以下代码：分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

    1. @media screen and (max-width: 960px){
    2.     body{
    3.       background-color:#FF6699
    4.     }
    5. }
    6.  
    7. @media screen and (max-width: 768px){
    8.     body{
    9.       background-color:#00FF66;
    10.     }
    11. }
    12.  
    13. @media screen and (max-width: 550px){
    14.     body{
    15.       background-color:#6633FF;
    16.     }
    17. }
    18.  
    19. @media screen and (max-width: 320px){
    20.     body{
    21.       background-color:#FFFF00;
    22.     }
    23. }

     5.设置百分比

    通过百分比单位 " % " 来实现响应式的效果。当浏览器的宽度或者高度发生变化时，通过百分比单位，使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

    css中的子元素中的百分比（%）是相对于谁的百分比？、

    • 根据css的盒式模型，除了height、width属性外，还具有padding、border、margin等等属性。
    • height百分比相对于height，width百分比相对于width。
    • 子元素的top和bottom/(left和right)如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/(宽度)。
    • 子元素的padding/margin如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
    • border-radius、translate、background-size等不一样，如果设置border-radius为百分比，则是相对于自身的宽度。

    缺点：百分比单位容易使布局问题变得复杂

    6.自适应场景下的rem解决方案

    rem单位只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px。

    1 rem = 16px
    10px/16px=0.625

     所以，可以将html的font-size设置为：

        html{ font-size: 62.5% }

     使得rem转为px变得容易计算。

        1 rem = 10px

     通过rem来实现响应式布局

    由于rem单位都是相对于根元素html的font-size来决定大小的，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

    因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

    1. function refreshRem() {
    2.     var docEl = doc.documentElement;
    3.     var width = docEl.getBoundingClientRect().width;
    4.     var rem = width / 10;
    5.     docEl.style.fontSize = rem + 'px';
    6.     flexible.rem = win.rem = rem;
    7. }
    8. win.addEventListener('resize', refreshRem);

    rem布局的缺点：在响应式布局中，必须通过js来动态控制根元素font-size的大小。

    也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。

     7.通过vw/vh来实现自适应

    css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。

    单位含义
    vw相对于视窗的宽度，视窗宽度是100vw
    vh相对于视窗的高度，视窗高度是100vh
    vminvw和vh中的较小值
    vmaxvw和vh中的较大值

    视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为：

    单位含义
    %大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
    vw/vh相对于视窗的尺寸

    vm单位换算：

    对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw 

    1px = （1/375）*100 vw

    缺点：绝大多数的浏览器支持vw单位，但是ie9-11不支持vmin和vmax（很少用），vw单位在绝大部分高版本浏览器内的支持性很好。但是opera浏览器整体不支持vw单位，因此需选择其他方案。

     click 在 ios 上有 300ms 延迟，原因及如何解决？

    (1)粗暴型，禁用缩放
    (2)利用 FastClick，其原理是：
    检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正触发的事件给阻断掉。

     addEventListener 参数

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

     介绍知道的 http 返回的状态码

    100 Continue 继续。客户端应继续其请求
    101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更
    高级的协议，例如，切换到 HTTP 的新版本协议
    200 OK 请求成功。一般用于 GET 与 POST 请求
    201 Created 已创建。成功请求并创建了新的资源
    202 Accepted 已接受。已经接受请求，但未处理完成
    203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原
    始的服务器，而是一个副本
    204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，
    可确保浏览器继续显示当前文档
    205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文
    档视图。可通过此返回码清除浏览器的表单域
    206 Partial Content 部分内容。服务器成功处理了部分 GET 请求
    300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特
    征与地址的列表用于用户终端（例如：浏览器）选择
    301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会
    包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替
    302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有
    URI
    303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看
    304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回
    任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返
    回在指定日期之后修改的资源
    305 Use Proxy 使用代理。所请求的资源必须通过代理访问
    306 Unused 已经被废弃的 HTTP 状态码
    307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向
    400 Bad Request 客户端请求的语法错误，服务器无法理解
    401 Unauthorized 请求要求用户的身份认证
    402 Payment Required 保留，将来使用
    403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
    404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站
    设计人员可设置"您所请求的资源无法找到"的个性页面
    405 Method Not Allowed 客户端请求中的方法被禁止
    406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
    407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者
    应当使用代理进行授权
    408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
    409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发
    生了冲突
    410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永
    久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置
    411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息
    412 Precondition Failed 客户端请求信息的先决条件错误
    413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。
    为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则
    会包含一个 Retry-After 的响应信息
    414 Request-URI Too Large 请求的 URI 过长（
    URI 通常为网址），服务器无法处理
    415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
    416 Requested range not satisfiable 客户端请求的范围无效
    417 Expectation Failed 服务器无法满足 Expect 的请求头信息
    500 Internal Server Error 服务器内部错误，无法完成请求
    501 Not Implemented 服务器不支持请求的功能，无法完成请求
    502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接
    收到了一个无效的响应
    503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。
    延时的长度可包含在服务器的 Retry-After 头信息中
    504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
    505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处
    理

     讲讲 304

    304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。

      状态码 304 和 200​​​​​​​ 

    • 状态码 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。即返回的数据为全量的数据，如果文件不通过 GZIP 压缩的话，文件是多大，则要有多大传输量。
    • 状态码 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。

     强，协商缓存

    缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定。
    获取资源形式
    		状态码
    发送请求到服务器
    强缓存 
    从缓存取
    200（from cache）
    否，直接从缓存取
    协商缓存
    从缓存取
    304（not modified）
    是，通过服务器来告知缓存是否可用

    强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话，

    cache-control 的优先级高于 expires。

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

     强缓存、协商缓存什么时候用？

    因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们 还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资 源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地 的缓存，以最大程度的减少因网络请求而产生的资源浪费。

    说一下浏览器缓存/具体有哪些请求头是跟缓存相关的

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

    • 强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话，cache-control 的优先级高于 expires。
    • 协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

    GET 和 POST 的区别

    • get 参数通过 url 传递，post 放在 request body 中。
    • get 请求在 url 中传递的参数是有长度限制的，而 post 没有。
    • get 比 post 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
    • get 请求只能进行 url 编码，而 post 支持多种编码方式
    • get 请求会浏览器主动 cache，而 post 支持多种编码方式。
    • get 请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留。
    • get 和 post本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。get 产生一个 TCP 数据包；post产生两个 TCP 数据包。

     理解301 和 302 

    >>了解知识点：

    重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）

    • 什么时候需要重定向？

            1）网站调整（如改变网页目录结构）；

            2）网页被移到一个新地址；

            3）网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

    • 这种情况下，重定向有什么好处？

           这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

    >>301和302状态码的共同点和不同点

    • 301 redirect: 301 代表永久性转移(Permanently Moved)
    • 302 redirect: 302 代表暂时性转移(Temporarily Moved )
    1. 301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。
    2. 301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎de在抓取新内容的同时也将旧的网址交换为重定向之后的网址；302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址——这是它们的不同点。

    >>使用301和302跳转的场景：

    使用301跳转的场景：

    1. 域名到期不想续费（或者发现了更适合网站的域名），想换个域名。
    2. 在搜索引擎的搜索结果中出现了不带www的域名，而带www的域名却没有收录，这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。
    3. 空间服务器不稳定，换空间的时候。

    使用302跳转的场景：

    • 尽量使用301跳转！

    使用302跳转的场景为什么要尽量要使用301跳转？

    ——网址劫持！

    从网址A 做一个302 重定向到网址B 时，主机服务器的隐含意思是网址A 随时有可能改主意，重新显示本身的内容或转向其他的地方。大部分的搜索引擎在大部分情况下，当收到302 重定向时，一般只要去抓取目标网址就可以了，也就是说网址B。如果搜索引擎在遇到302 转向时，百分之百的都抓取目标网址B 的话，就不用担心网址URL 劫持了。问题就在于，有的时候搜索引擎，尤其是Google，并不能总是抓取目标网址。比如说，有的时候A 网址很短，但是它做了一个302 重定向到B 网址，而B 网址是一个很长的乱七八糟的URL 网址，甚至还有可能包含一些问号之类的参数。很自然的，A 网址更加用户友好，而B 网址既难看，又不用户友好。这时Google 很有可能会仍然显示网址A。由于搜索引擎排名算法只是程序而不是人，在遇到302 重定向的时候，并不能像人一样的去准确判定哪一个网址更适当，这就造成了网址URL 劫持的可能性。也就是说，一个不道德的人在他自己的网址A 做一个302 重定向到你的网址B，出于某种原因， Google 搜索结果所显示的仍然是网址A，但是所用的网页内容却是你的网址B 上的内容，这种情况就叫做网址URL 劫持。你辛辛苦苦所写的内容就这样被别人偷走了。302 重定向所造成的网址URL 劫持现象，已经存在一段时间了。不过到目前为止，似乎也没有什么更好的解决方法。在正在进行的谷歌大爸爸数据中心转换中，302 重定向问题也是要被解决的目标之一。从一些搜索结果来看，网址劫持现象有所改善，但是并没有完全解决。

    301跳转告诉查找引擎，这个地址弃用了，永远转向一个新地址，可以转移新域名的权重。而302重定向很容易被搜索引擎误认为是利用多个域名指向同一网站，导致你的网站就被封掉，原因是“利用重复的内容来干扰Google搜索结果的网站排名”。

    301 和 302 的区别

    1. 301 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引 用都应该使用本响应返回的若干个 URI 之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。
    2. 302 Found 请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下，这个响应才是可缓存的。字面上的区别就是 301 是永久重定向，而 302 是临时重定向。
    3. 301 比较常用的场景是使用域名跳转。302 用来做临时跳转 比如未登陆的用户访问用户中心重定向到登录页面。

    HTTP 支持的方法

    GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT
    ​​​​​​​

    如何画一个三角形

    参考回答：
    三角形原理：边框的均分原理 
    1. <style>
    2. 	.box {
    3. 		width: 0;
    4. 		height: 0;
    5. 		border: 100px solid transparent;
    6. 		border-left-color: red;
    7. 		border-right-color: green;
    8. 		border-top-color: blue;
    9. 		border-bottom-color: yellow;
    10. 	}
    11. style>
    12. <body>
    13. 	<div class="box">div>
    14.  
    15. body>

    1. <style>
    2. 	/* div {
    3. 		width: 0px;
    4. 		height: 0px;
    5. 		border-top: 10px solid red;
    6. 		border-right: 10px solid transparent;
    7. 		border-bottom: 10px solid transparent;
    8. 		border-left: 10px solid transparent;
    9. 	} */
    10. 	div {
    11. 		width: 0px;
    12. 		height: 0px;
    13. 		border: 10px solid transparent;
    14. 		border-top-color: green;
    15. 	}
    16. style>
    17.  
    18. <body>
    19. 	<div>div>
    20. body>

     ​​​​​​​HTML5 新增的元素

    首先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义化标签，在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型，在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio 和 vedio，另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。

    在地址栏里输入一个 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。

    常见的 HTTP 的头部

    可以将 http 首部分为通用首部，请求首部，响应首部，实体首部

    • 通用首部表示一些通用信息，比如 date 表示报文创建时间，
    • 请求首部就是请求报文中独有的，如 cookie，和缓存相关的如 if-Modified-Since
    • 响应首部就是响应报文中独有的，如 set-cookie，和重定向相关的 location，
    • 实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描述主题类型，content-Encoding 描述主体的编码方式。
    HTTP2.0 的特性
    http2.0 的特性如下：
    1. 内容安全，应为 http2.0 是基于 https 的，天然具有安全特性，通过 http2.0 的特性可以避免单纯使用 https 的性能下降
    2. 二进制格式，http1.X 的解析是基于文本的，http2.0 将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令。
    3. 多路复用，这个功能相当于是长连接的增强，每个 request 请求可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面，另外多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输。​​​​​​​

    cache-control 的值有哪些

    cache-control 是一个通用消息头字段被用于 HTTP 请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有 private、no-cache、max-age、must-revalidate 等，默认为 private。

    浏览器在生成页面的时候，会生成那两颗树？ ​​​​​​​

    构造两棵树，DOM 树和 CSSOM 规则树， 当浏览器接收到服务器相应来的 HTML 文档后，会遍历文档节点，生成 DOM 树， CSSOM 规则树由浏览器解析 CSS 文件生成。

    csrf 和 xss 的网络攻击及防范 ​​​​​​​

    • CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候 CSRF 就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查 https 头部的 refer，使用 token。
    • XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取 cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在 url 地址的请求参数中，防御的话为 cookie 设置 httpOnly 属性，对用户的输入进行检查，进行特殊字符过滤。

    ​​​​​​​​​​​怎么看网站的性能如何

    检测页面加载时间一般有两种方式，一种是被动去测：就是在被检测的页面置入脚本或 探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析，另一种主动监测 的方式，即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数 据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客。

    介绍 HTTP 协议(特征)

    HTTP 是一个基于 TCP/IP 通信协议来传递数据（HTML 文件, 图片文件, 查询结果等） ​​​​​​​HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在 WWW 中使用的是 HTTP/1.0 的第六版，HTTP/1.1 的规范化工作正在进行之中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。Web 服务器根据接收到的请求后，向客户端发送响应信息。

    输入 URL 到页面加载显示完成发生了什么/浏览器输入网址到页面渲染全过程 ?

    1. DNS 解析
    2. TCP 连接
    3. 发送 HTTP 请求
    4. 服务器处理请求并返回 HTTP 报文
    5. 浏览器解析渲染页面
    6. 连接结束​​​​​​​

    描述一下 XSS 和 CRSF 攻击？防御方法？

    1. XSS, 即为（Cross Site Scripting）, 中文名为跨站脚本, 是发生在目标用户的浏览器层面 上的，当渲染 DOM 树的过程成发生了不在预期内执行的 JS 代码时，就发生了 XSS 攻击。大多数 XSS 攻击的主要方式是嵌入一段远程或者第三方域上的 JS 代码。实际上是在目 标网站的作用域下执行了这段 JS 代码。
    2. CSRF（Cross Site Request Forgery，跨站请求伪造），字面理解意思就是在别的站点伪造 了一个请求。专业术语来说就是在受害者访问一个网站时，其 Cookie 还没有过期的情 况下，攻击者伪造一个链接地址发送受害者并欺骗让其点击，从而形成 CSRF 攻击。 ​​​​​​​

    XSS 防御的总体思路是：对输入(和 URL 参数)进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤，对 url 中的参数进行过滤，过滤掉会导致脚本执行的相关内容； 然后对动态输出到页面的内容进行 html 编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的 XSS 攻击。

    防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。

    ​​​​​​​​​​​​​​​​​​​​​

  • 相关阅读:
    LeetCode：342（Python）—— 4 的幂
    计算机毕业设计Java动漫论坛系统（源码+系统+mysql数据库+lw文档）
    深度解读汽车域控制器
    ConcurrentHashMap的transfer阅读
    Ubuntu server 24 (Linux) 普通用户不能sudo 也不能使用root登录 忘记root密码 修复解决方案
    CustomTabBar 自定义选项卡视图
    lucidrains / DALLE2-pytorch原理
    156.25MHz的差分晶体振荡器SG3225VEN
    基于PHP+MySQL高校教务选课系统的设计与实现
    前端技能树，面试复习第 55 天—— 代码输出：同步异步任务 | 事件循环
  • 原文地址：https://blog.csdn.net/weixin_41987016/article/details/127054018