2023.01.11 某国企前端笔试题一部分
什么时候开始记录都不算晚，即使已经是晚了，但是再早的东西也会有淘汰的时候，收藏另说。
问题主要选取一些高频和基础的问题。（问题的回答只是本人的理解，非参考答案，有些答案只给个提示，详解可谷歌百度或在掘金内搜索相关文章、同时本人每次回顾更新文章都会重新搜一下，与时俱进同步新答案）
HTML、XHTML、HTML5的区别是?常见的浏览器内核有哪些？
答：前两者的主要区别是：1.XHTML标签必须被关闭、2.XHTML标签及属性必须小写、3.XHTML标签必须用引号、4.XHTML标签用id属性代替name属性。HTML5是：1：文档类型简写、2：字符编码简写、3：标签不再区分大小写、4：允许属性值不加引号、5：允许部分属性值的属性值省略。
简答：HTML指的是HTML4.01，XHTML是更严格、更纯净的HTML4.01过渡版，HTML5是HTML的升级版，他们之间存在标签关闭及属性大小写还有类型简写的不同。常见浏览器内核：IE的Trident、FireFox的Gecko、dEdg的EdgeHTML、Chrome的的Webkit、Blink、Safari的Webkit。
HTTP常见的状态码有哪些？各自含义是？适用于什么场景？
答：101（切换请求协议）从 HTTP 切换到 WebSocket、200（请求成功）服务器已成功处理了请求并返回数据、301（永久重定向）会缓存、302（临时重定向）不会缓存、304（未修改）自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容、403（禁止）服务器拒绝请求、404 （未找到）资源未找到，请求的网页不存在、405 （请求方式不对）、500（服务器端错误）、503（服务端暂时无法处理请求）可能过载或维护、
使用场景：1xx：1开头的是信息状态码
2xx：2开头的是请求成功
3xx：3开头的是重定向
4xx：4开头的是客户端请求错误
5xx：5开头的是服务器请求错误
HTTP和HTTPS之间的区别是？
答：HTTP是超文本传输协议，HTTPS是超文本传输安全协议，是以安全为目标的HTTP通道，简单讲是HTTP的安全版。1、http信息是明文传输，https则是通过ssl加密传输协议。2、http和https使用的是完全不同的连接方式，前者默认端口是80，后者默认是443。3、https需要到证书机构申请证书。
JavaScript中的==、===的区别是？0、NAN、null、undefined、false的区别是？
答：'=='表示等于，是相等运算符、'==='表示值相等并且类型相同，是全等运算符。如果操作数的类型不同，`== `运算符会在比较之前尝试将它们转换为相同的类型。'==='不尝试类型转换，始终将不同类型的操作数视为不同。
区别：0是数字类型，它的布尔值是false、NaN的类型是一个number，代表不是数值类型，代表一个“不是数字”或者不存在且不等于自身的值。这个特殊的值是因为运算不能执行而导致的、null的类型是个一对象，代表一个空值，它对应的布尔值false，数字0，字符串“null”、undefined表示未定义或不存在，undefined对应类型是undefined，布尔型false，字符串undefined，数字计算结果一定是NaN、false是布尔值类型，表示真假的意思。
拓展：" "是字符串类型，它的布尔值是false,在IF条件运算中undefined、null、NaN、false、0、""、false都是相对等于（==）false的，{}和[]是true；其中"undefined==null" 和 "0==false"、"''==false"的关系运算结果都是true
CSS中的display:none、visibility:hidden和opacity:0互相的区别是？
答:display：none是设置元素展示方式，能隐藏元素，不占据空间，不可点击，性能消耗大，导致回流、visibility:hidden是设置元素是否可见，能隐藏元素，占据空间，不可点击，性能消耗小，导致重绘、opacity:0是设置元素透明度为0，能隐藏元素，占据空间，隐藏后仍可点击，性能消耗小，导致重回。
如何克服HTTP协议的无状态的缺陷？Cookie和Session的区别分别是？
答：无状态是指协议对于事务处理没有记忆能力，服务器不知道客户端是什么状态。即我们给服务器发送 HTTP 请求之后，服务器根据请求，会给我们发送数据过来，但是，发送完，不会记录任何信息。缺少状态意味着如果后续需要处理，需要提供前面的信息。克服无状态协议缺陷的办法是通过Cookie和Session会话保存信息。
区别：1、存储位置不同：Cookie将状态/数据信息保存在客户端，Session将状态/数据信息保存在服务器端。
2、存储容量大小不同：cookie存储的容量较小，一般<=4KB，session存储容量大小没有限制。
3：存储有效期不同：cookie可以长期存储，session在超过一定的操作时间(通常为30分钟)后会失效，但是当关闭浏览器时浏览器会自动清除掉session中的信息。
4：安全性不同：cookie存储在客户端，可被欺骗，session存储在服务器上安全性较高。
5：域支持范围不同
6：对服务器压力不同
7：存储的数据类型不同
HTTP协议有哪些请求方式？请求报文和响应报文分别包含哪几个部分？
答：GET、POST、HEAD、PUT、DELETE、OPTIONS、CONNECT。
请求报文包含3部分：请求行：包含请求方法、URI、HTTP版本信息、请求首部字段、请求内容实体。
响应报文包含3部分：状态行，包含http版本、状态码、状态码的原因短语、相应首部字段、相应内容实体。
请描述Vue双向绑定原理，以及说明 Vue 从初始化页面一修改数据一刷新页面的过程。
答：vue 在实例化的时候，使用 Object.definePropety() 方法或 Proxy 构造函数，对 data 进行 getter 和 setter 的处理。在组件渲染时，若用到 data 里的某个数据，这个数据就会被依赖收集进watcher 里。当数据更新，如果这个数据在 watcher 里，就会收到通知并更新，否则不会更新——vue 采用“数据劫持”+“观察者模式（发布者-订阅者模式）”相结合的方式实现了双向绑定。
拓展：区分响应式和双向绑定：
响应式一般指：数据改变驱动视图改变，是单向的
双向绑定：是双向的，视图反过来也可以改变数据。也就是说响应式是双向绑定的一环
您常用的前端开发工具、前端开发库或框架有哪些？
答：VSCode、HbuiderX、WebStorm。框架：Vue、React、Uni-app(基于vue.js核心)、NodeJs。开发库：Vant-ui组件库、TDesign组件库、Uni-app组件库、Uview-ui组件库、Element-ui组件库、Ant-Design-ui组件库。其他：DriverJs 引导页库、typedJs 打字效果、animeJs 动画库。
您了解哪些前端性能优化的方法？
答：从网络层面和浏览器层面两个层面优化，保证资源更快的 加载速度，保证视图更快的 渲染速度/交互速度。网络层面：压缩资源体积，使用gzip格式进行http压缩、压缩图片资源、减少http请求数量、减少不必要的coolie、CDN托管静态资源+HTTP缓存、HTTP协议升级为2.0。渲染层面：减少阻塞渲染的因素、懒加载、白屏优化、服务端渲染、预渲染。交互层面：减少回流/重绘/、注意防抖/节流、使用web worker 、使用虚拟列表、大文件分片上传、vue项目优化。
（参考链接：https://mp.weixin.qq.com/s/FbFtNwBKaU7o0TcPFZSpvA）
请简明扼要地描述微信小程序从0到1的整个过程。
答：整体流程：小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序
1、注册微信小程序账号，进入微信公众平台，选择小程序的账号类型按照流程进行注册。2、下载开发工具，有了账号后，我们就可以使用这个账号进行开发了，开发或者预览用的IDE是腾讯出品的微信开发者工具。3、开始进入小程序前端开发，打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。4、前端开发过程，选好语言框架和开发库，开始按照原型开发前端页面和接口连接。5、打包上线，开发完成后就可以准备上线了，首先在开发者工具里将写好的代码上传，点击上传，定义版本号和注释，再到微信公众平台的版本管理提交审核，待审核通过了就表示上线成功了，就可以在微信中搜索到你的小程序进行访问了。
请列举至少3项浏览器中碰到的兼容性问题，分别是如何解决的？
答：1、桌面端：语法过新，旧款浏览器无法兼容并失效问题。编译前采用转换当前代码并编译成ES5语法插件。2、桌面端：分辨率缩放比例不同，显示器的分辨率和显示器/浏览器设置的缩放比例不同，导致页面布局错乱，最终显示效果兼容问题。使用响应式布局，使用根据主流分辨率适配当前页面布局。3、移动端：不同屏幕尺寸大小不同，使用flex/布局，百分比/rem/rpx/vh、vw作为单位来动态达到适配。（还有很多很多代码语法上的兼容，不列举了。）
什么是反向代理？反向代理有几种方式？
答：反向代理是一种服务，它接受客户端请求，将请求发送到一个或多个代理服务器，获取响应，然后将服务器的响应传递给客户端。反向代理有基于IP代理，基于域名代理，基于端口代理三种方式。
简述一个页面从输入URL到页面加载显示完成的过程？
答：一、DNS解析，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。二、建立TCP连接，TCP三次握手。三、发送http请求，服务器处理请求并返回http报文。四、浏览器解析渲染页面。
什么是跨域，跨域的解决办法什么？
答：跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。
SSL证书有哪些？自签证书会导致什么问题？
答：SSL标准证书有自签名证书和CA机构颁发的证书，自己生成的SSL证书也叫自签名SSL证书，签发很随意，任何人都可以签发，容易被黑客仿冒利用，不是由正规的CA机构颁发的，所以不受浏览器的信任。而付费的SSL证书，是由受信任的CA机构颁发的，申请时会对域名所有权和企业相关信息进行验证，安全级别是比较高的，而且备受各大浏览器的信任。 缺点：应用程序/操作系统不信任自签名证书，这可能会导致身份验证错误等；自签名证书可使用低哈希和密码技术。因此，自签名证书的安全级别可能不满足当前的安全策略等；不支持高级PKI（公钥基础结构）功能，例如在线检查撤销列表等；自签证书的有效期通常为1年，这些证书需要每年更新/更换，这是一个很难维护的问题，如果设置有效期过长，就容易被破解；与自签名SSL证书相关联的安全警告会驱逐潜在客户；自签SSL证书最容易被假冒和伪造。
