前端性能优化篇 一、前言 知识体系： 从一道面试题说起 在展开性能优化的话题之前，我想先抛出一个老生常谈的面试问题： 从输入 URL 到页面加载完成，发生了什么？ 这个问题非常重要，因为我们后续的内容都将以这个问题的答案为骨架展开。我希望正在阅读这本小册的各位可以在心里琢磨一下这个问题——无须你调动太多计算机的专业知识，只需要你用最快的速度在脑海中架构起这个抽象的过程——我们接下来所有的工作，就是围绕这个过程来做文章。 我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作（如下图所示）。 我们将这个过程切分为如下的过程片段： DNS 解析 TCP 连接 HTTP 请求抛出 服务端处理请求，HTTP 响应 ...

高频手写题目 面试高频手写题目 1 实现防抖函数（debounce） 防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 手写简化版: // func是用户传入需要防抖的函数 // wait是等待时间 const debounce = (func, wait = 50) => { // 缓存一个定时器id let timer = 0 // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器 // 开始一个新的定时器，延迟执行用户传入的方法 return function(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { func.apply(this ...

综合问题 这里不做解答，请自行查阅相关答案。 一、基础 1.1 HTML html5新标签有哪些 canvas、svg、webGL 你是如何理解 HTML语义化的，有什么好处 前端需要注意哪些SEO? manifest、worker、socket input和textarea的区别 用一个div模拟textarea的实现 1.2 CSS css3有什么新特性，浏览器支持怎么样 伪类是什么？有哪些？会有哪些兼容性问题？如何处理？ css预处理器知道吗？用过哪些？有什么优劣？后处理器知道吗？ 盒模型有哪几种？怪异模式和标准模式？ less、sass、postcss、prefix 层叠优先级 圣杯、双飞燕布局 float清除浮动 flex布局、 grid布局、table布局 css以及中轴旋转、动画变换 绘制三角形、矩形、菱形、梯形（奇巧淫技，可以不问） sprite图（雪碧图）知道吗？svg雪碧图了解吗？ px、em、rem、vw、vh？rem的根节点样式在什么时候设置？ position有哪些？他们的定位原点是什么？ 媒体查询用css好还是用js好？ link和@imp ...

JavaScript进阶问题列表 进阶问题 1. 输出是什么？ function sayHi() { console.log(name) console.log(age) var name = 'Lydia' let age = 21 } sayHi() A: Lydia 和 undefined B: Lydia 和 ReferenceError C: ReferenceError 和 21 D: undefined 和 ReferenceError 答案 答案: D 在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 undefined。因为当我们打印 name 变量时还没有执行到定义变量的位置，因此变量的值保持为 undefined。 通过 let 和 const 关键字声明的变量也会提升，但是和 var 不同，它们不会被初始化。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为 ...

有赞一面 说说CSS选择器以及这些选择器的优先级 !important 内联样式（1000） ID选择器（0100） 类选择器/属性选择器/伪类选择器（0010） 元素选择器/伪元素选择器（0001） 关系选择器/通配符选择器（0000） 你知道什么是BFC么 小提示：这个问题重点是BFC是什么，BFC触发的条件有哪些，BFC可以干什么。这里我试着讲解了一下Boostrap的清除浮动（display：table创建匿名table-cell间接触发BFC），如果有看到别的场景使用或者自身有使用的场景可以尝试讲解一下使用技巧。这样可以让面试官觉得你不仅仅知道他问的东西是什么，你还能很好的使用它。 什么是BFC BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其 ...

一、Vue.js 运行机制全局概览 全局概览 这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过 Vue.js 实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程 首先我们来看一下笔者画的内部流程图。 大家第一次看到这个图一定是一头雾水的，没有关系，我们来逐个讲一下这些模块的作用以及调用关系。相信讲完之后大家对Vue.js内部运行机制会有一个大概的认识。 初始化及挂载 在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」，后面会详细讲到，这里只要有一个印象即可。 初始化之后调用 $mount 会挂载组件，如 ...

前端面试之MVVM解析 一、说一下使用 jquery 和使用框架的区别 1.1 jQuery 实现 todo-list 1.2 vue 实现 todo-list 1.3 jQuery 和框架的区别 数据和视图的分离，解耦（开放封闭原则） 以数据驱动视图，只关心数据变化，DOM 操作被封装 二、说一下对 MVVM 的理解 2.1 MVC M - Model 数据 V - View 视图、界面 C - Controller 控制器、逻辑处理 2.2 MVVM Model - 模型、数据 View - 视图、模板（视图和模型是分离的） ViewModel - 连接 Model 和 View 2.3 关于 ViewModel MVVM 不算是一种创新 但其中的 ViewModel 确实一种创新 真正结合前端场景应用的创建 2.4 MVVM 框架的三大要素 响应式：vue如何监听到 data 的每个属性变化？ 模板引擎：vue 的模板如何被解析，指令如何处理？ 渲染：vue 的模板如何被渲染成 html ？以及渲染过程 三、vue 中如何 ...

前端面试之Hybrid 一、hybrid 是什么，为何会用 hybrid 1.1 hybrid 文字解释 hybrid 即“混合”，即前端和客户端的混合开发 需前端开发人员和客户端开发人员配合完成 某些环节也可能涉及到 server 端 PS：不要以为自己的前端就可以不理会客户端的知识 1.2 hybrid 存在价值 可以快速迭代更新【关键】（无需 app 审核，思考为何？） 体验流畅（和 NA 的体验基本类似） 减少开发和沟通成本，双端公用一套代码 1.3 webview 是 app 中的一个组件（ app 可以有 webview ，也可以没有） 于加载 h5 页面，即一个小型的浏览器内核 1.4 file 协议 其实在一开始接触 html开发，就已经使用了 file 协议 只不过你当时没有“协议”“标准”等这些概念 1.5 http(s) 协议 1.6 两者区别 file 协议：本地文件，快 http(s) 协议：网络加载，慢 1.7 具体实现 不是所有场景都适合使用 hybrid 使用 NA ：体验要求极致，变化不频繁（无头条的 ...

前端面试之组件格式化 一、说一下对组件化的理解 1.1 组件的封装 视图 数据 变化逻辑 1.2 组件的复用 props 传递 复用 二、JSX 本质是什么 2.1 JSX 语法 html 形式 引入 JS 变量和表达式 循环 style 和 className 事件 JSX 语法根本无法被浏览器所解析 那么它如何在浏览器运行？ 2.2 JSX 解析 JSX 其实是语法糖 开发环境会将 JSX 编译成 JS 代码 JSX 的写法大大降低了学习成本和编码工作量 同时，JSX 也会增加 debug成本 2.3 JSX 独立的标准 JSX 是 React 引入的，但不是 React 独有的 React已经将它作为一个独立标准开放，其他项目也可用 React.createElement 是可以自定义修改的 说明：本身功能已经完备；和其他标准监控和扩展性没问题 三、JSX 和 vdom 的关系 3.1 为何需要 vdom vdom 是 React初次推广开来的，结合 JSX JSX 就是模板，最终要渲染成 html 初次渲染 + ...