1.背景介绍
大概从2000年以来，互联网在中国发展越来越快，随着高层提出“互联网+”的概念以后，互联网的发展更是迎来了一个很大的发展契机。随之而来的，是网名数量的增加，网站日访问量的提升。这些繁荣的背后，需要的是良好的网站性能的提高，以满足较好的用户体验和降低日常维护的成本。如何做到呢？今天同大家分享、讨论一下前端这方面值得注意的地方！
2.知识剖析
2.1什么是网站的性能？
用户访问网站的整个流程中：用户输入网站域名，通过DNS解析，找到目标服务器IP，请求数据经互联网达到目标服务器，目标服务器收到请求数据，进行处理（执行程序、访问数据库、文件服务器等）。处理完成，将响应数据又经互联网返回给用户浏览器，浏览器得到结果进行计算渲染显示给用户。这个整个过程就时刻就体现着网站的性能。更直观地讲，访问一个网页的快慢，与之交互得到的回馈的快慢，就是网站的性能好坏的体现。
一般把整个过程，分为三段路径：
1、第一段在用户和浏览器端，主要负责发出用户请求，以及接受响应数据进行计算渲染显示给用户；
2、第二段在网络上，负责对请求数据、响应数据的传输；
3、第三段在网站服务器端，负责对请求数据进行处理（执行程序、访问数据库、文件等），并将结果返回；
2.2 前端有哪些可以进行优化的地方
从上边的分析中我们可以看出，如果要优化一个网站的性能，它将是一个综合性的处理过程，涉及到前端，后端，网络等各种因素。对于我们前端而言，可以做些什么呢？
一、 我们可以想办法减少一个页面访问所产生的http连接次数。一个完整的请求需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。每一次的请求，都意味着时间上和资源上的一次整体消耗。减少请求，对于提升性能，是个不错的出发点。
减少HTTP请求的途径：
1. 简化页面：保持页面简洁、减少资源的使用是最直接的办法。不过追求华丽的当下，做到这一点似乎有些为难。
2. 合理设置 HTTP缓存：尽可能的让资源能够在缓存中待得更久，越多的缓存，意味着越少的向后端发送的请求数量。
3. 图片的压缩：我们做任务时遇到用到过的CSS Sprites。将网站的图片，尤其一些小图标合并为一张图片，通过背景图片和背景定位的方法渲染到页面。还有iconfont阿里矢量图标库，将图片转化成样式，或者字体等方法，也是个不错的实现方法。
4. 资源合并与压缩：在引入外部js、css文件时，想办法减少js、css文件的数量，将多个js或者css文件可能地进行合并。使用框架的js时，选择min版来引入，不使用完整版。提高css代码的复用性等。使用一些压缩工具对其大小进行压缩。
二、 使用外部CSS样式，并将外部CSS样式的放在HEAD中。不使用内联样式。减少使用内部样式。
三、 可以将外部脚本js文件置底。在body结束标签之前加载，比影响整个静态页面的渲染工作。
使用CDN加载一些框架中的js或者css文件，CDN（content distribute network）的本质仍然是一个缓存
四、 Lazy Load懒加载的方法，用在对图片和js文件的加载处理上。
五、 使用异步请求，在幕后进行数据的传输，不影响页面的加载渲染过程。
六、 在js文件中减少使用“+”进行字符串的拼接。因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。如果字符串不多的情况下可以使用“+”进行拼接。但是内容过多时，相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。
七、 减少作用域链查找，将全局作用域中的变量通过在局部作用域中赋值给局部变量的方法，来减少变量向上查找的次数。
2.3 控制器的作用
控制器的作用主要有两个：第一个，scope作用域对象初始化 ；第二个，给scope作用域对象通过一些方法或者函数增加行为 。
3.常见问题
问题: 网页中影响性能的地方在哪里？
4.解决方案
网页的生成过程，大致可以分成五步：
1. HTML代码转化成DOM
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上
以上这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。 "生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。 提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。
5.编码实战
本次小课堂理论讲解较多，暂无demo！
6.扩展思考
问题: 在网站的性能中，前端网页性能所占的比重？
7.参考文献
参考一：web前端性能优化总结
参考二:网页性能管理详解
参考四：百度百科
8.更多讨论
讨论点：大家对于网站性能的优化还有哪些认识，分享一下？
视频链接：https://v.qq.com/x/page/l0504c6rp0r.html
PPT链接：https://ptteng.github.io/PPT/PPT/js-10-Website%20performance%20optimization.html#/
文本链接：http://www.jnshu.com/daily/23455
