前端面试需要知道的知识 17题（非原创）

我是大自然的搬运工

1、w3c标准有哪些

1.结构标准，代表语言是xHTML

2.表现标准，代表语言是CSS

3.动作标准，代表语言是JavaScrip

例如

1.同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。

2.所有的标签都使用小写。

3.JS和CSS外部引入文件必须加上类型定义。就是type属性必须填写

2、移动端不同浏览器之间的差异

有点多，详看参考链接 https://blog.csdn.net/zytyxz/article/details/78492428

3、react和vue之间的区别

1.监听数据变化的实现原理不同
Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。
2.数据流的不同
Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。

React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。
3.模板渲染方式的不同
模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染

模板的原理不同，React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱
4，渲染过程不同
Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。
5.框架本质不同
Vue本质是MVVM框架，由MVC发展而来；

React是前端组件化框架，由后端组件化发展而来。
————————————————
版权声明：本文为CSDN博主「秦罹」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_26190177/article/details/93741368

4、es规范是什么

太多了
请看下面的链接
https://yq.aliyun.com/articles/617716?utm_content=m_1000007931

5、http https协议是什么

基本概念

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

区别

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

6、区块链是什么

每个记录，就是一个区块(block)，会盖上时间戳，每个新产生的区块严格按照时间线形顺序推进，形成不可逆的链条(chain)，所以叫做区块链(Blockchain)。

image
而且每个区块都含有其上一个区块的哈希值，确保区块按照时间顺序连接的同时没有被篡改。
区块链是一种分布式数据库，是一串使用密码学方法相关联产生的数据块，每个数据块都包含了一次网络交易信息，用于验证其信息的有效性和生成下一个区块。
核心内容：
1、去中心化,这是区块链颠覆性特点，不存在任何中心机构和中心服务器，所有交易都发生在每个人电脑或手机上安装的客户端应用程序中。实现点对点直接交互，既节约资源，使交易自主化、简易化，又排除被中心化代理控制的风险。
2、开放性,区块链可以理解为一种公共记账的技术方案，系统是完全开放透明的，账簿对所有人公开，实现数据共享，任何人都可以查账。
3、不可撤销、不可篡改和加密安全性

7、tcp/ip的工作原理是什么

传输控制协议（TCP）是一种网络通信协议，旨在通过Internet发送数据包。TCP是OSI层中的传输层协议，用于通过传输和确保通过支持网络和Internet传递消息来在远程计算机之间创建连接
TCP/IP不是一个协议，而是一个协议族的统称。里面包括IP协议、IMCP协议、TCP协议。
不懂看链接吧https://blog.csdn.net/xk7298/article/details/80557346

8、前端工程化、模块化、组件化的理解和总结

:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写
模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。
组件化
①页面上的每个独立的、可视/可交互区域视为一个组件;
②每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
③由于组件具有独立性,因此组件与组件之间可以自由组合;
④页面只不过是组件的容器,负责组合组件形成功能完整的界面;
⑤当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

组件化将页面视为一个容器,页面上各个独立部分例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。

模块化开发的4点好处：

1 避免变量污染，命名冲突

2 提高代码复用率

3 提高维护性

4 依赖关系的管理

加载模块

这是一个模块

var name = 'Byron';  
  
function printName(){  
    console.log(name);  
}  
  
function printFullName(firstName){  
    console.log(firstName + name);  
}  
  
module.exports = {  
    printName: printName,  
    printFullName: printFullName

然后加载模块

var nameModule = require('./myModel.js');
nameModule.printName();

参考链接
https://www.cnblogs.com/angel648/p/11370327.html

9、如何进行webpack打包编译

查看一下文章
https://www.cnblogs.com/hanguidong/p/9496444.html

10、浏览器运行原理

3.1渲染引擎

渲染引擎在浏览器窗口中显示所请求的内容，浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，所以渲染引擎也称为浏览器内核。渲染引擎一开始会从网络层获取请求文档的内容，通常以8K分块的方式完成。获取了文档内容之后，渲染引擎开始正式工作，其基本流程如图所示：
渲染引擎解析HTML文档，并将文档中的标签转化为DOM节点树，即” 内容树” 。同时，它也会解析外部CSS文件以及style标签中的样式数据。这些样式信息连同HTML中的” 可见内容” 一道，被用于构建另一棵树——” 渲染树(Render树)” 。渲染树构建完毕之后，将会进入” 布局” 处理阶段，即为每一个节点分配一个屏幕坐标。再下一步就是绘制(painting)，即遍历render树，并使用UI后端层绘制每个节点。

注意：这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

DOM:文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
渲染引擎解析：
解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。

3.1.3 CSS解析
css属于上下文无关文法，可以用前面所描述的解析器来解析。 Css规范定义了css的词法及语法文法。每个符号都由正则表达式定义了词法（词汇表），语法用BNF(由 John Backus 和 Peter Naur 首先引入的用来描述计算机语言语法的符号集)进行描述。
Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。
3.2 JS引擎

JS引擎是一个专门处理JS脚本的虚拟机，专门设计来解释和执行的 JavaScript 代码。 JS引擎会加载你的源代码，把它分解成字符串，把这些字符串转换成编译器可以理解的字节码，然后执行这些字节码。不同浏览器有不同的JS引擎

前端处理流程简介

这个流程大家可以参考网上很多人总结的各个版本的从输入一个url到看到页面，发生了什么过程。在这里我用自己的话简单概括为以下几点（仅供参考，欢迎指正）：

1、输入url

2、查看浏览器缓存，看是否有缓存，如果有缓存，继续查看缓存是否过期，如果没有过期，直接返回缓存页面，如果没有缓存或者缓存过期，发送一个请求。

3、浏览器解析url地址，获取协议、主机名、端口号和路径。

4、获取主机ip地址过程

（1）浏览器缓存

（2）主机缓存

（3）hosts文件

（4）路由器缓存

（5）DNS缓存

（6）DNS递归查询

5、浏览器发起和服务器的TCP连接，执行三次握手（略）

6、三次握手连接后，浏览器发送一个http请求（这部分是重点，请查询相关资料，详细了解http协议关于请求格式和重要的几个请求头字段含义）。

7、服务器收到请求，转到相关的服务程序，期间可能需要连接并操作数据库（主要分get和post请求）。

8、服务器看是否需要缓存，服务器处理完请求，发出一个响应（这部分也是重点，请查询资料了解http响应头各个字段的含义）

9、服务器并根据请求头包含信息决定是否需要关闭TCP连接（如需关闭，则需要四次挥手过程）

10、浏览器对接收到的响应进行解码

11、浏览器解析收到的响应并根据响应的内容（假如是HTML文件）进行构建DOM树，构建render树，渲染render树等过程

12、处理嵌入的其他资源如css文件、js文件、图片文件、音视频等文件，处理过程类似上面的步骤在此不详述。

————————————————
版权声明：本文为CSDN博主「CoolSummmer」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014744118/article/details/80698602

11、轮播图原理

基本功能
自动无缝滚动
左右按钮控制滚动
点击圆点切换图片
思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击pre,next进行左右滑动显示
代码：
————————————————
版权声明：本文为CSDN博主「My-Lady」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/heshan1992/article/details/77504204
参考链接https://blog.csdn.net/weixin_30314793/article/details/101831477?utm_source=distribute.pc_relevant.none-task

12、知道react的新属性和新特性吗

1 react的三大属性 state props refs

props 来自外部属性
states 来自内部状态
refs 用于表示组件内某个元素

新特性

Context
ContextType
lazy
Suspense
错误边界（Error boundaries）
memo

13、什么是响应式布局

响应式布局：一个网站能够兼容多个终端，实现不同屏幕分辨率的终端上浏览网页的不同展示方式。就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。响应式根据媒体查询做不同的布局。
自适应式布局：能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

响应式布局与自适应布局的区别是什么？

1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。
可参考链接https://blog.csdn.net/gertyy/article/details/52764527

14、web性能优化、安全有什么见解

web性能优化前端篇参考链接
1).尽可能减少HTTP请求次数
2).使用CDN
3).避免使用src和href标签
4).加入Expires或Cache-Control Header
5).使用Gzip压缩
6).在html文件顶部放置Css样式表
7).在html文件底部放置JavaScript脚本
8).避免使用CSS表达式
9).使用外部CSS和JavaScript外部文件
10).减少使用DNS查找次数
11).精简CSS和JavaScript
12).避免重向定
13).移除重复的脚本
14).配置ETag
15).缓存AJAX
16).使用GET完成AJAX请求
17).减少DOM元素的数量
18).避免404
19).减少Cookie大小
20).使用无Cookie的域
21).避免使用滤镜
22).不要在HTML中缩放图片
23).使用小favicon.icon文件，并让其可缓存

作者：人总要靠自己_趁年轻去努力
链接：https://www.jianshu.com/p/abec4f7780e5

参考链接 https://www.jianshu.com/p/527252bb715e

15、react-router路由是什么

为什么要使用路由？
1：单页页面实现页面的切换
2：可以通过URL对页面进行定位
3：语义化组织资源
一般使用react-router-dom
可参考链接 https://blog.csdn.net/weixin_43606158/article/details/90239415

16、单页面应用和多页面应用的区别

[图片上传失败...(image-4db1f7-1582195554567)]

多页面：
每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站就是多页网站，也叫多页应用
优点是：首屏时间快，seo效果好；缺点是：页面切换慢；
单页面：
第一次进入页面的时候会请求一个html文件，刷新点击一下会切换到其他组件，此时路径也相应的变化，但是并没有新的html文件的请求，页面内容发生变化。
原理是：js会感知到url的变化，通过这一点，可以用js动态的将当前的页面内容清除掉，然后将下一个页面的内容挂载到当前的页面上。这个时候路由不是后端来做了，而是前端来做，判断页面到底是显示那个组件，清楚不需要的，显示需要的组件。这种过程就是单页应用，每次跳转不请求html文件了。{页面跳转——>js渲染}

优点是：页面切换快；缺点是：首屏时间稍慢，SEO差；（请与单页面应用优缺点对比理解）

17、xss攻击和防范

指恶意攻击者往web页面里插入html代码，当用户浏览该页时，嵌入其中的html代码会被执行，从而达成恶意用户的特殊目的。
XSS攻击类型
反射型XSS攻击:浏览器——>后端——>浏览器
存储型XSS攻击:浏览器——>后端——>数据库——>后端——>浏览器
DOMBasedXSS（基于dom的跨站点脚本攻击）:URL-->浏览器
XSS防范
我们经常用<script>alert(1)</script>检测是不是有XSS漏洞，一旦弹出了1就说明有，那么我们该如何防范呢？
1.对用户输入进行检查，检查敏感字符，替换敏感字符
2.后端对输入参数进行过滤，过滤敏感字符，替换敏感字符
可参考https://www.cnblogs.com/meituantech/p/9718677.html