随笔分类 - Web技术
摘要：前置知识：什么是rem CSS3新增的一个相对单位rem（root em,根em）.rem是相对于根节点（或者是html节点）.如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px。 前置知识：什么是dpr 在浏览器控制台中输入 window.de
阅读全文
摘要：基于 vue-cli3.0 的 lib-flexible 适配方案 第一步：下载安装相关依赖 第二步：创建 vue.config.js 文件并配置 第三步：在 main.js 中引入 lib-flexible 以上就是基于 lib-flexible 在 移动端H5 的适配处理方案。当然这不是唯一的方
阅读全文
摘要：在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配。秉着求知的思想，今天决定对他的原理进行分析。目前网上比较主流使用的就是淘宝方案和网易的解决方案，所以今天我就从这两方面入手深度了解这两个方案。 网易转换rem分析 首先网易的设计稿是
阅读全文
摘要：这篇文章讲讲浏览器的事件循环（nodejs中的事件循环稍有不同），事件循环是js的核心之一，因为js是单线程，所以异步事件实现就是依赖于事件循环机制，理解事件循环可让我们更清晰的处理js异步事件和应对各种异步事件的面试题。 事件循环 首先，我们来解释下事件循环是个什么东西: 我们所知，浏览器的js是
阅读全文
摘要：【Loader】： 用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，St
阅读全文
摘要：1 知识体系 1.1 从URL输入到页面加载 首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客
阅读全文
摘要：一、 输入URL，回车 敲击某个键时,键盘内的处理器会先对键矩阵进行分析，然后将数据发送到计算机 计算机接收到来自键盘的信号，由键盘控制器（一种集成电路）进行处理，发送给操作系统 操作系统会分析，这些数据是否为系统命令，若不是，则将数据传给应用程序。 应用程序会分析这些数据是否为命令，如果不是命令，
阅读全文
摘要：//本地缓存，记录token function set(type, value) { localStorage.setItem(type, value); } function get(type) { return localStorage.getItem(type); } 1、定义常量 var t
阅读全文
摘要：CORS 通过控制 Access-Control-Allow-Origin 控制哪些域名可以共享资源，取值如下 Access-Control-Allow-Origin: <origin> | * 其中 * 代表所有域名，origin 代表指定特定域名，那如何设置多个域名了？ 此时需要通过代码实现，根
阅读全文
摘要：如果有 x-forwarded-for 的请求头，则取其中的第一个 IP，否则取建立连接 socket 的 remoteAddr。 而 x-forwarded-for 基本已成为了基于 proxy 的标准HTTP头，格式如下，可见第一个 IP 代表其真实的 IP，可以参考 MDN X-Forward
阅读全文
摘要：由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同，因此绘制成图片数据的 CRC 校验也不一样。 function getCanvasFp () { const canvas = document.getElementById('canvas') const ctx = canvas
阅读全文
摘要：垃圾回收机制 通常情况下，垃圾数据回收分为手动回收和自动回收两种策略。 手动回收策略，何时分配内存、何时销毁内存都是由代码控制的。 自动回收策略，产生的垃圾数据是由垃圾回收器来释放的，并不需要手动通过代码来释放。 JavaScript 中调用栈中的数据回收 JavaScript 引擎会通过向下移动
阅读全文
摘要：JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。 一、跨域认证的问题 互联网服务离不开用户认证。一般流程是下面这样。 1、用户向服务器发送用户名和密码。 2、服务器验证通过后，在当前对话（session）里面保存相关数据，比如用户角色、登录时间等等
阅读全文
摘要：Cookie是什么 Cookie是服务端发送到用户浏览器并且保存到本地的一小块数据，它会在浏览器下次向同一服务器发起请求时，被携带到服务器上。 它的作用： 经常用来做一些用户会话状态管理、个性化设置等等。 前端可以通过document.cookie来访问cookie。 cookie是跨域的，也就是在
阅读全文
摘要：什么是 SQL 注入 在所有漏洞类型中，SQL 注入可是说是危害最大最受大家关注的漏洞。简单说来，SQL 注入是通过在用户可控参数中注入SQL语法，破坏原有SQL结构，达到编写程序时意料之外结果的攻击行为。 以 ThinkJS 为例，假设我们写了如下一个接口（实际情况肯定不会这么写的）： // us
阅读全文
摘要：异常捕获方法 1.try catch 这种方案要求开发人员在编写代码的时候，在预估有异常发生的代码段使用try...catch，在发生异常时将异常信息发送给接口： 但是 try-catch 处理异常的能力有限，只能捕获捉到运行时非异步错误，对于语法错误和异步错误就显得无能为力，捕捉不到。 try{
阅读全文
摘要：关注性能是工程师的本性 + 本分； 页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。 用什么监控 关于前端性能指标，W3C 定义了强大的 Perfo
阅读全文
摘要：Cookie 用于存储 web 页面的用户信息。 什么是 Cookie？ Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问
阅读全文
摘要：上个效果图 图片出现在页面中采去加载所需的图片进行显示,并不是开始就将整个页面的图片一起加载出来,这样有效提高网站的性能。 使用方法 cdn引入 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/l
阅读全文
摘要：这里的合并主要针对当前页面上访问的资源文件，比如css,js,图片等。 HTTP请求过程 一个HTTP请求的主要过程是： DNS解析(T1) -> 建立TCP连接(T2) -> 发送请求(T3) -> 等待服务器返回首字节（TTFB）(T4) -> 接收数据(T5)。 如下图所示，是Chrome D
阅读全文