前端知识
Novice-XiaoSong
这个作者很懒,什么都没留下…
展开
-
浏览器 事件冒泡、捕获、阻止
一、冒泡型事件流事件冒泡事件会从 target (事件源)开始触发,然后逐级向上层元素传递,直到 window 结点挂载冒泡型事件响应标签上用 onclick 挂载函数调用,多个函数调用可以用 ; 分隔,会按调用顺序依次执行。脚本中用 obj.onclick = fn 挂载,会覆盖原先在标签上已挂载的所有响应。脚本中用 obj.addEventListener(type, fn) 或 obj.addEventListener(type, fn, false)阻止事件冒原创 2020-11-01 16:24:00 · 313 阅读 · 0 评论 -
浏览器 如何在老版本浏览器环境下调试代码
学习过程中经常看到,“老版本环境下的执行结果是balabala…”,但现在使用的浏览器大都是新版本浏览器,就算使用IE的话,也都是IE11以上,那我们要如何进入老版本环境进行代码调试呢?利用IE浏览器的仿真选项卡打开IE(Internet Explorer)浏览器F12 打开开发者工具切换到 仿真 选项卡切换 “文档模式” 为10或以下...原创 2020-12-13 15:43:07 · 480 阅读 · 0 评论 -
chrome performance选项卡
详解谷歌浏览器 performance 选项卡转载 2020-11-22 18:28:28 · 140 阅读 · 0 评论 -
web安全——HTTPS中间人攻击
一、中间人攻击过程正常HTTPS通道建立过程客户端向服务器发送HTTPS请求服务器返回公钥客户端生成私钥,并使用公钥加密,发送给服务器服务器使用与公钥配对的私钥解密,获取客户端生成的私钥客户端、服务器使用协商好的私钥进行加密数据传输中间人攻击客户端向服务器发送HTTPS请求服务器返回公钥2.1. 中间人劫持服务器数据,备份公钥,生成假公钥,返回给客户端客户端生成私钥,并使用假公钥加密,发送给服务器3.1. 中间人劫持客户端数据,使用与假公钥配对的假私钥解密获取客户端生成的私钥(原创 2020-11-20 11:29:13 · 648 阅读 · 0 评论 -
host, origin, referrer的区别
hostoriginreferrer目的描述请求将被发送的目的地描述请求从哪里来描述请求从哪里来格式域名(ip)+端口号(可选)协议和域名协议+域名+查询参数(不包含锚点信息)由来http1.1中为解决虚拟主机问题而提出H5中为CORS跨域提出-使用范围在任何类型请求中,request都会包含此header信息一般只存在于CORS跨域请求中用于所有类型的请求补充:referrer: 由浏览器自动带上(大概就是使用window.loc...原创 2020-11-19 16:11:23 · 643 阅读 · 0 评论 -
AMD、CMD、CommonJs、ES6的对比
AMD、CMD、CommonJs、ES6的对比转载 2020-06-29 19:04:01 · 110 阅读 · 0 评论 -
前端模块化详解
前端模块化详解(完整版)转载 2020-11-11 20:42:25 · 142 阅读 · 0 评论 -
科普转载 CSS Pre-processors
CSS 预处理器:一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。三种流行的CSS预处理器:Sass、LESS 和 Stylus转载转载 2020-11-06 11:39:51 · 11015 阅读 · 0 评论 -
科普转载 Node.js“代替品”——Deno
一、node.js 存在的问题异步。 异步接口会有 Promise 和回调函数两种写法依赖导入。 CommonJS 与 新语法ES 模块不兼容npm。 模块管理工具 npm,逻辑越来越复杂;模块安装目录 npm_modules 极其庞杂,难以管理安全。 Node.js 也几乎没有安全措施,用户只要下载了外部模块,就只好听任别人的代码在本地运行,进行各种读写操作。功能不完整。 外部工具层出不穷,webpack,babel,typescript、eslint、prettier…二、deno 的特转载 2020-11-06 11:25:30 · 474 阅读 · 1 评论 -
html H5汇总
媒体:<audio>, <video>画布:canvas矢量画:svg拖放:(1)元素设置可拖拽:元素属性添加 draggable=true(2)拖拽元素事件:ondragstart, ondrag, ondragend(3)释放区事件:ondragenter, ondragover, ondragleave, ondrop(4)拖拽元素与释放区的数据通信:event.dataTransfer.setData(format, data), event.dataTran.原创 2020-11-09 15:52:11 · 140 阅读 · 0 评论 -
CSS 知识点汇总
一、简介CSS:Cascading Style Sheets二、CSS选择器元素: div { ... }id: #id { ... }class: .className { ... }子孙: div p { ... } div的所有p子孙子: div>p { ... } div的所有p子结点(不包含孙结点)兄弟: div~p { ... } div的所有p兄弟结点相邻兄弟: div+p div的所有p相邻兄弟结点,只匹配下相邻兄弟属性: [ src$='.pdf' ] 中括原创 2020-10-31 17:06:30 · 158 阅读 · 0 评论 -
html href与src的区别
一、hrefhref 超文本引用(Hypertext Reference),用于建立资源和页面间的联系通道常用标签: <a>, <link>在解析包含 href 属性的标签时,浏览器会继续往下走,不会影响后续标签的解析。例如:使用 <link> 标签加载 css 文件时,在解析到 <link> 标签时,浏览器会并发地下载所需文件,不会影响后续解析。(推荐使用 <link> 标签来引入css文件,而不使用 @import)二、srcs原创 2020-10-30 16:13:23 · 162 阅读 · 0 评论 -
javascript 知识点汇总
一、ES6数据类型基本数据类型(6种),引用数据类型(2种)类型检查(3种)类型转换boolean为false的6种情况undefine, null, true/false 转为 number二、对象属性: 自有属性、原型属性属性检测...原创 2020-10-30 10:58:41 · 101 阅读 · 0 评论 -
浏览器多线程——web worker
一、阮一峰Web Worker使用教程阮一峰Web Worker使用教程二、web worker的简单使用在同一页面中使用<script>作为worker的脚本文件<!DOCTYPE html><html> <head></head> <body> <button onclick="createWorker()">创建worker线程并发送消息</button> <转载 2020-10-23 15:43:03 · 2215 阅读 · 0 评论 -
浏览器存储方案
一、cookie, sessionStorage, localStorage cookie sessionStorage localStorage 存放数据大小 4KB(因为每次http请求都会携带cookie) 一般5MB及以上 生命周期 生成时会被指定maxAge作为生命周期;默认为关闭浏览器时失效。 会话页面关闭前有效 除非被手动删除,否则永久有效 与服务器通信 每次发送请求时都会自动被带上 存储和使用均在浏览器本原创 2020-11-06 10:38:50 · 167 阅读 · 0 评论 -
sessionStorage如何在多个tab间共享
假设在A页面中有sessionStorageB页面必须是在A页面中使用window.open(url)方法打开,才能在B页面中使用A页面的sessionStorage原创 2020-10-23 10:50:33 · 1937 阅读 · 0 评论 -
web身份验证与会话维持(session、token)
cookie现今的角色主要是作为浏览器存储方案的一种session:(1)浏览器存储session_id(加密),服务器存储用户登录状态的明细表。发送请求时会携带该session_id,在服务器通过验证后可获取用户当前登录状态。(2)对于支持cookie的浏览器,session_id一般存储在cookie中,发送请求时随cookie发送;对于不支持cookie的浏览器,session_id会使用URL重写技术将session_id组合到URL中:http://www.test.com/test;js.转载 2020-10-22 17:02:43 · 357 阅读 · 0 评论 -
web安全——CSRF攻击
CSRFCSRF(Cross—Site Request Forgery)跨站点请求伪造,主要是利用浏览器端未过期的cookie信息伪造身份通过服务器的身份验证。防御(1)验证 HTTP Referer 字段(2)在请求地址中添加 token 并验证(3)在 HTTP 头中自定义属性并验证CSRF攻击与防御...原创 2020-10-22 13:01:12 · 262 阅读 · 0 评论 -
web安全——sql注入
sql注入但凡有SQL注入漏洞的程序,都是因为程序要接受来自客户端用户输入的变量或URL传递的参数,并且这个变量或参数是组成SQL语句的一部分。黑客通过使用一些精密设计的语法来编写这些变量,使其组成SQL语句后能实现无账号登录,甚至篡改数据库。防御方法(1)检查变量数据类型和格式(2)过滤特殊符号(3)绑定变量,使用预编译语句SQL注入详解...转载 2020-10-22 11:33:20 · 138 阅读 · 0 评论 -
web安全——XSS攻击
XSSXSS, 即为(Cross Site Scripting), 中文名为跨站脚本(不使用CSS缩写是为了与层叠样式表区分)。是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成执行了不在预期内的JS代码时,就发生了XSS攻击。XSS分为反射型XSS,存储型XSS和DOM XSS(1)反射型XSS:XSS代码放在URL中,作为参数提交到服务器。服务器解析后,作为响应结果发送给浏览器,最终通过浏览器的解析执行。(2)存储型XSS:XSS代码存放在服务器中,主要是在第一次请求网页后会将XSS代码.转载 2020-10-22 11:23:17 · 153 阅读 · 0 评论 -
TCP vs. UDP
报文格式不同。TCP头部较大,为20个字节;UDP为8个字节。TCP提供可靠数据传输;UDP尽最大可能交付,不可靠。TCP在传输数据前需要3次握手建立连接;UDP无需建立连接。TCP面向字节流传输数据,会在发送端将数据分组,在接收端重组;UDP面向报文传输数据,无分组开销。TCP提供流量、拥塞控制;UDP没有,会出现丢包情况。...原创 2020-10-19 17:25:02 · 78 阅读 · 0 评论 -
websocket
一、简介websocket的最大特点就是,客户端可以主动向服务器发送信息,服务器也可以主动向客户端发送信息,是真正的双向平等对话,属于服务器推送技术的一种。二、阮一峰websocket详细介绍以及前端实现方法WebSocket 教程三、简单实现websocket(客户端Vue, 服务器Node)/* 客户端 */methods: { socketClient(){ // 创建websocket对象 const websocket = new Websocket('ws://127.原创 2020-10-18 23:59:20 · 83 阅读 · 0 评论 -
跨域
一、什么是跨域当且仅当协议、域名、端口都相同时为同源URL说明是否同源http://www.a.com/a.jshttp://www.a.com/b.js同一域名下的不同文件是http://www.a.com/folder1/a.jshttp://www.a.com/folfer2/b.js同一域名下的不同文件夹是http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名、不同端口否http://www.a.原创 2020-10-18 18:39:31 · 181 阅读 · 1 评论 -
HTTP各版本简介
HTTP1.01. 请求方法GET,POST,HEAD2. 缺点无状态:服务器不会记录上一次请求的任何内容,会出现类似于重复验证身份的情况。(可通过cookie, session, token解决)无连接:每个http请求都需要建立一次TCP连接,多次TCP连接握手耗时。不安全:数据以明文传输,容易被窃取;没有对访问对象进行身份验证,容易出现假网站情况;报文完整性难以验证,容易出现被插入恶意广告等情况。3. GET vs. POSTGET 主要用于从服务器获取资源;POST 主要是利用原创 2020-10-17 18:08:57 · 948 阅读 · 0 评论 -
浏览器缓存机制
深入理解浏览器的缓存机制缓存机制简介1. 上图2. 解释浏览器请求资源主要有三个阶段,第一阶段是发起请求,第二阶段是服务器处理请求,第三阶段是服务器向客户端浏览器响应请求资源。浏览器的缓存机制主要可以在第一阶段和第三阶段来优化。通过强缓存直接使用本地缓存而不发起请求或者通过协商缓存判断本地缓存是否新鲜选择性的返回资源来减少数据传输来优化浏览器请求。浏览器的缓存机制主要通过在本地记录记录下最后一次服务服务器时资源的状态以及在请求头与响应头中添加相应字段来控制。主要包括三个部分或者三个阶段。首.转载 2020-10-16 19:47:36 · 121 阅读 · 0 评论