减少http请求;减少文件大小;更多利用缓存;
1 静态图片站、动态网站分开
2 静态图片压缩
3 多个小图片放在一个png中,通过像素位置获取指定图片
4 减少页面渲染所需的HTTP请求数,js合并压缩
js压缩,Accept-Encoding HTTP类型:gzip,compress,deflate,identity
js缓存,Expires HTTP响应头,缓存文件大小限制
5 使用内容分发网络CDN
脚本相关
1 避免双重求值:
避免使用eval(),Function(),
setTimeout(),setInterval()建议传入函数而不是字符串作为第一个参数
2 使用Object/Arry直接量
3 管理作用域
全局变量总在运行期上下文作用域链的最末端,标识符所在位置越深,读写速度越慢;
将常用的对象成员、数组元素、跨作用域变量存储在局部变量中,然后直接访问局部变量;
改变作用域链(动态作用域):with,catch,eval()函数;
IE中,闭包容易引起内存泄漏;
原型:实例成员,原型成员(hasOwnProperty(""))
4 用速度快的部分,如位操作,原生方法(Math,querySelector(),querySelectorAll())
5 模块加载,延迟加载(require),条件预加载;
6 定时器:让出ui线程,分隔任务(防止任务分隔太小,可加入计时器)
7 使用web worker,处理与浏览器ui无关的长时间运行脚本;
解析大json,编码/解码大字符串,复杂数学运算(图像和视频),大数组排序,
8 异步处理Ajax
XMLHttpRequest(XHR),Dynamic script tag insertion(动态脚本注入),iframes,Comet,Multipart XHR
发送数据:XHR,Beacons图片信标
数据传输格式:XML,JSON,JSONP,自定义格式;
布局/DOM结构
1 最小化重绘/重排,
a 延迟访问布局信息避免重排(避免刷新渲染队列)
b 用cssText/class一次修改多个布局样式
c 批量修改DOM:使用文档片段createDocumentElement();隐藏元素display='none',应用修改,重新显示display='block';备份节点cloneNode(true),修改副本,替换replaceChild
缓存布局信息;
2 把布局信息预存到变量中;
3 DOM访问与修改:
innerHTML与document.createElement()
element.cloneNode()与document.createElement()
4 在相同的内容和数量下,遍历一个数组的速度明显快于遍历一个HTML集合
避免使用HTML元素集合的length作为循环退出条件:
ar=toArray(allDiv)
ar.length与allDiv.length
5 遍历DOM时,老版本浏览器中使用nextSibling优于childNodes
6 不用大table布局,首屏显示快,一般都用div了;
语句结构调优
1 for循环尽量不用for in结构
减少迭代工作量(如减少属性查找,减少控制条件比较次数),减少迭代次数(迭代次数>1000时,Duff's Device)
2 if-else适用于判断两个离散值或几个不同的值域,switch适用于判断多个离散值;
if-else语句按照大概率到小概率顺序排列;如果是多个值域,可考虑用一系列嵌套的if-else;
单个键与值存在映射关系,且要判断大量离散值时,可以用查找表;
3 递归时,要考虑调用栈大小限制,可用迭代算法避免;使用缓存避免重复计算
字符串合并(+,+=,join,concat)
字符串拷贝,临时字符串,考虑到大字符串时调优
正则表达式,回溯失控:
a 使用向前查看和反向引用摸您原子组((?=(pattern to make atomic))\1)
b 使用合适的量词,贪婪量词(由后向前)和惰性量词回溯
c 减小分支数量,缩小分支范围;
d 以简单,必需的字元开始;
e 使用非捕获组(?:...);
f 暴露必须的字元
g 把正则表达式赋值给变量并重用它们
1 静态图片站、动态网站分开
2 静态图片压缩
3 多个小图片放在一个png中,通过像素位置获取指定图片
4 减少页面渲染所需的HTTP请求数,js合并压缩
js压缩,Accept-Encoding HTTP类型:gzip,compress,deflate,identity
js缓存,Expires HTTP响应头,缓存文件大小限制
5 使用内容分发网络CDN
脚本相关
1 避免双重求值:
避免使用eval(),Function(),
setTimeout(),setInterval()建议传入函数而不是字符串作为第一个参数
2 使用Object/Arry直接量
3 管理作用域
全局变量总在运行期上下文作用域链的最末端,标识符所在位置越深,读写速度越慢;
将常用的对象成员、数组元素、跨作用域变量存储在局部变量中,然后直接访问局部变量;
改变作用域链(动态作用域):with,catch,eval()函数;
IE中,闭包容易引起内存泄漏;
原型:实例成员,原型成员(hasOwnProperty(""))
4 用速度快的部分,如位操作,原生方法(Math,querySelector(),querySelectorAll())
5 模块加载,延迟加载(require),条件预加载;
6 定时器:让出ui线程,分隔任务(防止任务分隔太小,可加入计时器)
7 使用web worker,处理与浏览器ui无关的长时间运行脚本;
解析大json,编码/解码大字符串,复杂数学运算(图像和视频),大数组排序,
8 异步处理Ajax
XMLHttpRequest(XHR),Dynamic script tag insertion(动态脚本注入),iframes,Comet,Multipart XHR
发送数据:XHR,Beacons图片信标
数据传输格式:XML,JSON,JSONP,自定义格式;
布局/DOM结构
1 最小化重绘/重排,
a 延迟访问布局信息避免重排(避免刷新渲染队列)
b 用cssText/class一次修改多个布局样式
c 批量修改DOM:使用文档片段createDocumentElement();隐藏元素display='none',应用修改,重新显示display='block';备份节点cloneNode(true),修改副本,替换replaceChild
缓存布局信息;
2 把布局信息预存到变量中;
3 DOM访问与修改:
innerHTML与document.createElement()
element.cloneNode()与document.createElement()
4 在相同的内容和数量下,遍历一个数组的速度明显快于遍历一个HTML集合
避免使用HTML元素集合的length作为循环退出条件:
ar=toArray(allDiv)
ar.length与allDiv.length
5 遍历DOM时,老版本浏览器中使用nextSibling优于childNodes
6 不用大table布局,首屏显示快,一般都用div了;
语句结构调优
1 for循环尽量不用for in结构
减少迭代工作量(如减少属性查找,减少控制条件比较次数),减少迭代次数(迭代次数>1000时,Duff's Device)
2 if-else适用于判断两个离散值或几个不同的值域,switch适用于判断多个离散值;
if-else语句按照大概率到小概率顺序排列;如果是多个值域,可考虑用一系列嵌套的if-else;
单个键与值存在映射关系,且要判断大量离散值时,可以用查找表;
3 递归时,要考虑调用栈大小限制,可用迭代算法避免;使用缓存避免重复计算
字符串合并(+,+=,join,concat)
字符串拷贝,临时字符串,考虑到大字符串时调优
正则表达式,回溯失控:
a 使用向前查看和反向引用摸您原子组((?=(pattern to make atomic))\1)
b 使用合适的量词,贪婪量词(由后向前)和惰性量词回溯
c 减小分支数量,缩小分支范围;
d 以简单,必需的字元开始;
e 使用非捕获组(?:...);
f 暴露必须的字元
g 把正则表达式赋值给变量并重用它们
本文探讨了提升网页性能的多种策略,包括减少HTTP请求、优化图片、使用CDN、脚本优化、布局改进等关键步骤。同时,提供了一系列技巧来减少文件大小、提高缓存效率,并详细介绍了如何通过模块加载、异步处理和使用WebWorker来加速脚本执行。此外,文章还强调了合理使用DOM操作、字符串处理和正则表达式的最佳实践,以及优化语句结构和字符串合并的方法。

被折叠的 条评论
为什么被折叠?



