赤蓝紫の博客

【青训营】前端开发调试知识参加字节跳动的青训营时写的笔记。这部分是秃头披风侠老师讲的课。1. 前端Debug特点多平台：浏览器、NodeJs、小程序多环境：本地开发环境、线上环境多工具：Chrome devTools、Whistle多技巧：Console、BreakPoint、sourceMap、代理2. Chrome DevTools2.1 动态修改元素和样式点击.cls开始动态修改元素的class输入类名即可给元素动态添加类名勾选/取消类名查看类名生效效果点

TypeScript笔记参加字节跳动的青训营时写的笔记。这部分是林皇老师讲的课。(过年偷懒，项目爆肝后，终于重新整理笔记)个人博客(欢迎光临)：TypeScript笔记1. 简介静态类型可读性增强：基于语法解析TS Doc，IDE增强可维护性增强：在编译阶段暴露大部分的错误(类型匹配错误、拼写错误等)JS的超集包含兼容所有JS特性支持渐进式引入和升级，支持与JS共存动态类型：数据类型不是在编译阶段决定的，而是在运行阶段决定的静态类型：数据类型是在编译期间或运行之前确

Node.js笔记参加字节跳动的青训营时写的笔记。这部分是欧阳亚东老师讲的课。个人博客(欢迎光临)：Node.js笔记1. 应用场景前端工程化Web服务端应用运行效率接近常见的编译语言社区生态丰富、工具链成熟(npm，V8 inspector)与前端结合的场景有优势(服务端渲染 SSR)Electron跨端桌面应用商业应用：vscode, slack, discord大型公司内的效率工具2. 运行时结构V8：JavaScript Runtime，诊断调试工具(i

HTTP笔记参加字节跳动的青训营时写的笔记。这部分是杨超男老师讲的课。个人博客(欢迎光临)：HTTP笔记(赤蓝紫)1. 简介超文本协议(Hyper Text Transfer Protocol)特点：应用层协议，基于TCP协议请求响应：遵循客户端-服务端模型，客户端打开一个连接发出请求，然后等待服务器响应简单可扩展无状态2. 发展3. 请求方法方法解释GET请求一个指定资源的表示形式，用于获取数据POST用于将实体提交到指定的资源。会导致在服

Web开发安全参加字节跳动的青训营时写的笔记。这部分是刘宇晨老师讲的课。个人博客(欢迎光临)：Web开发安全(赤蓝紫)1. 攻击1.1 跨站脚本攻击(XSS)XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。如填写表单信息时，如果盲目相信用户的提交内容，那么假如用户填写了类似<script>alert("注入恶意代码")</script>的信息，然后直接通过element.innerHTML

Webpack笔记参加字节跳动的青训营时写的笔记。这部分是范文杰老师讲的课。插一嘴：范文杰老师的公众号Tecvan有很多干活，可以关注一下。(下面的部分有好多都有很有用的扩展链接，偷懒，就直接把老师的公众号贴出来)1. 简介Webpack本质上是一种前端资源编译、打包工具。功能：多份资源文件打包成一个Bundle支持Less、Babel、Eslint、TypeScript支持模块化处理css、图片等资源文件支持HMR(热更新)支持Tree-shaking支持SourceMap,

Web多媒体笔记参加字节跳动的青训营时写的笔记。这部分是刘立国老师讲的课。1. 前置知识1.1 图像基本概念图像分辨率：图像的像素数据，指在水平和垂直方向上图像所具有的像素个数图像深度：指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度数(单色图像)。例如彩色图像每个像素用R, G, B三个分量来表示，每个分量用8为所以像素深度是24位，可以表示的颜色数目是224。单色图像每个像素需要8位，则图像的像素深度是8位，灰度数目为28。图像的大小不仅要看图像的分辨率，

【青训营】前端动画实现笔记参加字节跳动的青训营时个人写的笔记。这部分是蒋翔老师讲的课。动画：动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。快速连续排列彼此差异极小制造错觉动画都需要定义两个基本状态，即起始状态和结束状态，然后填补两者之间的空白，让动画连贯。空白的补全方法有两种：补间动画：传统动画。主画师绘制关键帧，补间动画师补充关键帧。(而在前端中，补间动画师就由浏览器来当，如keyframe和transition)逐帧动画：每一帧都由主画师绘制。(

WebGL基础笔记个人参加字节跳动的青训营时写的笔记。这部分是月影老师讲的WebGL基础。1. 简介WebGL代码有两部分：运行在CPU上的JavaScript运行在GPU上的GLSLCPU和GPU：CPU适合比较复杂的任务，不适合量大但每个单元比较简单的任务GPU有大量的小运算单元构成，每个运算单元只负责处理简单的计算，每个运算单元彼此独立。所有计算可以并行处理。适合量大但每个单元比较简单的任务。图像的处理适合交给GPU，因为图像会有很多的像素点需要处理。2. 流程这部分只能

【青训营】JavaScript温故而知新参加字节跳动的青训营时写的笔记。这部分是月影老师讲的课。1. 各司其责HTML/CSS/JS各司其责避免不必要的直接使用JS操作样式(element.style.color=“red”)使用class来表示状态纯展示类交互寻求零JS方案(checkbox的checked和label，其中checkbox可以隐藏)2. 组件封装组件是指Web页面上抽出来一个个包含模板(HTML)、样式(CSS)、功能(JS)的单元好的组件：封装性、

【青训营】HTML、CSS温故而知新参加字节跳动的青训营时写的笔记。这部分是韩广军老师讲的课。前端：前端需要关注的东西：功能美观安全兼容体验性能无障碍1. HTML用于创建网页的标准标记语言1.1 HTML语法标签和属性不区分大小写，但是推荐小写部分空标签可以不闭合，如input、meta属性值推荐使用双引号包裹属性值为true时，可以省略属性值，如required、readonly1.2 HTML标签h1-h6：h1一级标题，h6六级标题ol(有序列表)：