08-算法问题
title: 08-算法问题publish: true
前言算法主要包括：
1、排序
排序一定要准备。
2、堆栈、队列、链表
队列和链表可以不准备，但是堆栈一定要准备。
一个小技巧：JS的数组本身就具备堆栈和队列的特性。比如：pop、push、shift、unshift这四个api，本身就帮我们实现了堆栈和队列。
堆栈：先进后出。
3、递归
递归是一定不能偷懒的。算法比较难的时候，一般要用到递归。
4、波兰式和逆波兰式
总结：
比如阿里，如果基础题答的很好，但是算法不会，那可能通不过。
还有金融类的，必考算法。比如阿里云，里面的业务就是算法的，所以肯定考算法。
排序上面的排序这么多，我们要记住下面这三个：
快速排序：https://segmentfault.com/a/1190000009426421
选择排序：https://segmentfault.com/a/1190000009366805
希尔排序：https://segmentfault.com/a/1190000009461832
如果你还要学一个，那就是冒泡排序。
题目中，会给你一个算法题， ...
09-js运行机制：异步和单线程
title: 09-js运行机制：异步和单线程publish: true
前言面试时，关于同步和异步，可能会问以下问题：
同步和异步的区别是什么？分别举一个同步和异步的例子
一个关于 setTimeout 的笔试题
前端使用异步的场景哪些？
面试时，关于js运行机制，需要注意以下几个问题：
如何理解JS的单线程
什么是任务队列
什么是 EventLoop
理解哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机
JS的异步和单线程
因为是单线程，所以必须异步。
我们通过题目来解释以下。
题目一：异步现有如下代码：
console.log(1);setTimeout(function () { console.log(2);}, 1000);console.log(3);console.log(4);
上面的代码中，我们很容易知道，打印的顺序是1，3，4，2。因为你会想到，要等一秒之后再打印2。
可如果我把延时的时间从1000改成0：
console.log(1);setTimeout(function () { ...
10-页面性能优化
title: 10-页面性能优化publish: true
前言提升页面性能优化的方法有哪些：
1、资源压缩合并，减少http请求
2、非核心代码异步加载 –> 异步加载的方式 –> 异步加载的区别
如果回答出非核心代码异步加载，就会层层深入。
3、利用浏览器缓存 –> 缓存的分类 –> 缓存的原理
缓存是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】
有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。
4、使用CDN
浏览器第一次打开页面时，缓存是起不了作用的。CDN这一条，一定要说出来。
5、DNS预解析
一、资源压缩合并，减少http请求
合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
图片较多的页面也可以使用 lazyLoad 等技术进行优化。
精灵图等
二、非核心代码异步加载异步加载的方式：（这里不说框架，只说原理）
动态脚本加载
defer
async
动态脚本加载使用document.cre ...
11-前端错误监控
title: 11-前端错误监控publish: true
前言错误监控包含的内容是：
前端错误的分类
每种错误的捕获方式
上报错误的基本原理
面试时，可能有两种问法：
如何监测 js 错误？（开门见山的方式）
如何保证产品质量？（其实问的也是错误监控）
前端错误的分类包括两种：
即时运行错误（代码错误）
资源加载错误
每种错误的捕获方式即时运行错误的捕获方式方式1：try … catch。
这种方式要部署在代码中。
方式2：window.onerror函数。这个函数是全局的。
window.onerror = function(msg, url, row, col, error) { ... }
参数解释：
msg为异常基本信息
source为发生异常Javascript文件的url
row为发生错误的行号
方式二中的window.onerror是属于DOM0的写法，我们也可以用DOM2的写法：window.addEventListener("error", fn);也可以。
问题延伸1：
window ...
01-前端代码规范
前端代码规范-推荐资料JS规范，重点推荐下面这两个1、Airbnb JavaScript Style Guide：
英文原版：https://github.com/airbnb/javascript
中文版：https://github.com/lin-123/javascript
2、clean code JavaScript：
英文原版：https://github.com/ryanmcdermott/clean-code-javascript
中文版1：https://github.com/alivebao/clean-code-js
中文版2：https://github.com/beginor/clean-code-javascript
eslint规范1、eslint-config-airbnb：
https://www.npmjs.com/package/eslint-config-airbnb
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
2 ...
02-前端书籍推荐
JavaScript 书籍《》
前端工程化
前端实战开发的各个方面前端实战开发包括很多方面，比如：
跨终端技术体系
前端监控体系
多终端可视化页面搭建体系
前端性能优化体系
具体业务的架构设计
前端通道建设
搭建前端工程化技术体系
网站前端基础架构升级
研发日PV达千万的超大流量前端项目
在 W3ctech、D2、FEDAY等技术大会中发表主题演讲
分享前端性能优化方面的经验和见解
前端常见专有名词
JS相关
JS装饰器
性能相关
防抖和节流
滚动穿透
样式相关
多行文字截断
othersnoop() 方法
前端的几道题目
几道面试题
页面布局如何实现一个三栏布局，要求两边固定宽度、中间自适应。此题可以考察的知识点：
圣杯布局
双飞翼布局
flex布局（css3）
让元素垂直居中方式一：如果宽高已知，可以利用绝对定位。
方式二：用 translate 位移来做。（在宽高未知的情况下，也可以这样做）
div { background-color: red; position: absolute; 绝对定位的盒子 top: 50%; 首先，让上边线居中 transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】}
方式三：flex 布局
parentElement{ display: flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items: center;/*设置子元素在侧轴方向上的布局*/}
参考链接：
https://www.z ...
前端监控技术
前言要监控的内容：
业务数据
稳定性
性能
错误
用户操作路径
怎么监控：
PV/UV、业务操作上报
根据上报寻找异常
将页面性能数据上报
将页面产生错误上报
跟踪用户操作路径
数组的常见操作
前言数组在实战开发中，使用得相当频繁。前端同学通过接口拿到json数据后，往往需要把数据进行各种形式的变换和展示。这个时候，数组的常见操作，就发挥了很大的作用。
如果你对数组的基础知识不太熟悉，建议回去看看03-JavaScript的基础知识。
掌握了基础知识之后，我们再来看看，实战开发中，数组都有哪些常见操作。
数组的常见操作从对象数组中，将属性的值提取为数组一般人可能会想着通过 for 循环进行遍历，但这种做法不够简洁。
最佳答案：
const arr1 = [ { skuId: "123", name: "商品1" }, { skuId: "456", name: "商品2" }, { skuId: "789", name: "商品3" }];const skuIdArr = arr1.map(item => item.skuId); // 将数组 arr1 中的 skuId字段提取为一个新 ...
HTML-01-认识Web和Web标准
Web、网页、浏览器WebWeb（World Wide Web）即全球广域网，也称为万维网。
我们常说的Web端就是网页端。
网页网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。
浏览器浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。
关于浏览器的详细介绍，可以看下一篇文章：《浏览器的介绍》。
Web标准W3C组织W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
W3C 组织就类似于现实世界中的联合国。
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
Web 标准Web标准：制作网页 ...
HTML-02-浏览器的介绍
常见的浏览器浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
我们重点需要学习的是 Chrome 浏览器。
浏览器的市场占有份额浏览器的市场占有份额：https://tongji.baidu.com/research/site?source=index#browser
上面这张图的统计时间是2020年2月。
浏览器的组成浏览器分成两部分：
1、渲染引擎（即：浏览器内核）
2、JS 引擎
1、渲染引擎（浏览器内核）浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
渲染引擎是浏览器兼容性问题出现的根本原因。
渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
常见浏览器的内核如下：
浏览器
内核
chrome
Blink
欧鹏
Blink
360安全浏览器
Blink
360极速浏览器
Blink
...
HTML-03-初识HTML
编辑器相关前端开发的编辑器软件，我首先推荐 VS Code，其次推荐Sublime Text。
有人说 WebStorm 也不错？但真实情况是，自从VS Code 问世之后，用 WebStorm 的人越来越少了。
PS：文件的后缀名不能决定文件格式，只能决定打开文件打开的方式。
VS Code 的使用详情请移步至：第一次使用VS Code时你应该知道的一切配置
Sublime Text 的使用详情请移步至：Sublime Text使用技巧
HTML的概述HTML的概念HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。
作用：HTML是负责描述文档语义的语言。
概念：超文本所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
概念：标记语言HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
（1）标记语言是一套标记标签 ...
HTML-04-HTML标签：排版标签
本文主要内容排版标签：
<h1>
<p>
<hr />
<br />
<div>
<span>
<center>
<pre>
下面来详细介绍一下排版标签。
标题标签标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
代码举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head> ...
