页面代码的优化对于页面加载速度也有不小的影响，最广为人知的： HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，JavaScript的引入放在页面尾。 其次还有： 1.按需加载，把统计、分享等 JS 在页面 onload 后再进行加载，可以提高访问速度； 2.优化 Cookie ，减少 Cookie 体积； 3.避免 []() 的 src 为空； 4.尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，...
这篇文章讲述可以帮助 改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML，即超文本标记语言，几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中，甚至可以创建图表。 HTML 很容易被网络爬虫识别，因此搜索引擎可以根据网站的内容在...
前段时间花时间看了大半的《High Performance JavaScript》这本书啊，然后就开始忙项目了，庆幸最忙的一周已经熬过去了。由于空不出时间，这个月写的学习笔记也不多，忙完最苦X的一周，这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了，总归是要学到些什么的。说说对这本书的看法先吧，整体的来说，内容还是不错的，就是感觉有点老了（作为前端小白，也可能是自身水平有限，未能体会到其中真意）...
引言 关于幻灯轮播图，想必大家都不陌生，尤其是基于 jQuery 的，插件、代码网上一搜一大堆，但是真正符合自己需求的几乎没有，所以我要打造一个符合自身需求，经得起广大网民考验的 jQuery 轮播图！ 思路 为什么说网上其他一些轮播图不符合我的要求？我的需求又是什么呢？ 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是，先把图片和链接的 HTML 写好，然后控制隐藏和显示来轮流展示当前的幻灯图片。但是对用户而言，我...
用于执行JavaScript和更新用户界面的进程通常被称为“浏览器UI线程”。JavaScript和用户界面更新在同一个进程中运行，因此一次只能处理一件事情。 任何JavaScript任务都不应当执行超过100毫秒，过长的运行时间导致UI更新出现明显延迟，从而会影响用户体验。 浏览器有两类限制JavaScript任务的运行时间的机制，调用栈大小限制（即记录自脚本开始以来执行的语句的数量）和长时间运行脚本限制（记录脚本执行的总时长，超时的时候会有...
循环处理是最常见的编程模式之一，也是提升性能必须关注的要点之一。 常见的优化方案有： ①JavaScript的四种循环(for、do-while、while、for-in)中，for-in循环比其他几种明显要慢。由于每次迭代操作会同时搜索实例或原型属性，for-in循环的每次迭代都会产生更多的开销，所以比其他类型要慢。因此遍历一个属性数量有限的已知属性列表，可以这样优化： var props = [prop1, prop2],i = 0; whlie(i < props.length){precess(object[...
虽说事件处理程序可以为现代 Web 页面添加很强的交互能力，但是不分青红皂白就添加大量的事件处理程序绝对是一种愚蠢的行为。 我们来分析一下：事件处理程序本质上是一种函数，是一种对象，存放在内存中，设置大量的事件处理程序会使内存中的对象变多，Web 程序的性能会变得越来越差，用户体验很不好。 为了更好地利用好事件处理程序，便出现了事件委托，用来提升性能。 事件委托 事件委托（event delegation）：把若干个子节点上的...
Javascript 高性能之递归，迭代，查表法详解 递归 概念：函数通过直接调用自身，或者两个函数之间的互相调用，来达到一定的目的，比如排序，阶乘等 简单的递归 阶乘function factorial(n) {if (n == 0) {return 1;} else {return n * factorial(n - 1);} } 递归实现排序 /*排序且合并数组*/ function myMerge(left, right) {// 保存最后结果的数组var res = [];// 有一个数组结束了就结束排序，一般情况下，两个数组长度应该保持一...
写在前面： 大家都知道DOM的操作很昂贵。 然后贵在什么地方呢？ 一、访问DOM元素 二、修改DOM引起的重绘重排 一、访问DOM 像书上的比喻：把DOM和JavaScript（这里指ECMScript）各自想象为一个岛屿，它们之间用收费桥梁连接，ECMAScript每次访问DOM，都要途径这座桥，并交纳“过桥费”,访问DOM的次数越多，费用也就越高。因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。我们不可能不用DOM的接口，那么，怎样...
前言 之前一直没有去研究try catch对代码运行的性能影响，只是一直停留在了感觉上，正好最近开会交流学习的时候，有人提出了相关的问题。借着周末，正好研究一番。 前端线上脚本错误的捕获方法：window.JSTracker=window.JSTracker||[]; try{ //your code }catch(e){ JSTracker.push(e); throwe;//建议将错误再次抛出，避免测试无法发现异常 }设计实验方式简单的设计方案也就是对比实验。空白组1：[无 try catch 的情况下对数据取模...
第一点 //高效简洁 //低消能 children //childNodes childElementCount //childNodes.length firstElementChild //firstChild lastEelmentChild //lastChild nextElementSibling //nextSibling previousElementSibling //previousSibling第二点：选择器的高效应用 <div id="footer_bottom"> <a href="/AboutUS.aspx">脚...
Nicholas Zakas是一位 JS 大师，Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者，这本书值得每个程序员去阅读。 当谈到 JS 性能的时候，Zakas差不多就是你要找的，2010年六月他在Google Tech Talk发表了名为《Speed Up Your Javascript》的演讲。 但 Javascript 性能优化绝不是一种书面的技术，Nicholas 的技术演进列出了10条建议，帮助你写出高效的 JS 代码。 1. 定义局部变量 当一个变量被引用的时候，JavaScript将在作...
工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题，在JS中处理这类问题一般有三种方法，这里将它们一一列出顺便也对它们的性能做个具体的比较。 第一种方法 用连接符“+”把要连接的字符串连起来： str="a"; str+="b";毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便。 第二种方法 以数组作为中介用 join 连接字符串： var arr=new Array(); arr.push(a); arr.push(b); var str=ar...
想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。 数据存储 计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object，能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要...
前言无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()，例如清单 1 清单 1 JavaScript 代码内嵌示例 <html> <head><title>Source Exam...