面试知识点

HTML的一些面试题：

 一、如何理解 HTML 语义化？

        1.增加代码可读性。 （让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息）

        2.在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

 二、从浏览器地址栏输入 url 到请求返回发生了什么

        1.输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。

        2.DNS 域名解析。

        3.TCP 连接。

        4.http 请求。

        5.服务器处理请求并返回 HTTP 报文。

        6.浏览器渲染页面

        7.断开 TCP 连接。

三、html5有哪些新特性？

• 语义化更好的内容标签（header,nav,footer,aside,article,section）
• 音频、视频API(audio,video)
• 画布(Canvas) API
• 地理(Geolocation) API
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
• sessionStorage 的数据在浏览器关闭后自动删除
• 表单控件（calendar、date、time、email、url、search）
• 新的技术webworker, websocket, Geolocation ；

四、请描述一下cookies，sessionStorage 和localStorage的区别

        cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。

        sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：cookie数据大小不能超过4k  

                  sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

 有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据  

                    sessionStorage 数据在当前浏览器窗口关闭后自动删除

                   cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

五、简述一下src与href的区别

       在HTML中，src和href是两个常用的属性，用于指定外部资源的引用。它们有以下区别：

        1. src（source）用于指定外部资源的地址，常用于引入图片、音频、视频等媒体文件，以及JavaScript文件。例如，`<img src="image.jpg">`会在页面中插入一张图片。

        2. href（hypertext reference）用于指定超链接的目标地址，常用于创建链接到其他网页或文档的锚点。例如，`<a href="https://www.example.com">点击这里</a>`会创建一个指向"https://www.example.com"的超链接。

        总结来说，src用于指定要插入或嵌入的外部资源，而href用于指定要跳转到的目标地址。

六、弹性盒子

        CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。 在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。

         属性：

        align-context、align-item、align-self、flex-basis、flex-direction、flex-flow、flex-wrap、justify-content

web前台的性能优化

一、Web前端的漏洞

        Web前端的漏洞是指在Web应用程序的前端页面中存在的安全隐患或漏洞，可能被攻击者利用进行恶意操作或获取敏感信息。以下是一些常见的Web前端漏洞类型：

        1. 跨站脚本攻击（XSS）：攻击者通过注入恶意脚本代码到Web页面中，使得用户在浏览页面时执行该恶意脚本，从而窃取用户的敏感信息或进行其他恶意操作。

        2. 跨站请求伪造（CSRF）：攻击者通过伪造合法用户的请求，在用户不知情的情况下以该用户的身份执行恶意操作，如修改用户设置、发送恶意邮件等。

        3. 点击劫持：攻击者通过将透明的页面覆盖在目标网页上，诱使用户误点击透明页面上的内容，从而执行攻击者指定的操作。

        4. 不安全的直接对象引用：在前端页面中直接暴露敏感数据或对象，攻击者可以通过修改请求参数或调用接口来获取或篡改数据。

        5. 不安全的文件上传：未对上传文件进行充分校验和过滤，导致攻击者上传恶意文件或执行任意代码。

二、Web前端性能优化

        关于Web前端性能优化，主要目标是提高网页加载速度和用户体验。以下是一些常见的性能优化技巧：

        1. 压缩和合并文件：压缩CSS、JavaScript和HTML文件，减少文件大小，并将多个文件合并为一个，减少网络请求次数。

        2. 图片优化：使用适当的图片格式、压缩图片大小，使用懒加载和延迟加载技术，减少页面加载时的图片资源消耗。

        3. 缓存控制：设置合适的缓存策略，利用浏览器缓存和CDN缓存来减少服务器压力和网络传输时间。

        4. 异步加载：将不影响页面首次渲染的内容，如统计代码、广告等，使用异步加载方式，提高页面加载速度。

        5. 前端代码优化：优化HTML结构、CSS选择器和JavaScript代码，减少不必要的DOM操作和重绘，提高页面渲染速度。

        6. 减少 HTTP 请求

三、优化前端体验

        前端优化是指提高 Web 应用的性能和用户体验的一系列方法。前端优化可以从接口访问优化、静态资源优化和页面渲染速度优化三个方面进行。

        一些常见的前端优化技巧包括：减少 HTTP 请求，使用 HTTP2，使用服务端渲染，使用 CDN，使用缓存，压缩文件，清理 HTML 文档，优化 CSS 性能，使用预先获取，使用字体图标，使用轻量级框架等。

四、系统重构

        系统重构是一套严谨而安全的过程方法，它通过一系列行之有效的方法与措施，保证软件在优化的同时，不会引入新的BUG，保证软件改造的质量。 系统重构，就是在不改变软件的外部行为的基础上，改变软件内部的结构，使其更加易于阅读、易于维护和易于变更。

        1、建议采用“迭代式”重构。考虑将一次重构拆分为多次“迭代”行为，然后每一个重构步骤能快速部署上线并得到反馈，以便评估重构的效果，及时作出调整。从项目风险的角度来说，通过将重构分成多个迭代，能有效的控制迭代的风险，每一个步骤，重构团队（开发和测试）都能集中一点吃透，并进行充分的测试。

        2、提前考虑好切换方案。对系统着手重构前，以及在系统开发中，都要提前考虑好切换方案以及方案在执行过程中的落地。新系统做好了，和老系统无法兼容，没有好的迁移方案，最后卡这了，系统推不去，对团队是一个很大的打击。

        系统重构可能面临的问题

        1、新老系统功能的兼容。主要在于老数据，在新系统功能中可用、展现完整，并且可以按新功能继续向下走。

        2、老数据迁移新系统后的数据完整性，若不完整，需要补充，否则新功能在展现旧数据时，会出现不可用的情况。比如由于表结构不一致，表字段不统一，新增的扩展数据等等。

        3、若涉及到工作流审批，流程审批能否兼容。新旧切换前，有两个选择：一是可以全部走完老流程，二是将未走完的流程全部回退到起点，在新系统中重新发起审批，并自动推动到对应节点，再继续向下走。

          4、老系统对外的接口在新系统中是否保持统一，否则要重新对外变更接口，比如端口、方法名、参数、返回值等等，尽量保持接口定义不变，造成不必要的麻烦。

          5、确保新系统与外围系统的交互是否完整，新系统接替旧系统，与外围系统的交互同样要保留，不能新系统一上线，其他的系统服务涉及到旧系统的地方不可用。

           6、针对一些特别老旧的系统，且在文档缺失严重的情况下，必须深入旧系统的使用、源代码逻辑，全面了解旧系统的功用，以便 能在新系统中完整的保持功能，不然容易学到了形，却遗漏了某些点。

           7、迁移系统分主次，尽量避免统一迁移，而是逐步迁移

           8、新老系统并存的架构