URL

URL (Uniform Resource Locator)
中译:统一资源定位符(其实就是网址)

语法规则

1
scheme://host.domain:port/path/filename

1：scheme - 定义网络服务的类型. 比如:https
2：host - 定义域主机(http默认主机 www)
3：domain - 定义域名,比如 baidu.com
4：port -定义主机上的端口号(http默认是 80)
5：path - 定义服务器路径(如果省略,文档必须在网站根目录下)
6：filename - 定义文档/资源的名称

css相关

css解析顺序

从上到下，从右到左。如果是这样的一个结构，浏览器会从右向左开始解析。因为一般来说，最右侧的节点范围反而会比较大，越向左限定的条件就越多。也因此 CSS 的选择器设计上不宜嵌套过多，会带来性能上的问题。

字符串转驼峰

1
2
3
4
5
6
7
8
9
// 转化为驼峰命名
function toHump(str) {
    let reg = /-(\w)/g;
    return str.replace(reg, function ($0, $1) {
        return $1.toUpperCase();
    })
}
// adsZzcQqqUiiasdAsd
console.log(toHump('ads-zzc-qqq-uiiasd-asd'))

css实现三角型

就是把想要的三角型左右两边隐藏起来（transparent）。

1
2
3
4
5
6
7
8
9
10
11
.kailong{
	width:0;
    height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
    transition: 0.5s; // 可以有动画
}
.kailong:hover {
    transform: rotate(90deg); // 按中心旋转90度
}

示例

数组方法

flat(Infinity)

  • 创建一个新数组根据传入多少拉平
  • 默认拉平一层，如果想要不管多少层都拉平就传入Infinity。
  • 如果有空位会跳过空位

解决浮点数运算不准确

  1. 考虑到每次浮点数运算的偏差非常小(其实不然)，可以对结果进行指定精度的四舍五入，比如可以parseFloat(result.toFixed(12));

  2. 将浮点数转为整数运算，再对结果做除法。比如0.1 + 0.2，可以转化为(1 + 2)/10。(转化后的两个整数相乘的结果有可能超过 MAX_SAFE_INTEGER)

  3. 把浮点数转化为字符串，模拟实际运算的过程。

set，map，weakset，weakmap

set

  • 在js中Set 对象允许存储任何类型的唯一值，无论是原始值或者是对象引用。
  • 顶层数据结构不具备key—>value特征,内部会自动加index序列。
  • 可以存储不同类型的任何数据。

set方法

  • size属性: 返回集合的元素个数。（类似数组的长度length）
  • add(value)方法: 向集合中添加一个元素value。注意：如果向集合中添加一个已经存在的元素，不报错但是集合不会改变。
  • delete(value)方法: 从集合中删除元素value。
  • has(value)方法: 判断value是否在集合中，返回true或false.
  • clear()方法: 清空集合。

map

map对象保存键值对

方法

  • size: 属性，取出字典的长度
  • set(key, value)：方法，向字典中添加新元素
  • get(key)：方法，通过键查找特定的数值并返回
  • has(key)：方法，判断字典中是否存在键key
  • delete(key)：方法，通过键 key 从字典中移除对应的数据
  • clear()：方法，将这个字典中的所有元素删除

weakset

和set类似是不可重复的值得集合，但是weakset成员只能是对象

都是弱引用，随时都可能消失

weakmap

依然是键值对的集合，只是键是弱引用对象，而值可以是任意的。

weak这些因为都是弱引用的，所以在没有其他引用和他们引用的是同一对象的时候，该对象就会被垃圾回收，避免内存泄漏。

WeakMap与Map类似，但有几点区别：

1、WeakMap只接受对象作为key，如果设置其他类型的数据作为key，会报错。

2、WeakMap的key所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。

3、由于WeakMap的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有size属性。

4、没有clear()方法

5、不能遍历

适用场景

  • 想要给网页的dom节点进行操作
  • 注册监听事件的listener

事件循环的机制

主线程->清空微任务队列->UI（dom）渲染->取一个宏任务执行->清空微任务队列->UI渲染->取一个宏任务执行

宏任务可以有多个任务队列,而微任务只有一个任务队列

参考

前端优化

  • 开启压缩
  • 图片使用webp
  • cdn
  • 提取关键帧资源，优先加载
  • 代码分片，延迟加载
  • 预加载，preload prefetch等
  • script defer async
  • 域名分片，减少请求数
  • 服务端渲染
  • 如果已经升级为https，可以考虑使用http2.0。两个点：一个头信息压缩，二是解决了队头阻塞问题，三是增加了服务端push。
  • 资源预取，混合应用可以加离线宝
  • 在mvvm类框架进行前端渲染，我们可以使用defer加在我们的内容，在配上骨架图，保证用户看到的不是空白的页面。
  • 当然少不了我们的业务代码，好的代码会让网站更稳定的运行下去
  • 分析network的timing，然后通过本文最开始提及的各字段分析问题

响应式布局

  • media-query，根据不同的屏幕宽度设置根元素font-size

  • vw和vh

margin纵向问题

  • 相邻元素margin-top和margin-bottom会重叠（开启bfc解决）
  • 空白内容的

    会重叠

BFC开启条件

  • float：left|right
  • position：absolute|fixed
  • display: table-cell|table-caption|inline-block
  • overflow: hidden|scroll|auto

line-hight的继承

其他具体数值和比例的时候都是直接继承，若是百分比则继承计算出来的值

圣杯双飞翼

圣杯

设置中间的mid，left，right的父元素float：left向左浮动，再设置padding-left-right为留给左右的宽度，中间的mid也可以正好合适了。

然后将left设置margin-left：-100%和mid重叠，之后再设置position：relative; right：他自身宽度px来移动到左边。
然后给right设置margin-right：-自身宽度px

双飞翼

浮动后，留白通过margin来留白

给left只要margin-left：-100%就可以

right只要margin-left：-自身宽度px即可

clearfix

1
2
3
4
5
.clearfix:after {
    content: ''；
    display: table；
    clear: both;
}

三栏布局

position绝对定位，flex直接摆放

gird

1
2
3
4
5
6
.div{
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}

直接看了

闭包相关

所有自由变量的查找是在函数定义的地方，向上级作用域查找。不是在执行的地方！

async和await

执行async函数返回promise对象，如果直接返回的值就会把它封装成promise.resolve(值)

await相当于promise.then

try…catch相当于promise.catch

原理

相当于将generator函数和自动执行器包装到一个函数里，也可以看作自带启动器的 generator 函数的语法糖。

变量提升和函数提升

变量提升是把var a提到前面，然后再将a=10留在原地等赋值；

函数提升是把整个函数体提升到作用域顶部

函数提升优先级更大

1
2
3
4
5
6
7
8
9
10
11
foo(); //1
 
var foo;
 
function foo () {
    console.log(1);
}
 
foo = function () {
    console.log(2);
}

函数声明function foo这种才有函数提升，函数表达式var foo = function()这种没有，要是在函数表达式前调用就会报错，因为var foo；定义完并不是一个方法。

浏览器的相关问题

浏览器灵魂之问，请问你能接得住几个？

求二叉树高度

1
2
function H(node){
    return node==null ? 0 :(Math.max.call(H(node.left),H(node.right))+1);}

快排的时间和空间复杂度

时间复杂度

在最差情况下，划分由 n 个元素构成的数组需要进行 n 次比较和 n 次移动。因此划分所需时间为 O(n) 。最差情况下，每次主元会将数组划分为一个大的子数组和一个空数组。这个大的子数组的规模是在上次划分的子数组的规模减 1 。该算法需要 (n-1)+(n-2)+…+2+1= O(n^2) 时间。
在最佳情况下，每次主元将数组划分为规模大致相等的两部分。设 T(n) 表示使用快速排序算法对包含 n 个元素的数组排序所需的时间，因此，和归并排序的分析相似，快速排序的 T(n)= **O(nlogn)**。

空间复杂度

最优的情况下空间复杂度为：O(logn) ；每一次都平分数组的情况

最差的情况下空间复杂度为：O( n ) ；退化为冒泡排序的情况

object.defindProperty和proxy的差别

  • 使用Object.defineProperty需要遍历对象的每一个属性，对于性能会有一定的影响
  • Proxy 作为新标准将受到浏览器厂商重点持续的性能优化
  • Proxy 能观察的类型比 defineProperty 更丰富
  • Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9
  • Object.definedProperty 是劫持对象的属性，新增元素需要再次 definedProperty。而 Proxy 劫持的是整个对象，不需要做特殊处理
  • 使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截，而使用 proxy，就必须修改代理对象（new Proxy），即 Proxy 的实例才可以触发拦截

computed和watch

watch擅长处理的场景：一个数据影响多个数据；

computed擅长处理的场景：一个数据受多个数据影响。

https加密过程

https加密过程

  1. 浏览器发送client_random，加密方法列表
  2. 服务器接收到，返回server_random、加密方法和数字证书
  3. 浏览器验证数字证书生成pre_random，用公钥加密pre_random和用最后生成的secret加密secret发送给服务器，
  4. 私钥解密获得pre_random后，用之前三个random生成secret。
  5. 服务器用secret发送确定，之后就都用这个对称密钥通信了

获取页面中所有h开头的标签

  1. 通过document.getElementByTagName("*")获取所有标签
  2. 再通过startWith("h",可填起止位置)遍历匹配标签中开头是否符合（返回的是true或false）

怪异盒和标准盒

  • 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；总宽度=margin+width+border+padding
  • 当设置为box-sizing:border-box时，将采用怪异模式解析计算；总宽度=margin+width（包含了padding和border）

图片相关css

  • background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
  • background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
  • background-size ：100px 100px; // 调整图片到指定大小；
  • background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

try+catch+finally+throw

1
2
3
4
5
6
7
try {

} catch(e) {

} finally {
	// 在 try 和 catch 之后无论有无异常都会执行
}

当错误发生时， JavaScript 会停止执行，并生成一个错误信息。使用 throw 语句 来创建自定义消息(抛出异常)。

watch深层监听

  • deep: true
  • 使用computed+watch来监听深层内部的东西