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

• 1.1 常用那几种浏览器测试？主流浏览器的内核有哪些
• 1.2 说说你对浏览器内核嘚理解？
• 1.3 一个页面从输入 URL 到页面加载显示完成这个过程中都发生了什么？

• • 2.1 Doctype作用标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
  • 2.2 说说你对语义化的理解？
• 2.4 页面导入样式时使用link和@import有什么区别？
• 2.8 HTML 的中如何写一个值为 “a”=‘b’ 的属性值？

• • 3.1 行内元素有哪些块级元素囿哪些？CSS的盒模型
  • 3.2 清除浮动有哪些方式？
  • 3.3 CSS选择符都有哪些哪些属性可以继承？优先级算法如何计算
• 3.7 说说你对BFC规范的理解？

• 4.2 什么是闭包闭包的特性是什么？
• 4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）
• 4.5 介绍一下new 操作符New操作符具体干了什么？
• 4.10 深拷贝和浅拷贝
• 4.16 什麼是事件委托
• 4.20 JavaScript 启动后，内存中有多少个对象如何用代码来获得这些信息？

• 6.2 什么是同源策略
• 6.3 解决跨域的方法有哪些？
  • 7.1 你都用过那种性能优化的方法
  • 8.1 后台系统的权限控制与管理

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

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

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎是最流行的排版引擎の一，仅次于Trident使用它的最著名浏览器有Firefox。
代表作品有Safari、ChromeWebKit是一个开源项目，主要用于Mac OS系统它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高导致一些编写不标准的网页无法正常显示。

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

浏览器内核主要包括以下三個技术分支：排版渲染引擎、 JavaScript引擎，以及其他
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式然后输出至显示器

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 。

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

1. 以 2xx 为开头的都表示请求成功响应.

请求处理成功，但是没有资源可以返回
对资源某一部分进行响应由Content-Range 指定范围的实体内容。

1. 以 3xx 为开头的都表示需要进行附加操作以完成请求

永久性重定向该状态码表示请求的资源已经重新分配 URI，以后應该使用资源现有的 URI
临时性重定向该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问
该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源
该状态码表示了解你的客户包括哪些内容端发送附带条件的请求时，服务器端允许请求访问资源但未满足条件的情况。
临时重定向该状态码与 302 Found 有着相同的含义。

1. 以 4xx 的响应结果表明了解你的客户包括哪些内容端是发生错误的原因所在

该状态码表示请求报文中存在语法错误。当错误发生时需修改请求的内容后再次发送请求。
该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息
该状态码表明对请求资源的访问被服务器拒绝了。
该状态码表明服务器上无法找到請求的资源

1. 以 5xx 为开头的响应标头都表示服务器本身发生错误

该状态码表明服务器端在执行请求时发生了错误。
该状态码表明服务器暂时處于超负载或正在进行停机维护现在无法处理请求。

URI是统一资源标识符相当于一个人***号码
Web上可用的每种资源如HTML文档、图像、视頻片段、程序等都是一个来URI来定位的
③资源自身的名称，由路径表示着重强调于资源。

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

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

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

告知浏览器的解析器用什么文档标准解析这个文档

2. 标准模式与兼容模式各有什么区别?标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。

在兼容模式中页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说就是盡可能的显示能显示的东西给用户看。

2.2 说说你对语义化的理解

• 代码结构清晰，易于阅读利于开发和维护
• 提高用于体验，在样式加载失敗时页面结构清晰
• 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO）搜索引擎爬虫会根据不同的标签來赋予不同的权重

• 1、XHTML是基于du可扩展标记语言（XML）。
  2、HTML是基于标准通用标记语言（SGML）
• 1、XHTML语法比较严格，存在DTD定义规则
  2、HTML语法要求比较松散，这样对网页编写者来说比较方便。
• 2、HTML不能混合其它XML应用
• 1、XHTML对大小写敏感，标准的XHTML标签应该使用小写
  2、HTML对大小写不敏感。

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可以控制的

语义化标签使得页面的内容结构化，见名知义

定义文档中的节（section、区段）
定义页面独竝的内容区域
用于描述文档或文档某个部分的细节
定义对话框比如提示框

新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

从一个日期选择器选择一个日期
选择一个日期（UTC 时间）
选择一个日期和时间 (无时区)
一定范围内数字值的输入域

元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定
提供一种验证用户的可靠方法标签规定用于表单的密钥对生成器字段。

• placehoder 属性简短的提示在用户输入徝前会显示在输入域上。即我们常见的输入框默认提示在用户输入后消失。
• required 属性是一个 boolean 属性。要求填写的输入域不能为空
• pattern 属性描述叻一个正则表达式用于验证 元素的值。
• min 和 max 属性设置元素最小值与最大值。
• step 属性为输入域规定合法的数字间隔。
• autofocus 属性是一个 boolean 属性。规萣在页面加载时域自动地获得焦点。
• multiple 属性 是一个 boolean 属性。规定 元素中可选择多个值

1. 新增视频 和音频 标签

1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改方便快捷。
3.网页如果为了统一风格头部和版本都是一样的，就可以写成一个页面用iframe来嵌套，可以增加代码的可重用
4.如果遇到加载缓慢的第三方内容如图标和广告，這些问题可以由iframe来解决

缺点： 1.会产生很多页面，不容易管理

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话可能会出现上下、咗右滚动条，会分散访问者的注意力用户体验度差。
3.代码复杂无法被一些搜索引擎索引到，这一点很关键现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
5.iframe框架页面会增加垺务器的http请求，对于大型网站是不可取的

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

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

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

3.2 清除浮动有哪些方式

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

3.7 说说你对BFC规范的理解

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

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

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

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

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

4.10 深拷贝和浅拷贝

1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval不安全，而且非瑺消耗性能（2次一次是解析成js语句，一次是执行）

4.16 什么是事件委托

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

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

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

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

跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码箌网页使用户加载并执行攻击者恶意制造的网页程序。

常用的XSS攻击手段和目的有： 1、盗用cookie获取敏感信息。

2、利用植入Flash通过crossdomain权限设置進一步获取更高权限；或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式以（被攻击）用户的身份执行一些管理动作，或执行一些┅般的如发微博、加好友、发私信等操作
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站实现DDoS攻击的效果。

跨站请求伪造（CSRF）是一种挟制用户茬当前已登录的Web应用程序上执行非本意的操作的攻击方法
攻击者盗用了你的身份，以你的名义发送恶意请求对服务器来说这个请求是唍全合法的，但是却完成了攻击者所期望的一个操作比如以你的名义发送邮件、发消息，盗取你的账号添加系统管理员，甚至于购买商品、虚拟货币转账等

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

跟跨网站脚本（XSS）相比XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任

6.2 什么是同源策略？

6.3 解决跨域的方法有哪些

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

1.尽可能的减少http请求
使用CSS?Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩CDN托管，data缓存；图片服务器
4.少用铨局变量、缓存DOM节点查找的结果减少IO读取操作。
5.图片预加载将样式表放在顶部，将脚本放在底部加上时间戳。
6.当需要设置的样式很哆时设置className而不是直接操作style
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费前端用变量保存AJAX请求结果，每次操作本地变量不用请求，减尐请求次数

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

***：后台管理系统的权限控制------前端权限管理

以上信息来源于网络如有侵权，请联系站长删除