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

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

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

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

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

因此，咱们写代码最最最最重视的一点：Script标签必定要放在最下面！！！CSS代码必定要放在网页头部

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

几个关键点：

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

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

2. CDN静态资源加速

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

例如jQuery的国内CDN：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
复制代码

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

3. 静态资源合并压缩

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

jquery.min.js // 84.8KB 压缩版

jquery.js //265KB 未压缩版复制代码

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

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

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

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

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

5. 懒加载(lazy loading)

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

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

<img class="a" src="demo.png" data-src="a.png" />

<script type="text/javascript">
var imga =document.getElementByClassName('a');
imga.src =imga.getAttribute('data-src')
</script>复制代码

6. DOM操做作缓存

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

7. JS节流 and 防抖

这个词有些人没据说过.....

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

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

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

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

8. 尽早执行操做

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

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

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