尽管jQuery等js框架相比原生javascript使用起来极为方便但是为什么在一些大型互联网公司还是一致强调前端开发人员的js基础,因为尽管javascript使用起来可能非常不便不仅体现在语法而且还要处理复杂的浏览器兼容,但是无论我们如何优化jQuery等框架编写的代码,它永远不可能比javascript引擎提供的原生方法性能更好,原因十分简单:Javascript的原生部分在你编写前端代码之前已经存在于浏览器中,都是用低级语言编写的,这意味着这些方法均被编译成机器码,作为浏览器的一部分,而不像其他的Javascript代码一样有所限制。同理jQuery引擎虽被称之为最快的css查询引擎,但是仍比原生的方法要慢。

  例如原生的querySelector()和querySelectorAll()完成他们的任务时,平均只需要基于jQuery的css查询10%左右的时间(不同版本的浏览器和jQuery版本可能有差异)。

document.querySelector("#firstItem");

客户端优化之使用javascript原生方法替代复杂的数学运算和jquery方法的更多相关文章

  1. JavaScript | 新手村(一)变量,运算和变量方法

    资料来自:JavaScript 第一步 1. 向 html 页面添加 JavaScript 1.1 内部 JavaScript 在 html 文件中的 </body> 标签前插入代码: & ...

  2. JavaScript原生对象属性和方法详解——Array对象

    http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...

  3. javascript原生bind方法详解

    bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...

  4. javascript原生bind方法ie低版本兼容详解

    上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...

  5. javascript 原生得到document.Element的方法

    今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...

  6. JavaScript 原生提供两个 Base64 相关的方法

    JavaScript 原生提供两个 Base64 相关的方法. btoa():任意值转为 Base64 编码 atob():Base64 编码转为原来的值 var string = 'Hello Wo ...

  7. javascript原生方法集锦

    1.sort方法sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码顺序排 ...

  8. 解决原生javascript 缺少insertAfter的功能,非Jquery方法

    在现有的方法后插入一个新元素,你可能会想:既然有insertBefore方法,是不是也有一个相应的insertAfter()方法.很可惜,DOM没有提供方法.下面编写insertAfter函数,虽然D ...

  9. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

随机推荐

  1. python模块安装报错大全

    报错 环境 解决 手动安装pip install mysqlclient 报错: _mysql.c(29) : fatal error C1083: Cannot open include file: ...

  2. hdu-4819-线段树套线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=4819 给出一个N*N的矩阵,每次询问一个m*m的子矩阵里的floor((maxv+minv)/2)并把中间的元素 ...

  3. button中文字垂直居中

    给文字设置line-height,等于button高度.

  4. 解决nginx重启“var/run/nginx/nginx.pid" no such file or directory问题

    重启虚拟机后,再次重启nginx会报错“/var/run/nginx/nginx.pid” no such file or directory. 方法一(已试过可行): 到/var/run下看没有ng ...

  5. MSSQL索引视图(indexed view)之简述及使用

    乍一听到这个名字,可能感到有点陌生,这个对象是干嘛的呢?原理是什么?不用着急,我们看看下面的内容,慢慢就明白了.顾名思义,索引视图就是建有索引的视图,这是MSSQL提供的一项技术,用于提升某些SQL语 ...

  6. 在Vue中关闭Eslint 的方法

    在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...

  7. git报错fatal: I don't handle protocol '​https'处理

    一.背景说明 今天使用在Cygwin中git clone时报fatal: I don't handle protocol '​https',如下: 以为是Cygwin实现的git有点问题没太在意,换去 ...

  8. 顺序容器----顺序容器操作,vector对象如何增长,额外的string操作,容器适配器

    一.顺序容器操作 1.向顺序容器添加元素 向顺序容器(array除外)添加元素的操作: 操作 说明 c.push_back(t) 在c的尾部创建一个值为t的元素.返回void c.emplace_ba ...

  9. mac+php+nginx+laravel配置启动

    首先保证mac安装php,nginx,composer 根据laravel中文文档进行安装 http://laravelacademy.org/post/6665.html 直接指向 composer ...

  10. 逆袭之旅DAY.XIA.Object中常用方法

    2018-07-31