阅读 179

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

性能优化是个最最最最最经典的面试问题了。现在无论打开拉勾网,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。我还是个宝宝 ~~ 欢迎指出我文章内错误。未许可禁止转载


评论