小高同学1997 - 博客园

[置顶] 从输入URL到页面展示，这中间发生了那些过程(2)？

摘要：当网络进程将资源提交给渲染进程的时候,此时渲染进程就要开始渲染页面了。浏览器的渲染机制是十分复杂的，所以渲染会被划分为很多子阶段，输入的HTML、CSS、JS以及图片等资源经过这些阶段，最终输出像素展示到页面上，我们把浏览器的这样一个处理流程叫做渲染流水线。渲染流水线按照渲染的时间顺序，我们把浏阅读全文

posted @ 2021-12-02 23:17 小高同学1997 阅读(78) 评论(0) 推荐(0) 编辑

[置顶] 从输入URL到页面展示，这中间发生了那些过程(1)？

摘要：从输入URL到页面展示，这中间发生了那些过程？这是一道十分经典的面试题，我们应该首先从宏观的角度，也就是浏览器的多进程架构来分析这个过程中有哪些进程有参与和配合?其次我们应该从微观的角度细致入微的搞清楚每一个步骤发生了什么事情，只有这样才可以完整清晰的回答好这个面试题。浏览器多进程间的协作过程在阅读全文

posted @ 2021-12-02 23:15 小高同学1997 阅读(140) 评论(0) 推荐(0) 编辑

[置顶] HTTP请求流程详解

摘要： HTTP协议是建立在TCP连接基础之上的，它是一种允许浏览器向服务器发送请求获取资源的协议，是Web的基础。通常都是由浏览器发起请求，来获取服务端的资源如HTML文件、CSS和js文件，除此之外还可以获取图片和视频等资源，而作为前端开发，了解和浏览器打交道最广的HTTP协议的请求流程，是十分重要的。阅读全文

posted @ 2021-12-02 23:13 小高同学1997 阅读(2222) 评论(0) 推荐(0) 编辑

[置顶] Chrome浏览器的多进程架构

摘要：一、Chrome浏览器的任务管理器 Chrome浏览器任务管理器打开方式 Chrome浏览器右上角选项 - 更多工具 - 任务管理器快捷键 Shift + Esc 打开任务管理器 Chrome浏览器任务管理器的作用基于Chrome浏览器的任务管理器，可以查看当前浏览器开启了那些进程，以及每一个进阅读全文

posted @ 2021-11-27 23:18 小高同学1997 阅读(943) 评论(0) 推荐(0) 编辑

2022年9月20日

前端安全之Base64基础

摘要： Base64基础 Base64是什么？ Base64是一种基于64个可打印字符(也就是ASCII字符)来表示二进制数据的编码方式，是将二进制数据转化为字符串的过程，原则上来说一些存储在计算机上的东西都是二进制的，都可以使用base64进行编码。 Base64编码表 Base64编码之所以称为Base 阅读全文

posted @ 2022-09-20 23:17 小高同学1997 阅读(766) 评论(0) 推荐(0) 编辑

2022年9月12日

防范攻击的常见策略：CSP和Referer Policy

摘要： CSP（内容安全策略） CSP是什么？ CSP全称为Content Secunty Policy，也就是内容安全策略。其主要的目的就是用来防范XSS攻击的。 CSP策略的核心思想十分简单，那就是web开发者在开发页面的时候告诉浏览器，当前页面可以加载执行哪些外部资源，开发者只需要简单的进行配置，它的阅读全文

posted @ 2022-09-12 22:31 小高同学1997 阅读(623) 评论(0) 推荐(0) 编辑

2022年9月11日

前端攻击方式之CSRF攻击

摘要：什么是CSRF攻击？之前我们介绍了前端攻击中的XSS攻击，它主要是黑客将恶意脚本通过各种手段注入到服务器或者在HTML页面传输的过程中劫持然后修改DOM注入恶意脚本，当浏览器加载脚本的时候恶意脚本也会一起被加载，然后恶意脚本执行对用户隐私信息如cookie的收集，然后通过Ajax配合CORS将co 阅读全文

posted @ 2022-09-11 17:43 小高同学1997 阅读(770) 评论(0) 推荐(0) 编辑

2022年9月10日

前端攻击方式之XSS攻击

摘要：一、XSS跨站脚本攻击之前我们介绍过，由于浏览器的同源策略的存在，原本跨页面站点之间的跨域请求以及互相操作DOM都会被同源策略进行拦截而无法进行，但是这样子会导致web项目在开发及部署时非常不便利，为了平衡浏览器页面安全和开发维护便利的问题，浏览器又出让了一些安全性，比如：允许页面通过CORS策阅读全文

posted @ 2022-09-10 19:51 小高同学1997 阅读(507) 评论(0) 推荐(0) 编辑

浏览器(Web)页面安全的基石：同源策略

摘要：浏览器(Web)页面安全首先在了解浏览器页面安全策略之前，我们先设想一下，假设浏览器没有安全策略，那么我们天天接触的Web世界将会是什么样子？假设我们访问的站点可以任意加载并执行其他站点的脚本、图片、音视频等资源，如果当前访问的正好是一个银行网站，然后接着我们又打开了另外一个黑客恶意网站，由于没阅读全文

posted @ 2022-09-10 16:07 小高同学1997 阅读(163) 评论(0) 推荐(0) 编辑

2022年3月6日

11.webpack中的几个路径配置

摘要：一、相对路径和绝对路径相对路径相对路径是指以当前的文件作为起点，相较于当前目录的位置而被指向并且加以引用的文件资源。 /表示当前文件所在目录的根目录 ./表示当前文件所在目录 ../表示当前文件所在目录的上一级目录绝对路径绝对路径是指在当前文件的电脑硬盘上真正存在的路径,必须准确，起点是系统阅读全文

posted @ 2022-03-06 11:30 小高同学1997 阅读(6911) 评论(0) 推荐(0) 编辑

10.DevServer和HMR

摘要：搭建本地服务器在没有搭建本地服务器之前，我们为了在浏览器中看到代码成果，一般是这样操作的：执行npm run build打包命令，将编译后的文件打包到dist目录借助于Vscode中的live server插件，打开index.html文件查看效果但是以上这种操作会有一个弊端：那就是在我们每阅读全文

posted @ 2022-03-06 11:28 小高同学1997 阅读(317) 评论(0) 推荐(0) 编辑

09.webpack处理.vue文件

摘要：使用vue-loader@15版本来处理.vue文件首先要说明一点，vue-loader的不同版本在处理.vue文件的时候其配置是不同的，所以要分开来处理。下面是使用webpack来打包一个.vue单文件组件的配置：安装vue2.+版本 npm i vue@2.6.12 -D 编写一个简单的. 阅读全文

posted @ 2022-03-06 11:26 小高同学1997 阅读(276) 评论(0) 推荐(0) 编辑

08.ESLint基本使用

摘要：认识ESLint ESLint是一个静态JavaScript代码分析工具(static program analysis),也就是ESLint可以在代码没有运行的时候就对代码进行分析并且对模式匹配错误的代码进行报告，ESLint的目的是保证代码的一致性和避免错误，可以帮助我们在项目开发中建立统一的团阅读全文

posted @ 2022-03-06 11:25 小高同学1997 阅读(888) 评论(0) 推荐(0) 编辑

06.webpack中source-map的配置

摘要：认识source-map 一般情况下真实运行在浏览器上的代码是经过webpack等前端构建工具打包之后的代码，在打包的过程中会对代码做压缩和混淆丑化，所以这就会导致运行在浏览器的代码和我们在开发阶段写的源代码其实是有差异的，主要体现在以下几个方面：源码中ES6+的语法会通过babel工具转化为ES 阅读全文

posted @ 2022-03-06 11:23 小高同学1997 阅读(898) 评论(0) 推荐(0) 编辑