Hexo

HTML总结一、语义化语义化是指根据内容的结构化，选择合适的标签。 也就是用正确的标签做正确的事。 优点： 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效的信息，有利于SEO 对开发者友好，增强了代码的可读性，结构更加清晰，便于维护 常见的与语义化标签 header ：头部 nav ：导航栏 main ：主要区域 section ：区块 article ：主要内容 aside ：侧边栏 footer ：底部 二、DOCTYPE（文档类型）DOCTYPE是HTML5中的一种标准通用标记语言的文档类型声明，它的目的是为了告诉浏览器应该以什么样的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析。它必须声明在HTMl文档的第一行。 浏览器渲染⻚⾯的两种模式（可通过document.compatMode获取，⽐如，语雀官⽹的⽂档类型是 CSS1Compat）： CSS1Compat：标准模式（Strick mode），默认模式，浏览器使⽤W3C的标准解析渲染⻚⾯。在 标准模式中，浏览器以其⽀持的最⾼标准呈现⻚⾯。 ...

42. 接雨水给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。 示例 1： 输入：height = [0,1,0,2,1,0,1,3,2,1,2,1] 输出：6 解释：上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图，在这种情况下，可以接 6 个单位的雨水（蓝色部分表示雨水）。 1234567891011121314151617var trap = function(height) { let sum = 0; let left = 0,right = height.length-1; let lMax = 0;rMax = 0; while(left < right){ lMax = Math.max(lMax,height[left]);//左边最大值 rMax = Math.max(rMax,height[right]);//右边最大值 if(height[left] < height[right] ...

微前端：京东的MicroApp文档 微前端在前端领域中是炙手可热的话题，将一个应用的不同模块单独建立应用，使用不同的框架生态来实现，再整合成一个应用 在实际业务中，我们也遇到同样的问题，并且在不同的业务场景下尝试了各种解决方案，如iframe、npm包、微前端框架，并对各种方案的优劣进行了对比。 iframe：在所有微前端方案中，iframe是最稳定的、上手难度最低的，但它有一些无法解决的问题，例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖，它的成长性不高，只适合简单的页面渲染。 npm包：将子应用封装成npm包，通过组件的方式引入，在性能和兼容性上是最优的方案，但却有一个致命的问题就是版本更新，每次版本发布需要通知接入方同步更新，管理非常困难。 微前端框架：流行的微前端框架有single-spa和qiankun，它们将维护成本和功能上达到一种平衡，是目前实现微前端备受推崇的方案。由于iframe和npm包存在问题理论上无法解决，在最初我们采用qiankun作为解决方案，qiankun是在single-spa基础上进行了封装，提供了js沙箱、样式隔离、预加载等功能，并且与技术栈无关， ...

5. 最长回文子串给你一个字符串 s，找到 s 中最长的回文子串。 示例 1： 输入：s = “babad” 输出：”bab” 解释：”aba” 同样是符合题意的答案。 示例 2： 输入：s = “cbbd” 输出：”bb” 1234567891011121314var longestPalindrome = function(s) { let res = ''; const n = s.length; const dp = Array.from(Array(n), () => Array(n).fill(false)); for(let i = n - 1;i >= 0;i--){ for(let j = i;j < n;j++){ dp[i][j] = s[i] === s[j] && (j - i < 2 || dp[i+1][j-1]); if(dp[i][j] && j-i+1 > ...

将图片base64 转换为 图片文件项目中遇到一个需求，图片上传，但是这个图片是base64编码的，需要转换为图片文件对象才能上传 123456789101112131415// 将图片base64 转换为 图片文件// dataurl 图片的base64编码// 例：Request URL: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB....function dataURLtoFile(dataurl){ let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1];//图片类型 png const filename = Date.parse(new Date()) + '.png'; let bstr = window.atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n); while(n--) ...

Nginx 安装与使用首先安装一些工具 1234567yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ yum install -y pcre pcre-develyum install -y zlib zlib-develyum install -y openssl openssl-devel wget是一个下载文件的工具，它用在命令行下。 Vim是一个类似于 Vi 的著名的功能强大、高度可定制的 文本编辑器 g++编译cpp文件 gcc编译c文件 make工具可以看成是一个智能的批处理工具，它本身并没有编译和链接的功能，而是用类似于批处理的方式—通过调用makefile文件中用户指定的命令来进行编译和链接的。 PCRE是一个Perl库，包括 perl 兼容的正则表达式库 zlib是提供数据压缩用的函式库 openssl在计算机网络上，OpenSSL是一个开放源代码的软件库包，应用程序可以使用这个包来进行安全通信，避免窃听， ...

165. 比较版本号给你两个版本号 version1 和 version2 ，请你比较它们。 版本号由一个或多个修订号组成，各修订号由一个 ‘.’ 连接。每个修订号由 多位数字 组成，可能包含 前导零 。每个版本号至少包含一个字符。修订号从左到右编号，下标从 0 开始，最左边的修订号下标为 0 ，下一个修订号下标为 1 ，以此类推。例如，2.5.33 和 0.1 都是有效的版本号。 比较版本号时，请按从左到右的顺序依次比较它们的修订号。比较修订号时，只需比较 忽略任何前导零后的整数值 。也就是说，修订号 1 和修订号 001 相等 。如果版本号没有指定某个下标处的修订号，则该修订号视为 0 。例如，版本 1.0 小于版本 1.1 ，因为它们下标为 0 的修订号相同，而下标为 1 的修订号分别为 0 和 1 ，0 < 1 。 返回规则如下： 如果 version1 > version2 返回 1，如果 version1 < version2 返回 -1，除此之外返回 0。 示例 1： 输入：version1 = “1.01”, version2 = “1.001” 输 ...

浏览器：WebStorageWebStorage网页存储，用于在前端存储数据，常见的有Cookie、LocalStorage、SessionStorage、IndexDB CookieHTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存 当一个用户登录之后，HTTP是无状态的并不知道用户已经登录，需要一个东西来保存这个状态，这个就是Cookie。 Cookie就是维护客户端与服务器之间的一个状态，通常服务器将某个表示状态的数据进行加密，通过响应头set-cookie返回给客户端，然后客户端保存。 Cookie并不会一直保存在客户端，可以设置一个过期时间，如果不设置过期时间，那么就是会话级别的，网页已关闭就删除 Cookie可以用来共享数据，但是受同源策略影响，只能在同源的网页才能获取到一样的cookie 缺点： 只能是字符串，并且只能保存4kb的内容 没有自己的api，需要用户自己封装 在客户端发送的每一个请求时，cookie必须同时发送给服务器，增加请求的体积 不安全，如果不设置http-only攻击者可以使用JavaScript就可以获取到Cooki ...

浏览器：Web安全前端需要注意的常见的攻击类型及防御 一、XSS跨站脚本攻击（Cross Site Script）,本来缩写是 CSS, 但是为了和层叠样式表（Cascading Style Sheet, CSS）有所区分，所以安全领域叫做 “XSS”； XSS攻击，通常是指攻击者通过 “HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，对用户的浏览器进行控制或者获取用户的敏感信息（Cookie, SessionID等）的一种攻击方式。 危害： 可以窃取 cookie信息。恶意 JavaScript可以通过 ”doccument.cookie“获取cookie信息，然后通过 XMLHttpRequest或者Fetch加上CORS功能将数据发送给恶意服务器；恶意服务器拿到用户的cookie信息之后，就可以在其他电脑上模拟用户的登陆，然后进行转账操作。 可以监听用户行为。恶意JavaScript可以使用 “addEventListener”接口来监听键盘事件，比如可以获取用户输入的银行卡等信息，又可以做很多违法的事情。 可以修改DOM 伪造假的登陆窗口，用来欺骗用户输 ...

浏览器：渲染流程当请求结果的content-type=text/html时，浏览器就会将资源交给渲染引擎进行渲染，大概流程如下： 一、解析HTML浏览器接收到的HTML是字节流的形式，首先会对其进行词法分析，将其转换为一个个的token,分为Tag Token和文本 Token,而，Tag token又分为StartTag和EndTag HTML 解析器维护了一个Token 栈结构，该 Token 栈主要用来计算节点之间的父子关系，在第一个阶段中生成的 Token 会被按照顺序压到这个栈中。 举个例子： 123456<html> <boby> <div>1</div> <div>test</div> </boby></html> 解析为： 二、构建DOM树在解析的时候，就开始构建DOM树，步骤如下： 如果压入到栈中的是StartTag Token，HTML 解析器会为该 Token 创建一个 DOM 节点，然后将该节点加入到 DOM 树中，它的父节点 ...