从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。

http缓存优化是网页性能优化的重要一环，这一部分我会在后续笔记中做一个详细总结，所以本文暂不多做详细整理。本文主要从网页渲染过程、网页交互以及Vue应用优化三个角度对性能优化做一个小结。

首先谈谈拿到服务端资源后浏览器渲染的流程：

关键渲染路径是浏览器将 HTML、CSS、JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。也就是我们刚刚提到的的的浏览器渲染流程。

为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:

首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，

所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流（Reflow）

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

当你访问以下属性或方法时，浏览器会立刻清空队列:

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。

避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。

也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。

避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

优点：

例如有一个列表需要绑定点击事件，每一个列表项的点击都需要返回不同的结果。

传统写法：

传统方法会利用for循环遍历列表为每一个列表元素绑定点击事件，当列表中元素数量非常庞大时，需要绑定大量的点击事件，这种方式就会产生性能问题。这种情况下利用事件委托就能很好的解决这个问题。

改用事件委托：

输入搜索时，可以用防抖debounce等优化方式，减少http请求；

这里以滚动条事件举例：防抖函数 onscroll 结束时触发一次，延迟执行

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

下面还是一个简单的滚动条事件节流函数：节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样

参考链接： https://zhuanlan.zhihu.com/p/113864878?from_voters_page=true

1.0、语义化H5标签

1.1、H5引进了一些新的标签，特别注意article、header、footer、aside、nav等，注意HTML的标题结构

1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API

1.3、理解HTML标签在各个浏览器上的默认样式（代理样式），理解CSS中的重置样式表的概念

1.4、理解Canvas、SVG、video等功能性标签

1.5、理解form、iframe标签，理解文件提交过程

推荐书籍：

A、《HTML5秘籍》

2、高健壮性CSS

2.1、学习基础知识，包括大部分常用属性、选择器的用法，要对大多数标签有个基础概念,在日常使用的基础上，尝试学习浏览器兼容性问题，要知道兼容性的主要问题及解决方法

2.2、深入理解盒子模型，区分块级元素、行内元素，有几个比较重要的属性：display、float、position，一定要弄清楚区分盒子、行内盒子的概念另外可以考虑学一些预编译语言：sass、less，都很简单

2.3、学习常用框架，可以使用bootstrap构建项目

2.4、学习框架的代码组织方式包括：12格栅系统、组件化、组件的风格化等

2.5、学习CSS 3的新功能，特别是动画效果、选择器

2.6、认真学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS

2.7、有空的话，可以看看所谓的扁平化设计，还有简洁性

2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念

学习方法：

1、多看别人的代码，一些设计的不错的网站就是很好的学习素材，比如拉勾网

2、一定要学会使用grunt、gulp压缩CSS

3、display + position + float 可以组合出很复杂的效果，多想想盒子模型

4、尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局

推荐书籍：

1、《图灵程序设计丛书:HTML5与CSS3设计模式》

2、《Web开发技术丛书:深入理解Bootstrap》

3、《高流量网站CSS开发技术》

4、《CSS设计彻底研究》 这个一定要

5、《Web开发技术丛书:深入理解Bootstrap》

6、可以找一些专门讲SASS的书，但是我没找到

7、《CSS权威指南(第3版)》

3、深入学习JS

3.1、重新学习JS语法，注意：表达式（特别是函数访问表达式）、语句、类型（包括类型判断)注意，这个时候主要倾向于“原生”JS哦，不要使用框架

3.2、深入理解JS的“一级函数”、对象、类的概念,学会使用函数来构造类、闭包，学会用面向对象的方式组织代码

3.3、深入理解JS的作用域、作用域链、this对象（在各种调用形式中，this的指向）理解函数的各种调用方法（call、apply、bind等）

3.4、理解对象、数组的概念

理解对象的“[]”调用，理解对象是一种“特殊数组”

理解for语句的用法

深入理解JS中原始值、包装对象的概念（重要）

3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分点有：backbone、angularjs、ejs、jade

通过比较多个框架的使用方法，想清楚“JS语言极其灵活”这一事实

总结常见用法，提高学习速度

学习模块化开发（使用require.js、sea.js等）

3.6、适当看一些著名框架的源码，比如jQuery（不建议看angularjs，太复杂了）

重要的是学习框架中代码的组织形式，即设计模式

3.7、了解JS解释、运行过程，理解JS的单线程概念

深入理解JS事件、异步、阻塞概念

3.8、理解浏览器组成部件，理解V8的概念

学习V8的解释-运行过程

在V8基础上，学会如何提高JS性能

学会使用chrome的profile进行内存泄露分析

学习方法：

1、提高对自己的要求，要有代码洁癖

2、适当的时候看看优秀框架的源码，特别是框架的架构模式、设计模式

3、多学学设计模式

4、学习原生JS、DOM、BOM、Ajax

推荐书籍：

1、《O’Reilly精品图书系列:JavaScript权威指南(第6版)》 必看

2、《JavaScript设计模式》

3、《WebKit技术内幕》

4、《JavaScript框架高级编程:应用Prototype YUI Ext JS Dojo MooTools》

5、《用AngularJS开发下一代Web应用》

6、跨终端

6.1、理解混合APP的概念

6.2、理解网页在各类终端上的表现

6.3、理解网页与原生app的区同，重在约束

6.4、理解单页网站，特别要规避页面的内存泄露问题

6.5、入门nodejs，对其有个基础概念，知道它能做什么，缺点是什么

推荐书籍：

1、《单页Web应用:JavaScript从前端到后端 》

2、《Web 2.0界面设计模式》

3、《响应式Web设计:HTML5和CSS3实战》

5、工具

学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩

会用PS进行切图、保存icon

入手sublime、webstorm

学会使用chrome调试面板，特别是：console、network、profile、element

进阶：

4、性能

1.1、理解资源加载的过程

包括：TCP握手连接、HTTP请求报文、HTTP回复报文

1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动

1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响

1.4、理解CDN加速

1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响

1.6、深入理解浏览器的render过程

推荐书籍：

1、《Web性能权威指南》

2、雅虎网站页面性能优化的34条黄金守则

5、HTTP及TCP协议族

2.1、学习http协议，理解http请求-响应模式

2.2、理解http是应用层协议，它是构建在TCP/IP协议上的

2.3、理解http报文（请求-响应报文）

2.4、理解http代理、缓存、网关等概念，指定如何控制缓存

2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）

2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念

推荐书籍：

1、《HTTP权威指南》

2、《TCP/IP详解》

3、《图解TCP/IP(第5版)》

更多前端书籍推荐：

《JavaScript半知半解》 《Web开发实战》

推销自己的前端技术书籍-博客-云栖社区-阿里云

今天主要自我推销两本前端技术书籍！

《JavaScript半知半解》

《Web开发实战》

一、《JavaScript半知半解》

为什么写这本书？

因为之前作者在博客上洋洋洒洒地将之前学习JavaScript的笔记整理了出来，一共17篇，感觉查找和翻阅还是不方便，所以产生了编辑成电子书的念头，一来方便作者个人查找，二来方便后续内容的补充，三来也方便喜欢JavaScript的伙伴们阅读。

书籍阅读地址：《JavaScript半知半解》

大纲

二、《Web开发实战》

书籍阅读地址：《Web开发实战》

为什么写这本书？

网上的插件虽多，但大多数并没有深究到原理，故而产生了写一本前端实例的书籍。主要是为了想深入学习的伙伴们，书上的内容也许不是最优秀的，但会一步步讲解，会告诉你每一步的原理，让你学习后也可以自己造轮子！

大纲

《Web开发实战》集合了大量的前端开发案例，目前主要选择日常开发中会用到的加入本书，分为四部分：CSS实战篇、JavaScript实战篇、Canvas实战篇和移动实战篇。