什么是web前端？这是用户计算机上的浏览器所做的一切。我们来看看当用户访问网站时，浏览器做了什么：输入URL–>解析域名–>请求页面–>解析页面并在页面中发送资源请求–>渲染资源–>输出页面–>监控用户操作–>重新渲染。从上面的路径可以看出，浏览器分为请求、传输和渲染三个部分来实现用户访问。本文从这三个部分来分析如何提高WEB前端的性能。浏览器实现自己的缓存机制以减少请求传输。浏览器缓存是在浏览器中存储请求的Web资源的副本。再次请求同一个URL时，先检查缓存。如果有本地缓存??，浏览器缓存机制会根据认证机制（Etag）和过期机制（Last-Modified）来决定是使用缓存还是从服务端传输资源文件。具体过程如下图所示：有的浏览器请求是并发的，有的是阻塞的。比如图片、CSS、界面的请求是并发的；JS文件被阻止。当请求JS时，浏览器会中断渲染过程，等待JS文件加载解析完成，然后重新渲染。所以把JS文件放在页面的末尾。JS也可以通过两种方式从阻塞变为并行：一种是创建脚本标签，并将其插入到DOM中；另一种是在脚本标签中添加异步属性。每个浏览器都有并发域名数的限制。IE6/7是2个，IE9是10个，其??他常见浏览器是6个。因此，减少资源请求次数，使用多个域名配置资源文件，可以大大提高网站性能。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。如果你愿意，可以进群学习交流减少资源请求的方法。大致有以下几种：1.通过打包工具，对资源进行组合，减少资源数量。即开发版由很多资源文件组成。部署时，按类别合并成几个文件输出。在实现模块管理的同时，实现统一输出。2.在CSS中，使用csssprite减少图片请求次数。3、通过懒加载技术，在用户无感知的情况下请求资源。4、通过服务器配置，实现一次请求返回多个资源文件，如淘宝CDN。CDN镜像除了可以减少请求数，还可以减少网络节点，实现快速响应。使用CDN的请求会根据用户所在的地理位置找到最近的CDN节点。如果请求是新的，它会从资源服务器复制到节点，然后返回给客户端。如果请求已经存在，则直接从节点返回给客户端。通过上面我们了解到的缓存机制，如果我们部署上线，我们需要刷新缓存。普通缓存可以通过强刷来更改，而CDN缓存需要通过更改URL来更改。同时，我们不可能要求用户按Ctrl刷新，所以通过打包工具在部署时统一更改URL是最有效的方式。不建议更改不经常更改的库文件，例如echart、jquery。传输由服务端传输到客户端，可以开启gzip压缩，提高传输效率。Gzip有十个等级，从1到10。值越高，压缩越小，但用于压缩的服务器硬件资源越多。根据实践，level为5时最平衡，此时的压缩效果是100k可以压缩成20k。渲染浏览器加载html后，会对其进行解析，同时根据解析结果进行资源请求，生成DOM树。然后渲染引擎使用加载的CSS来根据生成的DOM树生成渲染树。解析完所有资源，计算好布局后，绘制到浏览器界面。JS在用户操作时修改DOM节点或样式，重新绘制和重新排列。重绘是指绘制DOM节点对应的渲染节点，重排是指重新计算这些节点在浏览器界面上的位置。显然，重排是非常耗性能的。我们要做的是减少重排的次数。在生成DOM树时，我们可以通过减少DOM节点来优化性能。最初使用的是table布局，深度和节点数比较复杂，性能较差。同样，CSS作为层叠样式表，层级也不能太深，否则遍历成本会很高。另外CSS的expression属性是比较耗性能的，能用就不用。动画效果可以用CSS写，不能用JS写。渲染引擎不同，性能损失也不同。以上就是解析和渲染的过程，接下来说说用户交互的过程。用户操作会导致重绘重排，重绘一定会引起重绘，重绘不一定会引起重排。到底怎么会引起重排呢？简单的定义、DOM结构的变化以及DOM样式中几何属性的变化都可能导致回流。顾名思义，几何属性就是广为人知的盒子模型的属性，比如宽度、高度、边框、outerpatch、innerpatch。还有margin属性，比如offset。重排是最耗能的，减少重排的方法如下：1.如果DOM需要多次改变，先在内存中改变，最后一次性插入到DOM中。2.同上一个。如果多次更改样式，请合成一个并将其插入到DOM中。3.当position的值为绝对固定时，与文档流分离，操作此类DOM节点不会导致整个页面重新排列。所以动画元素设置位置，以便它脱离文档流。4.当DOM节点的显示等于none时，它不会存在于渲染树中，所以如果有比较复杂的操作，先让display等于none，等所有操作都完成后再设置display为block完全的。只需重新排列两次即可。5.当获取到会引起重排的属性值时，将其保存在一个变量中，再次使用时不会再进行重排。获取这些属性会引起重排：offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight以上是浏览器如何将资源变成肉眼可见的页面，除了对于以上根据浏览器进程总结出来的性能优化，我们还需要看看javascript作为一个程序所需要的优化。我们先来看看javascript的垃圾回收机制。Javascript引擎会在固定的时间间隔将不再使用的局部变量注销掉，并释放它们占用的内存。闭包的存在会让引用一直存在，无法释放。直到浏览器卸载页面，全局变量的生命周期才会结束。所以一般来说，内存溢出都是由于全局变量的不释放和关闭导致的。为了防止内存溢出，我们可以这样做：1.业务代码放在匿名立即执行函数中，执行完会立即释放。2.少用全局变量，同时手动注销使用的变量。3.使用回调而不是闭包来访问内部属性。4.当关闭不可避免时，请谨慎处理细节。不使用时注销。5.通过浏览器自带的工具配置文件检查内存活动。如果它是波浪形的，那是正常的。如果是逐渐上升，说明有部分内存没有释放，需要检查相应的函数。最后说一下，函数中异步返回的值往往是这样的：VargetList=function(){$.ajax().then(function(data){Returndata;})};Varusers=getList();毫无疑问，由于函数中的返回是异步的，返回的只能是undefined，而不是想要的数据。所以为了返回数据，将ajax的async属性设置为false，由异步变为同步获取数据。但是，最大的问题是同步会打断渲染过程，即在请求等待返回的过程中，整个页面卡住，用户操作无响应。这个问题真正的解决办法是返回promise对象，而不是把异步改成同步。
