谈一谈前端经典问题—性能优化

性能优化是个最最最最最经典的面试问题了。现在无论打开拉勾网，Boos直聘等求职软件。凡是前端的岗位，无论薪资多少都要求应聘者懂得“性能优化”

性能优化仿佛离我们很遥远。有些时候，我们写代码只停留在“实现功能”就可以了。但是如果你的页面加载太慢，用户体验就会很差。本文着重讲讲几个性能优化的关键点和入手点

稍安勿躁，我们先了解一下浏览器是如何进行渲染的

用户在地址栏输入www.baidu.com -> 浏览器加载HTML -> 加载HTML静态资源 -> 碰到JavaScript标签/js代码阻塞渲染

所以，我们写代码最最最最重视的一点：Script标签一定要放在最下面！！！CSS代码一定要放在网页头部

假如js代码阻塞，就会影响dom渲染

几个关键点：

1. 多使用内存 缓存等其他持久性数据的方法 

  应该算是原则性问题了。其他的措施：减少CPU计算，网络请求

2. CDN静态资源加速

  啥你还不知道啥叫 CDN  CDN就是内容分发网络。通俗的讲就是个分布式的服务器。加载资源根据离你最近的服务器进行加载。减少网络延时

例如jQuery的国内CDN：

把静态资源（js，css，img）托管在CDN服务器上

3. 静态资源合并压缩

 最经典的就是jQuery的压缩例子(jQuery.js有上百KB，.min.js只有30多KB)。尽量将多个js合并为一个进行一次性请求。

4.使用SSR(服务端渲染)

后端渲染好像已经被抛弃了一样….被看作是过时的技术。许多培训机构也推崇用ajax进行异步获取数据。但是异步获取数据有个最最最最大的问题：

不便于搜索引擎抓取和页面SEO优化！

搜索引擎对你的网站进行抓取，他不会去加载js去抓取。而是去抓取你网站的骨架。

后端渲染也会提高页面加载速度。例如京东首页就使用部分后端直出+模板引擎渲染的方式

5. 懒加载(lazy loading)

我认为懒加载应该归为交互类(emm….)。先加载图片标签，然后延时加载/根据视口视角加载相应的图片。可以让图片与dom数异步加载。减缓浏览器压力

下面是懒加载的原理。先指定一个通用背景图片，然后让js延时加载图片的真实路径

6. DOM操作做缓存

 dom操作是非常珍贵的，对资源开销也比较大。最好的办法就是查询一次保存在变量当中。而不要为了节省内存开销不去设置变量

7. JS节流 and 防抖

这个词有些人没听说过…..

节流的意思很明确，就是减少流量嘛。但并不是减少“网络流量”，而是减少“请求流量”

许多高频率命中的事件（keyup，scroll监听）等监听事件，会在一段时间内高频率触发（飞速打字，页面滚动）。这样就会造成短时间内js处理大量的监听事件。导致“上一个没有执行完毕，下一个又被触发”（有些时候我们也没要求他必须要触发完一个再执行下一个。例如字数统计的功能）

我们找到了问题的“所在”，就可以对每次事件触发加定时器（20ms最佳）。每次新执行的时候清掉上一个定时器，然后重新计算时间。

当然，节流和防抖不止加延迟加载这一种方法。这里不细说

8. 尽早执行操作

使用DomContentLoaded监听方法进行加载。这个方法不同于window.load方法。window.load方法是等所有资源加载完毕（包括图片视频css等）

DomContentLoaded不同。当dom渲染完毕他就去触发，不会在意图片视频是否加载OK

好了，第一次写Blog。我还是个宝宝 ~~ 欢迎指出我文章内错误。未许可禁止转载

相关资源：maestro:面向懒惰软件开发人员的智能部署系统-其它代码类资源…

来源：weixin_34126557