美文网首页
前端性能测试

前端性能测试

作者: 畅游的蜗牛 | 来源:发表于2020-01-09 14:47 被阅读0次

    前言

    性能优化无非就是让页面的打开速度更快一些,以得到更好的用户体验。前端在这方面可以做到的有两方面,页面级别的优化,比如减少 Http 请求次数、加快资源的加载速度;二是代码级别的优化,页面重新渲染一次会经过浏览器的重排(reflow)和重绘(repaint),这两部操作是非常耗时的,本文将根据这两方面的优化途径,大致总结一下。

    页面级别优化

    1. 减少 HTTP请求数

    首先,每个请求都是有成本的,既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的,资源上由于每个请求都需要携带数据,因此每个请求都需要占用带宽。另外,由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 ),因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。

    减少 http 请求次数的主要方法:

    设置 HTTP缓存

    http 缓存是 web 性能优化中非常重要的一种手段,把一些常用资源在首次加载时缓存到浏览器本地,再次加载时可大大减少请求次数,缓存的资源越多,性能当然越好。

    缓存的规则主要有两种,强制缓存和对比协商缓存,两种缓存分别通过Http报文头部不同的字段进行控制。

    资源合并压缩

    CSS、 Javascript、Image 都可以用相应的工具(Webpack)进行压缩,压缩后往往能省下不少空间。

    CSS Sprites

    合并 CSS图片,减少请求数的又一个好办法。

    懒加载

    这条策略实际上并不一定能减少 HTTP请求数,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。

    2. 把 js 脚本置底加载

    js 脚本是很容易形成阻塞,导致资源加载停滞,为了避免这种情况,先加载其他资源,最后加载脚本。

    3. inline 脚本异步执行

    inline 脚本与外链引用的脚本类似,也有可能会引起阻塞,所以也要将 inline 脚本放到页面底部或者异步方式来加载,

    例如使用script标签的defer 和async属性、使用setTimeOut。

    4. 动态加载 js 模块

    5. css 放在 head 中

    页面渲染过程还要经历重绘重排,这样做是避免会出现 DOM 加载完之后却没有样式的情况。

    代码级别优化

    DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。

    而修改 DOM 会引起网页的重新渲染。

    重新渲染,就需要重新生成布局和重新绘制。前者叫做"重排"(reflow),后者叫做"重绘"(repaint)。

    需要注意的是,"重绘"不一定需要"重排",比如改变某个网页元素的颜色,就只会触发"重绘",不会触发"重排",因为布局没有改变。但是,"重排"必然导致"重绘",比如改变一个网页元素的位置,就会同时触发"重排"和"重绘",因为布局改变了。

    这这两步只是网页生成的最后两部,关于页面的生成过程,主要有五步:

    1. HTML代码转化成DOM2. CSS代码转化成CSSOM(CSS Object Model)3. 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)4. 生成布局(layout),即将所有渲染树的所有节点进行平面合成5. 将布局绘制(paint)在屏幕上

    这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。

    "生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。

    具体技巧参照:http://ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

    相关文章

      网友评论

          本文标题:前端性能测试

          本文链接:https://www.haomeiwen.com/subject/uqisactx.html