河北省城乡住房建设厅网站,开平网站设计,精美旅游网站案例,高端建站选哪家页面优化#xff0c;其实就是要让页面更快地显示和响应。由于一个页面在它不同的阶段#xff0c;所侧重的关注点是不一样的#xff0c;所以如果要讨论页面优化#xff0c;就要分析一个页面生存周期的不同阶段。
通常一个页面有三个阶段#xff1a;加载阶段、交互阶段和关…页面优化其实就是要让页面更快地显示和响应。由于一个页面在它不同的阶段所侧重的关注点是不一样的所以如果要讨论页面优化就要分析一个页面生存周期的不同阶段。
通常一个页面有三个阶段加载阶段、交互阶段和关闭阶段。
加载阶段是指从发出请求到渲染出完整页面的过程影响到这个阶段的主要因素有网络和 JavaScript 脚本。交互阶段主要是从页面加载完成到用户交互的整合过程影响到这个阶段的主要因素是 JavaScript 脚本。关闭阶段主要是用户发出关闭指令后页面所做的一些清理操作。
如何来进行页面优化一个大的原则就是让单个帧的生成速度变快。
1. 减少 JavaScript 脚本执行时间
有时 JavaScript 函数的一次执行时间可能有几百毫秒这就严重霸占了主线程执行其他渲染任务的时间。针对这种情况我们可以采用以下两种策略
一种是将一次执行的函数分解为多个任务使得每次的执行时间不要过久。另一种是采用 Web Workers。你可以把 Web Workers 当作主线程之外的一个线程在 Web Workers 中是可以执行 JavaScript 脚本的不过 Web Workers 中没有 DOM、CSSOM 环境这意味着在 Web Workers 中是无法通过 JavaScript 来访问 DOM 的所以可以把一些和 DOM 操作无关且耗时的任务放到 Web Workers 中去执行。
总之在交互阶段对 JavaScript 脚本总的原则就是不要一次霸占太久主线程。
2. 避免强制同步布局
所谓强制同步布局是指 JavaScript 强制将计算样式和布局操作提前到当前的任务中。
3. 避免布局抖动
还有一种比强制同步布局更坏的情况那就是布局抖动。所谓布局抖动是指在一次 JavaScript 执行过程中多次执行强制布局和抖动操作。
4. 合理利用 CSS 合成动画
合成动画是直接在合成线程上执行的这和在主线程上执行的布局、绘制等操作不同如果主线程被 JavaScript 或者一些布局任务占用CSS 动画依然能继续执行。所以要尽量利用好 CSS 合成动画如果能让 CSS 处理动画就尽量交给 CSS 来操作。另外如果能提前知道对某个元素执行动画操作那就最好将其标记为 will-change这是告诉渲染引擎需要将该元素单独生成一个图层。
5. 避免频繁的垃圾回收
JavaScript 使用了自动垃圾回收机制如果在一些函数中频繁创建临时对象那么垃圾回收器也会频繁地去执行垃圾回收策略。这样当垃圾回收操作发生时就会占用主线程从而影响到其他任务的执行严重的话还会让用户产生掉帧、不流畅的感觉。
所以要尽量避免产生那些临时垃圾数据。那该怎么做呢可以尽可能优化储存结构尽可能避免小颗粒对象的产生。 此文章为2月Day14学习笔记内容来源于极客时间《浏览器工作原理与实践》推荐该课程。
