系列文章：
2023前端大厂面试题之JavaScript篇(1)
2023前端大厂面试题之JavaScript篇(2)
2023前端大厂面试题之JavaScript篇(3)
2023前端大厂面试题之JavaScript篇(4)
2023前端大厂高频面试题之CSS篇
2023前端大厂高频面试题之Vue篇(1)
2023前端大厂高频面试题之Vue篇(2)
2023大厂高频面试题之HTTP篇
2023前端大厂高频面试题之浏览器篇
2023大厂高频面试题之操作系统篇
2023大厂高频面试题之计算机网络篇

📒博客首页：若年封尘
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限，如有不妥，不吝赐教！
❤️期待一起交流，共同进步！

如何减少前端页面的首屏加载时间？

降低前端页面的首屏加载时间可以提高用户体验，增强用户留存率。以下是一些可能的方法：

• gzip资源压缩：服务器把资源先压缩成.gz文件，然后浏览器下载之后再进行解压，从而达到提高访问效率。
• 延迟加载非必要资源：一些网页组件，比如图片、音频和视频，可能不需要在加载初始页面时就被下载。通过延迟加载这些组件，可以减少初始页面的加载时间，提高页面速度。
• 减少HTTP请求：减少网页加载时需要的HTTP请求，可以使用CSS Sprites（将多个图像合并为一个），合并和压缩JavaScript和CSS文件等方式。
• 使用CDN：使用内容分发网络（CDN）可以通过将内容分布在多个服务器上来加快资源的加载速度。这可以提高首次页面加载的速度，尤其是对于全球用户。
• 预取和缓存优化：合理使用浏览器缓存，包括HTTP缓存、资源缓存和数据缓存，以减小服务器压力，提升页面加载速度，以缩短页面加载时间。
• 优化代码：优化前端代码，包括避免使用阻塞JavaScript、删除未使用的代码和资源、使用响应式图片等方法，可以优化性能，减少加载时间。

网站性能优化

1、采用图片的懒加载（延迟加载），减少页面第一次加载过程中http的请求次数
　具体步骤：
　　1、页面开始加载时不去发送http请求，而是放置一张占位图
　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息
2、使用雪碧图或者是说图片精灵。把所有相对较小的资源图片，绘制在一张大图上，只需要将大图下载下来，然后利用图片定位来讲小图展现在页面中（background-position:百分比，数值）。
3、能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。避免引入第三方大量的库。而自己却只是用里面的一个小功能。
4、可缓存的AJAX
5、推迟加载内容
6、尽量所使用的字体图标或者SVG图标来代替传统png图。
7、减少对DOM操作，主要是减少DOM的重绘与回流（重排）。
8、根据域名划分页面内容
9、使iframe的数量最小
10、在js中尽量减少闭包的使用，因为使用闭包后，闭包所在的上下文不会被释放。
11、使用内容分发网络
12、尽量和并和压缩css和js文件。（将css文件和并为一个，将js合并为一个，可用webpack）减少http请求次数以及减少请求资源的大小。
……

详细的可以参考Vue项目优化、前端性能优化汇总、文章1、文章2

说一下你在前端项目中遇到印象深刻的项目场景，并且怎么解决的？

在前端项目中，有一次我遇到了一个印象深刻的场景是在一个电商网站项目中，需要处理大量的商品数据和图片展示，但由于数据量庞大，导致页面加载速度较慢，用户体验较差。

解决方案：

• 图片懒加载：使用图片懒加载技术，即将图片的加载推迟到图片即将进入用户可视区域时再进行加载，减少了页面首次加载时的图片请求数量和页面加载时间。
• 数据分页加载：采用分页加载的方式，每次加载部分商品数据，减少了一次性加载大量数据导致的页面卡顿和加载速度慢的问题。
• 图片优化：对商品图片进行压缩和优化，使用合适的图片格式（如 WebP），减小图片文件大小，提高图片加载速度。
• 缓存策略：合理使用浏览器缓存和CDN缓存，对静态资源进行缓存，减少服务器的请求压力和网络传输时间。
• 代码优化：对前端代码进行性能优化，如合并、压缩和混淆 JavaScript 和 CSS 文件，减小文件大小，提高加载速度。
• 响应式设计：采用响应式设计，使网站在不同设备上都能够良好地展示，提供更好的用户体验。
• 性能监控：引入性能监控工具，监测页面加载性能和用户体验，并根据监测结果进行优化。
• 用户反馈收集：收集用户反馈，了解用户在使用过程中的体验问题，及时修复和优化。

通过以上一系列的优化措施，成功地提升了网站的加载速度和用户体验，解决了项目中遇到的性能问题。

前端攻击有哪些，抵御前端攻击的方式有哪些

前端攻击指的是利用前端代码中的漏洞进行攻击的行为。以下是几种常见的前端攻击：

1.跨站脚本攻击（XSS）：攻击者在页面中注入恶意脚本，从而窃取用户信息或者利用用户身份在网站上执行恶意操作。
2.跨站请求伪造（CSRF）：攻击者利用受害者的身份在第三方网站上执行恶意操作，从而窃取用户信息或者以受害者的身份进行恶意操作。
3.点击劫持攻击：攻击者将一个透明的 iframe 放在一个看似正常的页面上，当用户点击页面时，实际上是在点击了 iframe 中的内容，从而执行恶意操作。

为了抵御前端攻击，可以采取以下一些防范措施：
1.输入验证：对于所有用户输入的数据，都要进行有效性验证，防止恶意代码的注入。
2.输出编码：在向用户输出数据时，要对特殊字符进行编码，防止恶意代码的注入。
3.HTTP-only Cookie：将 cookie 标记为 HTTP-only，可以防止攻击者窃取用户 cookie。
4.CSP：Content Security Policy（内容安全策略）是一种安全策略，可以限制浏览器加载内容的来源，防止恶意代码的注入。
5.防止点击劫持：可以通过设置 X-Frame-Options 头信息或使用 JavaScript 脚本来防止点击劫持攻击。
6.定期更新依赖库和框架：及时更新使用的依赖库和框架，以保持软件的安全性，修复可能存在的漏洞。
7.跨站请求伪造（CSRF）防御：对于涉及到用户数据修改的操作，需验证请求的来源是否合法，可以通过生成和验证 token、使用 SameSite 标志、检查 Referer 等方式来防御 CSRF 攻击。
8.监控和日志记录：建立日志记录和异常监控系统，及时发现和响应潜在的安全威胁和攻击行为。
9.HTTPS 使用：使用 HTTPS 来加密前端与服务器之间的通信，防止数据被窃听和篡改，确保数据传输的安全性。
10.文件上传安全：对用户上传的文件进行严格的类型、大小、后缀等校验，防止上传恶意文件和文件包含漏洞。

前端工程化

工程化是一种思想，而不是某种技术。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等.

“一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。”它可以降低大型项目的开发难度，有模块化、组件化、规范化和自动化等特点，已经成为前端发展的主流趋势。

在做完前端项目之后，一般都会写哪些文档，readme里面写一些什么？

在完成前端项目后，一般会写一些文档来记录项目的相关信息和使用说明。README文件是一种常见的文档，通常包含以下内容：

项目介绍：简要介绍项目的背景、目标和功能，让其他人了解项目的基本概况。
安装说明：提供项目的安装步骤和依赖项，包括所需的前端框架、库、工具等的安装方式和版本要求。
使用说明：详细描述项目的使用方法，包括如何运行项目、如何配置项目、如何使用项目的功能等。可以提供示例代码、演示链接或者截图来帮助其他人快速上手项目。
配置说明：介绍项目的配置项，包括环境变量、配置文件等的说明和用法。
功能列表：列出项目的主要功能和特性，以便其他人了解项目的功能范围和使用场景。
贡献指南：提供项目的贡献指南，包括如何参与项目的开发、如何提交问题和建议、如何贡献代码等。
版权信息：包含项目的许可证信息、版权声明等相关信息。
更新日志：记录项目的版本更新历史，包括版本号、更新内容和日期，方便其他人了解项目的发展和变更。

除了README文件，还可以根据项目的具体情况编写其他文档，如API文档、设计文档、测试文档等，以便更好地管理和维护项目。文档的编写应尽量清晰、详细和易懂，以方便其他人理解和使用项目。