尽管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. web中集成shiro

    Shiro提供了与Web集成的支持,其通过一个ShiroFilter入口来拦截需要安全控制的URL,然后进行相应的控制,ShiroFilter类似于如Strut2/SpringMVC这种web框架的前 ...

  2. python装饰器概念与应用

    格式一:装饰器外层不传参,内层传参 user_status = False # 用户登录了就把这个改成True def login(func): # 把要执行的henan模块从这里传进来 def in ...

  3. 安卓——Activity生命周期

      在xml 设计页面添加标签 xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  4. Python的字典dict和set

    Python内置了字典:dict的支持,dict全称dictionary: 表达式为dict{key,value} 使用键值对来存储数据 eg: 使用dict来存储姓名和分数 d = {'bob':2 ...

  5. 四、持久层框架(Hibernate)

    一.一级缓存与二级缓存 1.一级缓存:Hibernate默认是开启一级缓存的,一级缓存存放在session里,一个Session做一次查询操作,会把这个操作的结果放在一级缓存中,如果短时间内这个ses ...

  6. 解决SSH Secure Shell 连接Liunx 有乱码情况。

    输入:echo $LANG:查看当前使用系统语言 locale :安装是否是LANG="zh_CN.UTF-8":说明已经安装中文语言 步骤1:用root账户登录linux系统,或 ...

  7. python之命令行参数解析模块argparse

    """argparse模块使得写用户友好性命令行接口很容易,程序定义所需要的参数,argparse会从ays.argv中提取出这些参数.argparse模块也能自动的产生 ...

  8. Oracle11g版本中未归档隐藏参数

    In this post, I will give a list of all undocumented parameters in Oracle 11g. Here is a query to se ...

  9. 基于js的CURD插件

    前言: 每个web程序对数据库的创建(Create).更新(Update).读取(Retrieve)和删除(Delete)操作都是必不可少的,于是我决定开发一个基于JavaScript和jQuery框 ...

  10. 使用深度学习检测TOR流量——本质上是在利用报文的时序信息、传输速率建模

    from:https://www.jiqizhixin.com/articles/2018-08-11-11 可以通过分析流量包来检测TOR流量.这项分析可以在TOR 节点上进行,也可以在客户端和入口 ...