无题
#栈 #哈希表 #leetcode #JavaScript #数组
LeetCode 第 1 号问题:两数之和题目地址
https://leetcode-cn.com/problems/two-sum
题目描述12345678910给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素不能使用两遍。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9所以返回 [0, 1]
解法一(Map 数据结构)思路
首先创建一个Map。1const map = new Map()
接着。遍历nums。123let len = num.length // nums的长度for(let i =0;i<len;i++){}
然后。定义diff = target 减去某一位置的值。如果,map.has(diff)也就是map 储存在差值,直接返回插值的 ...
无题
#栈 #哈希表 #leetcode #JavaScript #字符串 #滑动窗口 #双指针
LeetCode 003:无重复字符的最长子串题目地址
https://leetcode.com/problems/longest-substring-without-repeating-characters/description/
题目描述12345678910111213141516171819给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度。示例 1:输入: "abcabcbb"输出: 3解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3。示例 2:输入: "bbbbb"输出: 1解释: 因为无重复字符的最长子串是 "b",所以其长度为 1。示例 3:输入: "pwwkew"输出: 3解释: 因为无重复字符的最长子串是 "wke",所以其长度为 3。 请注意,你的答案必须是 子串 的长度,"pwke" 是一个子序 ...
无题
#栈 #哈希表 #leetcode #JavaScript
题目地址
https://leetcode.cn/problems/integer-to-roman
题目描述1234567891011121314151617181920212223242526272829303132333435363738394041424344罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1。12 写做 XII ,即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等于大数 5 减小数 1 得到的数值 4 ...
无题
#栈 #哈希表 #leetcode #JavaScript
题目地址
https://leetcode.cn/problems/roman-to-integer
题目描述12345678910111213141516171819202122232425262728293031323334353637383940414243罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1 。12 写做 XII ,即为 X + II 。 27 写做 XXVII, 即为 XX + V + II 。通常情况下,罗马数字中小的数字在大的数字的右边。但也存在特例,例如 4 不写做 IIII,而是 IV。数字 1 在数字 5 的左边,所表示的数等于大数 5 减小数 1 得到的数值 4 。 ...
什么是虚拟DOM?为什么需要虚拟DOM
什么是虚拟 DOMvirtual DOM 跨平台能力 RN WEEX
js 用对象的属性描述节点 映射到真实环境
object tag attrs children
vdom 节点与真实 dom 属性意义对应
为什么需要虚拟 DOMDOM 操作引起性能问题
vdom vnode diff js 对象 attach 避免无必要计算
抽象原本的渲染过程 实现跨平台能力
深浅拷贝
数据类型
基本类型 栈内存
引用类型 堆内存 变量 指向实际堆内存中实际对象的引用
浅拷贝
只拷贝一层
引用类型只拷贝内存地址
修改一个对象属性,另外一个对象属性会发生改变
实现方式
Object.asign()
Array.prototype.slice()
Array.prototype.concat()
扩展运算符
深拷贝
开辟新的栈,两个对象属性完全相同,对应两个不同地址。修改一个对象属性,另外一个对象属性不会发生改变
实现方式
_.cloneDeep() lodash 深拷贝
jQuery.extend()
JSON.stringify() 会忽略 undefined symbol 函数
手写循环递归
区别
浅拷贝 只复制属性指向某个对象的指针,不复制对象本身,新旧对象共享同一块内存 修改对象属性会改变原对象
深拷贝 创造一个一模一样的对象,新旧对象不共享内存,修改对象属性不会改变原对象
输入url,到页面展示的过程
过程
输入 url
浏览器缓存 - 系统缓存 - 路由器缓存 有缓存显示页面内容,没有就往下执行
http 请求前 DNS 解析 ip 地址
tcp 连接 三次握手 浏览器发送 http 请求 请求数据包
服务器收到请求,返回数据到浏览器
http 响应
读取页面内容 渲染 解析代码
生成 DOM 树,解析 css 样式,js 交互,渲染显示页面
ES6模块和CommonJS的异同
相同点
对引入对象进行赋值,即对对象内部属性的值的改变
区别
commonJS 模块运行时加载,ES6 模块是输出编译时输出接口
commonJS 模块 require 同步加载模块,ES6 import 是异步的
commonJS 模块 require 对模块的浅拷贝,ES6 import 是对模块的引入,只存只读不改变其值 指针指向不能变类似 const
import 接口 read-only 不能改变变量值,
前端白屏时间长的原因有哪些,怎么优化
白屏时间
空白->显示第一个画面时间
重要性提升用户体验,减少用户跳出,提升整体页面的留存率
原因
css 放在 head 里,阻塞渲染,加载时间长会出现页面长时间白屏
js 加载和执行会阻塞页面解析和渲染
优化
DNS 解析
DNS 缓存优化
DNS 预加载策略
确定可靠的 DNS 服务器
对浏览器页面的下载 解析 渲染过程
尽可能精简 HTML 代码和结构
尽可能优化 css 文件和结构
合理放置 js 代码 尽量不要使用内敛 js
将渲染首屏 css 内敛到 html 中 快速下载 css
延迟首屏不需要的图片加载 优先加载首屏所需的图片
文件体积
尽量减少 css js 体积,放在 head 标签
js defer 属性:先加载后执行不阻塞代码执行
如何提取url的参数
12345678let url = 'https://baidu.com?a=1&b=12&c=info'let getUrlParams = function (URL) { let url = URL.split('?')[1] let urlsearchparam = new URLSearchParams(url) const params = Object.fromEntries(urlsearchparam.entries()) return params}console.log(getUrlParams(url))