javascript提高页面性能

谁践踏了优雅 2022-08-03 13:53 159阅读 0赞

在一些移动设备或者在HybridApp中，有时候设备的javascript效率并不高，导致页面卡顿，体验下降。因此需要尽量优化javascript的执行效率。以下是一些搜集的经验。  
另CSS也可以起到提高性能的作用。

## 使用最新版本的库 ##

## 精简脚本 ##

*  压缩自定义脚本  
    uglify等工具，去掉空行。减小js文件体积。
 *  引入min脚本  
    如

<script src = "jquery.min.js"></script>

## 尽量减少使用$.each() ##

可以改用

for (var i=0; i<array.length; i++) {
            array[i] = 0;
        }

## DOM操作 ##

*  尽量使用id，而不是class搜索。
 *  多次使用的DOM元素要缓存起来。

var item = $('#item');
        item.css ('color', '#123456');
        item.html ('hello');
        item.css ('background-color', '#ffffff');

*  尽量少的DOM写入操作

//这样操作了1000次
        for (var i=0; i<1000; i++) {
            var list = '<li>'+i+'</li>';
            $('#list').append(list);
        }
    
        //这样比较快，只操作了一次
        for (var i=0; i<1000; i++) {
            list += '<li>'+i+'</li>';
        }
    
        $('#list').html (list);

## 函数执行 ##

*  return flase

放置函数向上冒泡。。。

//这样比较慢
        $('#item').click (function () { 
            // stuff here
        });
    
        //这样效率高
        $('#item').click (function () { 
            // stuff here
            return false;
        });

## 利用CSS调用硬件加速 ##

比如调用CSS3 的3D 接口。

<style> .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } <style>

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL 提高Insert性能

插入一个记录需要的时间由下列因素组成，其中的数字表示大约比例：连接：(3) 发送查询给服务器：(2) 分析查询：(2) 插入记录：（1x记录大小）

系统管理员/ 2022年12月23日 09:52/ 0 赞/ 191 阅读

相关如何提高CSS性能

结合现代网站的复杂性和浏览器处理[CSS][]的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在

左手的ㄟ右手/ 2022年10月15日 10:59/ 0 赞/ 247 阅读

相关提高html页面的性能,提高HTML页面性能的技巧

微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。经过多年发展，业界对于如何优化Win32程序性能已经有非常多的了解。现在开发者遇到的

女爷i/ 2022年10月06日 04:43/ 0 赞/ 168 阅读

相关 javascript提高页面性能

在一些移动设备或者在HybridApp中，有时候设备的javascript效率并不高，导致页面卡顿，体验下降。因此需要尽量优化javascript的执行效率。以下是一些搜集的经

谁践踏了优雅/ 2022年08月03日 13:53/ 0 赞/ 160 阅读

相关提高SQL Server性能

如何提高SQL Server的性能提供SQL Server性能总的来说有两种方式： 1、扩容，提高服务器性能，显著提高CPU、内存，解决磁盘I/O瓶颈。 2、优化应用程

「爱情、让人受尽委屈。」/ 2022年07月14日 07:55/ 0 赞/ 250 阅读

相关提高性能一二

[雅虎军规][Link 1] [浏览器解析、渲染][Link 2]（很好） [浏览器内部工作原理][Link 3] [Link 1]: http:

小灰灰/ 2022年05月29日 02:58/ 0 赞/ 233 阅读

相关 JavaScript -- 提示页面性能

前端面试经常碰到提示页面性能的问题，换句话说也就是如何让页面打开的更快，更流畅，不卡顿。大致可以总结为几点。 1：资源压缩合并，减少HTTP请求 HTTP请求基于TCP

我就是我/ 2022年04月22日 23:40/ 0 赞/ 157 阅读

相关 Web前端性能优化——如何提高页面加载速度

原文链接：[https://www.cnblogs.com/MarcoHan/p/5295398.html][https_www.cnblogs.com_MarcoHan_p_

向右看齐/ 2021年09月28日 02:54/ 0 赞/ 499 阅读

相关 WEB前端性能优化，提高页面加载速度

可能有人会说：网站的性能是后端工程师的事情，与前端并无多大关系。我只能说，too young too simple。事实上，只有10%~20%的最终用户响应时间是用在从Web服

短命女/ 2021年09月18日 15:52/ 0 赞/ 529 阅读

相关 CSS3 will-change提高页面动画等渲染性能

今天突然看到这个will-change 觉得好新鲜，就百度一看，才知道人家早就出来（我out了），只是现在各个浏览器还不怎么兼容，为了满足我的好奇心，就来了解下呗。如果你已

古城微笑少年丶/ 2021年09月14日 16:18/ 0 赞/ 242 阅读