前端性能优化以及解决方案

var result = complexFunc();

// 将结不雅传回

self.postMessage(result);

};`

// 获得 url

var blob = new Blob([workerContent]);

var url = window.URL.createObjectURL(blob);

// 创建 worker

var worker = new Worker(url);

5.3 应用 transform 和 opacity 来完成动画

如今只有对这两个属性的修改不须要经历 layout 和 paint 过程。

6 优化 CSS

CSS 选择器在匹配的时刻是由右至左进行的，是以最后一个选择器常被称为关键选择器，因为最后一个选择越特别，须要进行匹配的次数越少。要切切避免应用 *（通悠揭捉?择器）作为关键选择器。因为它能匹配到所有元素，进而倒数第二个选择器还会和所有元素进行一次匹配。这导致效力很低下。

/* 不要如许做 */ 
div p * {}

别的 first-child 这类伪类选择器也不敷特别，也要避免将它们作为关键选择器。关键选择器越特别，浏览器就能用较少的匹配次数找到待匹配元素，选择器机能也就越好。

还有一个老生常谈的留意事项，不要应用太多的选择器。如不雅还有同窗很悲剧地要兼容低版本 IE，要避免应用 CSS 表达式，它的机能很差，具体内容可拜见我之前记录的一篇标记《高机能网站扶植指南》标记（https://github.com/wy-ei/notebook/issues/15 ）

7 合理处理脚本和样式表

如今有了 requirejs，webpack 等对象，可能很少会在页面中加载很多 JavaScript/CSS 代码了。尽管如斯，照样有须要谈谈若何合理处理脚本和样式表。

平日情况下 CSS 被认为是浊宣衬着的资本，在CSSOM 构建完成之前，页面不会被衬着，放在顶部绕揭捉?式表可以或许尽早开端加载。但如不雅把惹人样式表的 link 放在文档底部，页面固然能急速出现出来，然则页面加载出来的时刻会是没有样式的，是纷乱的。当后来样式表加载进来后，页面会急速进行重绘，这也就是平日所说的闪烁了。

7.2 JavaScript 壅塞文档解析

当在 HTML 文档中碰到 script 标签后控制权将交给 JavaScript，在 JavaScript 下载并履行完成之前，都不会解析 HTML。是以如不雅将 JavaScript 放在文档顶部，正好这个时刻 JavaScript 脚本加载的特别慢，用户将会等待很长一段时光，这段个时刻 HTML 文档还没有解析到 body 部分，页面会是空白的。

别的经常被忽视的事实是：在浏览器没有下载并解析完成应用 link 惹人的 CSS 文件之前，JavaScript 是不会履行的，因为 JavaScript 中可能须要攫取样式，而此时样式表还没有加载回来，是以浏览器不会履行 JavaScript。可以给 JavaScript 加上 async 标记，表示 JavaScript 的履行不会攫取 DOM ，JavaScript 可以不被 CSS 壅塞，可以在余暇时光急速履行。

综上所述，你更要包管 CSS 文件加载的足够快。

Paint：将元素的绘制的图层上

所以 debounce 合实用在比如对用户输入内容进行校验的┞封种场景下，多次触发只须要响应最后一次触发就好了。

2.2 应用 throttle 进行撙节

可以应用 CSS 中的 will-change: transform; 或者 transform: translateZ(0); 如许来将元素晋升至零丁的图层中。

关于这部分内容，《高机能网站扶植指南》上有很出色的讲解，墙裂推荐。《高机能网站扶植指南》我在读的时刻记录了标记，可以在这里看到。

《高机能网站扶植指南》

《高机能网站扶植进阶指南》

（豆瓣8.9分，https://book.douban.com/subject/4719162/ ）

《高机能JavaScript》

（豆瓣8.9分，https://book.douban.com/subject/5362856/ ）

我们欲望在每一帧刚开端的时刻对页面进行更改，今朝只有应用 requestAnimationFrame 可以或许包管这一点。应用setTimeout 或者 setInterval 来触发更新页面的函数，该函数可能在一帧的中心或者停止的时光点上调用，进而导致该帧后面须要进行的工作没有完成，激发丢帧。

Google Developers

（https://developers.google.com/web/）

Efficient JavaScript

（https://dev.opera.com/articles/efficient-javascript/?page=3#reflow）

Best Practices for Speeding Up Your Web Site

（https://developer.yahoo.com/performance/rules.html ）

【编辑推荐】

若何应用JavaScript构建机械进修模型
状况决定视图——基于状况的前端开辟思虑
机能优化知若干
基于JavaScript说话的快速物联网开辟架构
现代前端开起身术栈
3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　给Python小白看的10个使用案例，入门Python就在这里了

今天给大年夜家分享十个Python入门级其余小案例。这十个案例的难度不高，然则对于常识的应用异常周全，很合适小白在进修的初期建立进修信念和增长闇练度。每个案例下都有或多或少的思路分>>>详细阅读

本文标题：前端性能优化以及解决方案

地址：http://www.17bianji.com/lsqh/36425.html

1/2 1