目录

es6新特性

闭包及其应用场景

防抖节流

HTTP强缓存和协商缓存

Promise的三种状态

Vue-router的两种模式

宏任务和微任务

Js的缺点

数据类型

异步            、事件循环

原型

继承

xss和csrf是什么            ，如何防御

讲讲vue框架

讲讲css

数组和字符串有哪些方法

Let和var

对http有哪些了解？

Js分片具体怎么做

懒加载的原理

哪些方法能脱离文档流

垂直居中有哪些方法

Js中堆和栈的储存方式

箭头函数和普通函数区别

v-model原理

vue响应式原理

vue组件通信

diff算法

webpack打包配置

浏览器输入url到网页呈现的过程

前端的优化方法

es6新特性

let  
 
  
 
  
 
  
 
  
 
  
 
、const











、块级作用域；解构赋值 一些原生对象新增了方法  
 
  
 
  
 
  
 
  
 
  
 
，比如string的模板字符串；函数的默认值
  
  
  
  
  
  、箭头函数；数组的扩展运算符；对象名可以简写（key











，value相同时可以只写一个）  
  
  
  
  
  
、Object.is()
 


 


 


 


 


 

、Object.assign()
 
 
 
 
 
 、遍历对象：for-in   
   
   
   
   
   
、Object.keys()
 

 

 

 

 

 
、Object.getOwnerPrototypeNames()；Symbol类型
  
  
  
  
  
  ，创建要调用函数 新增了Set和Map两种数据结构  
  
  
  
  
  
，set不可重复
 


 


 


 


 


 

，map键值可以是任何类型 Proxy和Reflect Promise

 

 

 

 

 

 、Generator和Async（Generator的语法糖
 
 
 
 
 
 ，自带执行器   
   
   
   
   
   
，返回是promise） 支持class（实例的原型
 

 

 

 

 

 
，static的方法不会被继承

 

 

 

 

 

 ，必须new调用） module（export            ，import
 
 

 
 

 
 

 
 

 
 

 
 
，编译时确定）

闭包及其应用场景

一个函数如果访问了外层作用域的变量











，就是闭包

作用：避免命名冲突            、解决循环绑定引发的索引问题
 
 

 
 

 
 

 
 

 
 

 
 
、使函数内部变量不被销毁

应用场景：

单例模式                  ，变量封装在闭包内部 
 
 
 
 
 
 
 
 
 
 
 
，只向全局暴露一个访问接口 节点循环绑定click事件

















，比如点击哪个按钮就输出哪个 函数柯里化            ，避免频繁调用具有相同参数函数 防抖节流

缺点：会出现内存泄漏的问题

防抖节流

对于高频触发的时间  
 
  
 
  
 
  
 
  
 
  
 
，用防抖节流来减少调用频率

防抖：n秒后再执行该事件











，如果n秒内重复触发
  
  
  
  
  
  ，则重新计时

  搜索框输入











、窗口大小调整等

节流：n秒内只运行一次  
  
  
  
  
  
，n秒内重复触发
 


 


 


 


 


 

，只有一次生效

  滚动加载                  、搜索联想

HTTP强缓存和协商缓存

强制缓存

强制缓存在未失效的时候会直接用浏览器的缓存
 
 
 
 
 
 ，不会向服务器发送请求

强制缓存生效时状态码为200

相关请求头：cache-control / Expires / Pragma

协商缓存

当第一次请求时服务器返回的响应头没有cache-control / Expires或过期或属性设置为no-cache   
   
   
   
   
   
，浏览器第二次请求时就会与服务器协商
 

 

 

 

 

 
，如果没有修改返回304

 

 

 

 

 

 ，告诉浏览器可以使用缓存            ，如果数据有更新则返回200
 
 

 
 

 
 

 
 

 
 

 
 
，将更新数据一起返回

相关请求响应头：ETag/If-Not-Match  
 
 
 
 
 
 
 
 
 
 
 
、Last-Modified/If-Modified-Since

Promise的三种状态

Pending 进行中

Fulfilled 已成功

Rejected 已失败

.then第一个参数是resolve状态的回调函数











，第二个是rejected

.catch方法是 .then(null, rejection)的别名                  ，一般用来代替then方法的第二个参数

.finally方法用于不管promise最后状态如何都会执行的操作

all() 多个promise包装成一个新的 
 
 
 
 
 
 
 
 
 
 
 
，都fulfilled才完成

















，有一个rejected就rejected            ，但如果promise自己有catch就不会进入all方法的catch

race() 只要有一个promise状态改变就改变

Vue-router的两种模式

Hash和history

Hash路由：

工作原理是hashChange事件  
 
  
 
  
 
  
 
  
 
  
 
，url后添加#xxx触发这个事件
  
  
  
  
  
  。#后的hash变化不会导致浏览器向服务器发出请求











，即不会刷新页面
  
  
  
  
  
  ，触发hashChange事件  
  
  
  
  
  
，通过监听hash值来实现更新页面部分内容

Vue-router默认的是hash模式 
  
  
  
  
  
 。

会创建HashHistory对象
 


 


 


 


 


 

，访问不同路由时使用HashHistory.push()或HashHistory.replace()

History路由：

 用H5的pushState()和replaceState()两个api结合window.popstate事件

区别：

pushState设置的url可以试当前url同源的任意url
 
 
 
 
 
 ，而hash只能修改#后的部分

pushState设置的url和当前一模一样也会记录到栈中   
   
   
   
   
   
，hash设置的必须不一样才会记录

pushState通过stateObject可以添加任意类型的数据到记录中
 

 

 

 

 

 
，hash只可是短字符串

hash兼容IE8以上

 

 

 

 

 

 ，history兼容IE10以上

history模式需要后端配合将所有访问都指向index.html            ，否则会导致404

宏任务和微任务

宏任务 Macrotask是指Event Loop在每个阶段执行的任务

  script

















、setTimeout            、setInterval  
 
  
 
  
 
  
 
  
 
  
 
、setImmediate











、I/O
  
  
  
  
  
  、UI rendering

微任务 Microtask是指Event Loop在每个阶段间执行的任务

  promise.then  
  
  
  
  
  
、process.nextTick
 


 


 


 


 


 

、Object.observe
 
 
 
 
 
 、MutationObserve

Js的缺点

没有命名空间
 
 

 
 

 
 

 
 

 
 

 
 
，不好模块化 全局变量在所有模块中都可见











，函数内部也能定义全局变量 隐式转换：+可以表示相加或者字符连接                  ，==在两个值类型不同的时候会自动转换 NaN表示超出了解释器的极限的数字 
 
 
 
 
 
 
 
 
 
 
 
，有很多奇怪的特性

















，比如NaN===NaN false 行尾自动分号插入

数据类型

Number   
   
   
   
   
   
、String
 

 

 

 

 

 
、Boolen

 

 

 

 

 

 、Symbol            、Null
 
 

 
 

 
 

 
 

 
 

 
 
、Undefined











、Object

异步                  、事件循环

Event Loop：主线程会不断从任务队列中按顺序取任务执行            ，每执行完一个任务都会检查微任务队列是否为空  
 
  
 
  
 
  
 
  
 
  
 
，如果不为空会一次性执行完所有微任务











，再进入下一个循环去任务队列中取下一个任务执行 


 


 


 


 


 


。

Async/await：执行到await时若返回的是promise对象会阻塞当前async代码块下面的代码
  
  
  
  
  
  ，先执行await中的同步代码  
  
  
  
  
  
，然后执行当前async外的同步代码
 


 


 


 


 


 

，等同步代码都执行完后再回到async中
 
 
 
 
 
 ，等promise状态达到fulfilled再执行之后的代码
 
 
 
 
 
 。若await返回的不是promise对象   
   
   
   
   
   
，同步代码执行完会回到当前async中执行  
   
   
   
   
   
 。

原型

JS的每个对象拥有一个原型
 

 

 

 

 

 
，当访问一个对象的属性时

 

 

 

 

 

 ，不仅会在对象上搜索还会搜索其原型 
 
 
 
 
 
 
 
 
 
 
 
、原型的原型            ，层层向上搜索 

 

 

 

 

 

。 对象的原型有个属性constructor
 
 

 
 

 
 

 
 

 
 

 
 
，指向对象本身 原型分为显式原型和隐式原型











，每个对象都有一个隐式原型                  ，指向其构造函数的显式原型 
 
 
 
 
 
 
 
 
 
 
 
，多个_proto_组成的集合称为原型链 所有的prototype都是对象

















，所以他们的_proto_指向Object()的prototype 所有的构造函数的隐式原型都是Funciton的prototype（包括Object._proto_） Object.prototype的隐式原型是null

继承

子类具有父类的各种属性和方法            ，不需要再次编写

实现方式：

原型继承：父类实例作为子类的原型  
 
  
 
  
 
  
 
  
 
  
 
，let child = Object.create(father)

 不能传参；

Object.create是浅拷贝











，多个实例的引用类型指向同一地址
  
  
  
  
  
  ，会被篡改

组合继承：子类中用Father.call(this)  
  
  
  
  
  
，并且child.prototype = new Father()

















、child.prototype.constructor = Son
 


 


 


 


 


 

，手动挂上构造器
 
 
 
 
 
 ，指向自己

可传参   
   
   
   
   
   
，不共享父类引用属；

调用了两次父类构造函数

寄生组合继承：将组合继承的child.prototype = new Father()改成child.prototype = Object.create(Father.prototype) ES6的extend就是寄生组合继承的方式
 

 

 

 

 

 
，可以不写constructor

 

 

 

 

 

 ，如果写的话第一句要写super            ，super(200)  Father.call(this,200)

xss和csrf是什么
 
 

 
 

 
 

 
 

 
 

 
 
，如何防御

csrf：跨站请求伪造

  登录了信任网站的情况下











，浏览器自动保存了cookie                  ，进入攻击网站 
 
 
 
 
 
 
 
 
 
 
 
，并在攻击网站的诱导下触发对信任网站的请求

 

 

 

 

 

 。由于cookie还在有效期内

















，请求会被处理

措施：

使用cookie的sameSite属性的strict            ，仅允许当前网址与请求的url完全一致时携带cookie（Lax允许部分  
 
  
 
  
 
  
 
  
 
  
 
，get允许











，post不允许；None都允许） 涉及到数据修改的操作严格使用post而非get HTTP协议中用Refer属性
  
  
  
  
  
  ，验证refer是否为自己的域名  
  
  
  
  
  
，来确定请求来源 请求地址添加token
 


 


 


 


 


 

，或自定义属性验证 显示验证方式
 
 
 
 
 
 ，如密码输入   
   
   
   
   
   
，验证码输入等 xss：跨站脚本攻击

  通过页面设计时候的缺陷
 

 

 

 

 

 
，利用浏览器对某处代码的解析

 

 

 

 

 

 ，让浏览器执行恶意代码            。如            ，HTML中内嵌的文本            、内联JS  
 
  
 
  
 
  
 
  
 
  
 
、标签的href











、src属性
  
  
  
  
  
  、onload/onerror/onclick等事件中注入突破原本限制的代码

  持久型xss：将脚本植入服务器数据库里
 
 

 
 

 
 

 
 

 
 

 
 
，导致每个访问的用户都会执行

  非持久型：恶意代码存在url里

措施：

 （大部分浏览器都自带xss筛选器











，vue等框架也对xss有一些防护）

对用户输入内容和服务端返回内容进行过滤和转译 使用cookie的httponly属性                  ，防止用过document.cookie获取cookie 重要内容加密传输 对于URL携带的参数谨慎使用 使用CSP 
 
 
 
 
 
 
 
 
 
 
 
，Content-security-policy请求头

















，在meta中配置：限制加载其他域的文件  
  
  
  
  
  
、禁止向第三方域提交数据
 


 


 


 


 


 

、禁止执行未授权脚本等

讲讲vue框架

Vue是一个用于创建用户界面的js框架            ，它的核心特性是：

MVVM数据驱动

Model模型层：负责处理业务逻辑和服务器进行交互

View视图层：负责将数据模型转化为UI展示出来

ViewModel视图模型层：用来连接M和V  
 
  
 
  
 
  
 
  
 
  
 
，与View之间双向绑定











，帮助我们完全避免了对DOM的操作（只操作数据
  
  
  
  
  
  ，界面的变动是根据数据双向绑定出来的）

MVC模式：模型 / 视图 / 控制

组件化

 Vue允许通过组件来拼装一个页面  
  
  
  
  
  
，每个组件都是一个可复用的Vue实例
 


 


 


 


 


 

，组件里可以包含自己的数据
 
 
 
 
 
 ，视图和代码逻辑   
   
   
   
   
   
，方便复用

指令系统

 带有v-前缀的特殊属性
 

 

 

 

 

 
，当表达式的值改变时

 

 

 

 

 

 ，响应式地作用于DOM

 自定义指令：Vue.directive()            ，第一个参数是指令名
 
 

 
 

 
 

 
 

 
 

 
 
，不带v-；组件options选项中设置directive属性











，directive:{ focus:{} } 
 

 
 

 
 

 
 

 
 

 
 

。然后再模板中使用v-focus

讲讲css

盒模型

content
 
 
 
 
 
 、border（粗细                  ，样式 
 
 
 
 
 
 
 
 
 
 
 
，颜色）   
   
   
   
   
   
、padding（受盒子background影响）
 

 

 

 

 

 
、margin

标准盒模型：width/height + padding + border + margin

怪异盒模型：width/height + margin

















，width/height包含了padding和border

选择器

 ID（#box）

 

 

 

 

 

 、class（.one）            、标签 （p）
 
 

 
 

 
 

 
 

 
 

 
 
、通用











、属性（[attribute] 所有带有attribute属性的元素）                  、伪类（:hover） 
 
 
 
 
 
 
 
 
 
 
 
、伪元素（::first-line）

















、子选择器（.one>one_1）            ，相邻选择器（.one+.two 紧接在.one后的所有.two）

 !import > 内联 > ID > 类            、伪类 > 标签  
 
  
 
  
 
  
 
  
 
  
 
、伪元素 > 子选择器











、相邻选择器

数组和字符串有哪些方法

数组

遍历：reduce
  
  
  
  
  
  、map  
  
  
  
  
  
、filter
 


 


 


 


 


 

、every
 
 
 
 
 
 、some   
   
   
   
   
   
、forEach

改变：push
 

 

 

 

 

 
、pop

 

 

 

 

 

 、shift            、unshift
 
 

 
 

 
 

 
 

 
 

 
 
、splice











、sort                  、reserve

不变：join 
 
 
 
 
 
 
 
 
 
 
 
、slice

















、concat

字符串

concat

返回子串：slice            、substr  
 
  
 
  
 
  
 
  
 
  
 
、substring

删除空格：trim











、trimLeft
  
  
  
  
  
  、trimRight

repeat复制  
  
  
  
  
  
、toLowerCase转小写
 


 


 


 


 


 

、toUpperCase转大写

chatAt
 
 
 
 
 
 、indexOf   
   
   
   
   
   
、includes

split转数组

Let和var

var 

有变量提升  
 
  
 
  
 
  
 
  
 
  
 
，未赋值时是undefined    

可重复声明

作用域是方法作用域











，在非函数作用域中定义就是全局变量

let

声明的变量只在局部起作用

声明前使用会报错

不可重复声明

const

有let的所有特性      

声明时必须初始化
  
  
  
  
  
  ，之后不可更改（实际是地址不可更改）

对http有哪些了解？

get
 

 

 

 

 

 
、post

get方法请求一个指定资源  
  
  
  
  
  
，应只被用于获取数据；post方法用于将实体提交到指定资源
 


 


 


 


 


 

，通常会导致服务器上的状态变化

get回退无害
 
 
 
 
 
 ，post会再次提交请求

get请求参数会被完整保留在浏览器历史记录里   
   
   
   
   
   
，post不会

get在url中传送的参数是有长度限制的
 

 

 

 

 

 
，post没有

get不安全

 

 

 

 

 

 ，因为参数直接暴露在url上            ，所以不能用来传递敏感信息

get参数通过url传递
 
 

 
 

 
 

 
 

 
 

 
 
，post放在request body中

响应码

1消息











，2成功                  ，3重定向 
 
 
 
 
 
 
 
 
 
 
 
，4请求错误

















，5服务器错误

200返回数据；201服务器创建了新资源

301永久移动；302临时移动；

401未授权；403拒绝请求；404找不到请求；405方法错误

502网关错误            ，上游出问题；503服务不可用；504超时

常见header

Accept 能够接受的回应内容类型

Authorization 认证信息

Cache-control 指定缓存机制

Connection 浏览器想要优先使用的连接类型

Cookie 服务器发送的一个超文本传输协议cookie

Content-Type 请求体的多媒体类型

 Content-Type: application/x-www-form-urlencoded

Date 发送该消息的日期

Expect 客户端要求服务器做出的特定行为

Host 服务器的域名和端口号

User-Agent 浏览器的身份标识

Js分片具体怎么做

读取文件的内容  
 
  
 
  
 
  
 
  
 
  
 
，用MD5实现文件的唯一性











，然后对文件进行分割（用Blob的slice方法
  
  
  
  
  
  ，包含md5值  
  
  
  
  
  
，文件大小
 


 


 


 


 


 

，共多少块
 
 
 
 
 
 ，第多少块）   
   
   
   
   
   
，上传

后端可以根据前端传的md5值
 

 

 

 

 

 
，到服务器查找之前文件的合并信息

 

 

 

 

 

 ，返回数据告诉前端从第几节上传            ，实现断点续传

懒加载的原理

访问页面时
 
 

 
 

 
 

 
 

 
 

 
 
，先把图片的路径替换成一张占位图的路径











，当图片进入可视区域才把图片路径替换成真实路径

监听页面滚动                  ，当元素到浏览器窗口的距离（offsetTop）小于document到浏览器窗口的距离(scrollTop)+可视区域的高度（document.body. clientHeight） 
 
 
 
 
 
 
 
 
 
 
 
，img.src改成真实路径

哪些方法能脱离文档流

float 使用时其他盒子会无视该元素

















，但盒子内的文本依然会为这个元素让出位置            ，环绕 absolute 绝对定位  
 
  
 
  
 
  
 
  
 
  
 
，相对该元素的父类（不满足就继续向上查询）元素进行定位 fixed 完全脱离文档流











，相对于浏览器窗口进行定位

垂直居中有哪些方法

position: absolute

1) top/left/right/bottom都设置为0
  
  
  
  
  
  ，margin: auto

2) top: 50%  
  
  
  
  
  
，margin：负自身的50%
 


 


 


 


 


 

，如margin：-50px

3) top：50%
 
 
 
 
 
 ，transform：translate(-50%,-50%)

父类元素display: flex   
   
   
   
   
   
，align-items：center（justify-content：center 水平居中）

Js中堆和栈的储存方式

基本类型存储在栈中
 

 

 

 

 

 
，引用类型额对象存储在堆中

 

 

 

 

 

 ，引用地址放在栈中

箭头函数和普通函数区别

箭头函数的this指向它定义时所在对象            ，而非调用它的对象 不会进行变量提升 不可以作为构造函数
 
 

 
 

 
 

 
 

 
 

 
 
，不能使用new 没有arguments对象











，如果要用可以用rest 不可以使用yield命令                  ，所以不能用作Generator函数

v-model原理

实际是v-bind和input事件

:value=            ”value  
 
  
 
  
 
  
 
  
 
  
 
” @input=











”value = $event.target.value
  
  
  
  
  
  ”

vue响应式原理

vue2是采用发布-订阅者的模式 
 
 
 
 
 
 
 
 
 
 
 
，通过Object.defineProperty()来劫持各个属性的setter

 

 

 

 

 

 、getter











。Vue实例创建时

















，会遍历所有DOM对象            ，为每个数据属性添加get和set  
 
  
 
  
 
  
 
  
 
  
 
，但添加或删除属性并不会触发；数组是通过重写数组的Array.prototype对应的方法（push/pop/shift/unshift/sort/reverse/splice）











，触发方法时视图更新 Vue3是通过ES6的Proxy
  
  
  
  
  
  ，在目标对象外设置一层拦截  
  
  
  
  
  
，外界的操作都会通过这层拦截
 


 


 


 


 


 

，可以拦截到对象属性的读取            、设置
 
 

 
 

 
 

 
 

 
 

 
 
、新增删除等
 
 
 
 
 
 ，还可以直接监听数组的变化

vue组件通信

props

父传子   
   
   
   
   
   
，子组件设置props属性
 

 

 

 

 

 
，接受父组件传来的参数

$emit

 子传父

 

 

 

 

 

 ，通过$emit触发自定义事件            ，第二个参数为传递的数值
 
 

 
 

 
 

 
 

 
 

 
 
，父组件绑定监听器获取组组件传来的参数

ref

 父组件在使用子组件的时候设置ref属性ref=  
  
  
  
  
  
” xxx
 


 


 


 


 


 

”











，this.$refs.xxx获取子组件实例

EventBus

 兄弟组件传值                  ，创建一个中央时间总线EventBus 
 
 
 
 
 
 
 
 
 
 
 
，兄弟组件通过$emit触发自定义事件

















，另一个兄弟组件通过$on监听自定义事件

$parent或$root

 兄弟组件传值            ，通过共同祖辈或root  
 
  
 
  
 
  
 
  
 
  
 
，一个this.$parent.emit(‘add’)











，另一个this.$parent.on(‘add’, this.add)

Attrs和listeners Provide和Inject Vuex

是状态管理工具
  
  
  
  
  
  ，集中式存储管理应用的所有组件的状态

State：用来存放共享变量

Getters：相当于计算属性  
  
  
  
  
  
，返回的值会根据它的依赖被缓存起来
 


 


 


 


 


 

，只有依赖值发生变化才会被重新计算

Mutations：用来存放修改state中数据的方法
 
 
 
 
 
 ，store.commit方法更改数据

Action：通常用来做异步操作   
   
   
   
   
   
，需要在mutation的基础上进行

Module：分割的模块
 

 

 

 

 

 
，每个模块拥有自己的state











、getters                  、mutation 
 
 
 
 
 
 
 
 
 
 
 
、actions

diff算法

通过同层的树节点进行比较的算法

 

 

 

 

 

 ，只比较同层            ，循环从两边向中间比较

Vue中用于虚拟DOM渲染成真实DOM的新旧节点比较
 
 

 
 

 
 

 
 

 
 

 
 
，

先同级比较











，相同则直接复用                  。

然后比较子节点                  ，如果旧的有子节点 
 
 
 
 
 
 
 
 
 
 
 
，新的没有

















，会把旧的删除；如果旧的没有新的有            ，会把新增的子节点插入旧的 
 
 
 
 
 
 
 
 
 
 
 
。

都有子节点时  
 
  
 
  
 
  
 
  
 
  
 
，先比较第一个是否一样











，一样的话移动新旧的start指针
  
  
  
  
  
  ，不一样则会从最后一个开始比较；如果头尾都不相等则比较新头和旧尾  
  
  
  
  
  
，一样就把旧尾移到前面去
 


 


 


 


 


 

，然后end指针往前一位
 
 
 
 
 
 ，start指针往后一位

















。如果存在key则会直接用key去旧的子节点中找   
   
   
   
   
   
，找到就移动到最前面
 

 

 

 

 

 
，start往后一位

 

 

 

 

 

 ，没有就直接插入            。

最后把旧的多余节点删掉 
 
  
 
  
 
  
 
  
 
  
 
 。

webpack打包配置

webpack是用于JS应用程序静态模块的打包工具

初始化：从配置文件和shell中读取并合并参数            ，初始化需要使用的插件和配置插件 编译构建：从Entry出发
 
 

 
 

 
 

 
 

 
 

 
 
，对每个Module串行调用对应的Loader进行翻译











，再找到该Module依赖的module                  ，递归进行编译 输出：对编译后的Module组合成chunk 
 
 
 
 
 
 
 
 
 
 
 
，转换成文件输出

常用配置：

 entry：入口文件

















，从哪个开始打包

 output：输出            ，打包好的文件输出到哪里

 module：配置loader  
 
  
 
  
 
  
 
  
 
  
 
，webpack本身只能打包js/json











，打包css

















、img            、html等需要各种loader
  
  
  
  
  
  ，通过npm下载即可

plugins：插件

mode：打包模式  
  
  
  
  
  
，development和production

浏览器输入url到网页呈现的过程

url解析：协议  
 
  
 
  
 
  
 
  
 
  
 
、域名（确定服务器）











、端口（确定服务器中的具体应用）
  
  
  
  
  
  、路径（访问的资源位置）  
  
  
  
  
  
、查询字符串（详细描述） DNS查询：获取到域名对应的服务器的IP地址 TCP连接：发送syn
 


 


 


 


 


 

，收到发送SYM/ACK的数据包
 
 
 
 
 
 ，收到发送标有ACK的数据包 发送http请求：建立tcp连接后发送请求 响应请求：浏览器收到服务器响应的资源   
   
   
   
   
   
，进行解析
 

 

 

 

 

 
，开始页面渲染 页面渲染：  解析HTML

 

 

 

 

 

 ，构建DOM树  解析CSS            ，构建CSS规则树  合并DOM树和CSS规则
 
 

 
 

 
 

 
 

 
 

 
 
，生成Render树  布局render树











，针对浏览器的各种状态                  ，计算各元素的尺寸
 


 


 


 


 


 

、位置  绘制render树 
 
 
 
 
 
 
 
 
 
 
 
，绘制页面像素信息  浏览器将各层信息发送给GPU

















，GPU会将各层合成            ，显示

前端的优化方法

加载

 减少http请求数  
 
  
 
  
 
  
 
  
 
  
 
，合并css和js











，使用css精灵图

 缓存资源

 压缩代码
  
  
  
  
  
  ，多余的缩进和换行

 样式放在头部使用link引入  
  
  
  
  
  
，脚本放在尾部使用异步加载

 懒加载
 
 
 
 
 
 、滚屏加载等按需加载方法

 进入页面时先使用loading
 


 


 


 


 


 

，加载完成后再显示页面

 压缩图像
 
 
 
 
 
 ，使用css代替图像

 静态资源不适用cookie

执行

 避免img   
   
   
   
   
   
、iframe的src为空   
   
   
   
   
   
，空的话会重新加载

 避免重置图像大小
 

 

 

 

 

 
，会引发重绘

渲染

 减少DOM节点

 动画尽量使用css3动画

 

 

 

 

 

 ，5个元素以上的话使用canvas

 使用requestAnimationFrame代替setTimeout

 对滚动
 

 

 

 

 

 
、鼠标移动这类高频时间使用防抖节流

样式

 尽量不在html中写style

 避免css表达式

 不滥用float            ，float渲染时计算量比较大

 不声明太多的font-size
 
 

 
 

 
 

 
 

 
 

 
 
，会影响css树的效率

 值为0时不写单位

脚本

 尽量改变class而不是style

 尽量使用id选择器