javascript常见100问|知识广度|defer 和 async，preload prefetch dns-prefetch，前端攻击，xss,csrf,ddos，sql注入，csp

已于 2024-04-04 07:25:27 修改
阅读量787 收藏 15
点赞数 13
分类专栏： 前端八股文 文章标签： 前端 javascript xss
于 2024-04-03 00:05:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/137269185
版权
本文深入探讨了前端安全问题，包括JavaScript的defer和async属性，以及preload、prefetch和dns-prefetch的区别。此外，详细介绍了XSS、CSRF、点击劫持、DDoS和SQL注入的攻击原理和防御措施，强调了Content Security Policy（CSP）在防止XSS攻击中的重要性，并提供了防止CSRF攻击的多种策略，如Token验证和验证Referer。
摘要由CSDN通过智能技术生成

defer 和 async

题目

/</script/>/ 的 defer 和 async 属性有何区别

答案

  • <script src="xxx.js"> 当解析到该标签时，会暂停 html 解析，并触发 js 下载、执行。然后再继续 html 解析。
  • <script async src="xxx.js"> js 下载和 html 解析可并行，下载完之后暂停 html 解析，执行 js 。然后再继续 html 解析。
  • <script defer src="xxx.js"> js 下载和 html 解析可并行。等待 html 解析完之后再执行 js 。

在这里插入图片描述

连环问：preload prefetch dns-prefetch 的区别

  • preload 表示资源在当前页面使用，浏览器会优先<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
专栏目录
订阅专栏
dns-prefetch/prefetch/preload/defer/async
weixin_30485799的博客
10-08 100
preload不阻塞文档解析，放在内存中，当遇到script标签加载同样的js时，浏览器才回执行预先加载的js。 prefetch会在空闲时间下载js,使用时直接从磁盘获取。如果prefetch还没下载完之前，script引用相同资源。浏览器会再次发起请求，浪费资源。 defer和async是script标签的两个属性defer相当于将script放在body后执行；async不能确定哪...
慕课1299前端面试题-知识广度和深度day06
weixin_46426412的博客
05-22 136
vue2 的 diff 算法。看以下chatgpt回答vue3 的 diff算法创建服务器，下载依赖包yarn dev 运行。
前端面试拼图-知识广度
weixin_61933613的博客
03-18 1167
​ 最近，看了下慕课2周刷完n道面试题，记录并添加部分可参考的文档，如下...
2周刷完100道前端优质面试——广度篇
qq_32944491的博客
05-07 476
广度篇 1.移动端H5点击有300ms延迟，该如何解决 背景：double tap to zoom (轻点两下缩放) fastclick (初期解决方案) width = device-width (标准协议解决，要做响应式 所以没有必要做300ms延迟) fastclick实现及原理 window.addEventListener('load',function(){ FastClick.attach(document.body) },false) //FastClick原理 //监听touch
前端知识整理
u010599292的博客
03-17 681
1.let/var/const区别：a)只有var声明的变量存在变量提升；b)只有var允许重复声明，let和const在同一作用域不允许重复声明；c)let和const声明的变量在所声明的块级作用域中有效；d)const声明的是常量，必须赋值，const不变的是内存地址，let和var声明的是变量，可修改可不赋值。 2. 构造器模式是指构造器里的方法添加到构造器的原型中去，每个生成的实例都会继承这个方法，实现共享。 3. 单例设计模式是保证一个类仅有一个实例，并提供一个访问它的全局访问点；思路是新建对象时
JS的一些面试SIX(广度和深度)
Heige博客
07-20 291
一些常见面试题
※前端面试--知识总结
qq_41604498的博客
06-02 2877
–前端面试知识总结 1.http/浏览器部分 1.1 http和https 概念 http:超文本传输协议，是一种客户端和服务端请求应答的标准，用于从www服务端传输超文本到本地浏览器的传输协议。 https:以安全为目标的http，在http下又加上了SSL层，确保数据的传输和网站的真实性。 区别： http是超文本传输协议，信息是明文传输的，没有加密。https是具有安全性的ssl加密传输协议。 http协议的端口是80，https是443 http的连接很简单，是无状态的；https协议是由s
拯救你的面试：前端面试大全--js面试题（超长文章）
guoqkmiss的博客
04-21 871
一、什么是编译型语言？什么是解释型语言？JS 是什么类型的语言？ 1、编译型语言 1. 解释 程序在执行之前需要一个专门的编译过程，把程序编译成 为机器语言的文件，运行时不需要重新翻译，直接使用编译的结果就行了。 2. 优缺点 程序执行效率高，依赖编译器，跨平台性差些。 3. 举例 C、C++ 都是编译型语言。 2、解释型语言 1. 解释 程序不需要编译，程序在运行时才翻译成机器语言，每执 行一次都要翻译一次。 2. 优缺点 解释型语言执行效率较低，且不能脱离解释器运行，但它的跨平台型比较容易，只需提供特定
[面经分享] 收获多家大厂offer | 分享我的2022秋招经历
weixin_46653793的博客
11-02 826
前言 好久不见，我是LeBron，有段时间没写博客了。最近几个月的大部分精力都放在秋招上了，边实习边秋招还是挺吃力的，总算结果还是不错。 先介绍一下个人情况：2022届双非本科应届生，项目经验和经历还算丰富，在字节实习至今也快8个月了，详细情况可以来我的博客看看哈 : LeBronChao’s Blog 秋招从7.19 ~ 10.24历时三个多月，腾讯、阿里、字节、百度、大疆、华为、Shopee、滴滴、美团、拼多多10家公司，将近40场笔试 / 面试（自我介绍都快念麻了)，基本全部通过收到offer，借此机
js二十五道面试题（含答案）
热门推荐
m0_65450343的博客
05-09 4万+
目录 1.线程和进程是什么？举例说明 2. js中的基础数据类型有哪几种? 了解包装对象吗？ 3.对内存泄漏的了解 4.js中数组合并的方法 5.合并对象的方法 6.什么是作用域，什么是作用域链？ 7.JS如何实现异步编程（5种）？ 8.js中的堆内存与栈内存 9.如何去判断js数据类型？ 10，怎么允许跨域（跨域解决办法） C、Nginx反向代理 D、webpack （在vue.config.js文件中）中 配置webpack-dev-server 11.怎么让对象的一个..
前端八股文（3）53-84
VAN
09-12 1546
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
VAN
04-01 1339
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
javascript常见100问|前端基础知识|13-14-options 请求Restful-API-method前端知识体系14-总结，软技能是否看过红宝书code review CR 检查什么
VAN
04-01 1242
● GET 查询● POST 新增● PATCH 更新● DELETE 删除完善的知识范围，包含了前端工程师常用的所有知识点合理的结构化，便于理解和记忆本章讲解前端基础知识相关的面试题，包括 HTML CSS JS HTTP Ajax 等知识点。这都是技术一面时的必考知识点。不能只说不足，就截止了。一定要通过不足，来突出自己的解决方案，以及未来的预期。这样给人的印象是：正式了自己的不足 + 有学习的态度 —— 非常好！本章讲解软技能相关面试题。
javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点
最新发布
VAN
04-01 1216
HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1214
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 1022
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
JavaScript基础教程|使用promise进行错误处理，try-catch,rethrowing,未处理的rejection,
VAN
01-05 998
catch 处理 promise 中的各种 error：在 reject() 调用中的，或者在处理程序中抛出的 error。如果给定 .then 的第二个参数（即 error 处理程序），那么 .then 也会以相同的方式捕获 error。我们应该将 .catch 准确地放到我们想要处理 error，并知道如何处理这些 error 的地方。处理程序应该分析 error（可以自定义 error 类来帮助分析）并再次抛出未知的 error（它们可能是编程错误）。
JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”
VAN
01-02 989
面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。
前端面试必知：defer、async与跨域技术详解
本篇文档主要关注于前端面试中关于 `defer` 和 `async` 属性的理解，这两个属性通常用于 `<script>` 标签，它们对于现代前端工程师的技能广度至关重要。在面试过程中，企业可能会考察候选人对移动端、HTTP网络以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值