关于web页面优化
简单汇总了一下web的优化方案（主要的前端优化策略）
- 减少http请求次数
- 文件合并（js、css、图片）；ps：多个图片合并之后，总体积会变小
- 内联图片，即data:URL scheme，但容易导致html页面混乱
- 可缓存的ajax
- 尽量使用get而不是post，get仅发送一次TCP数据包，而post会发送两次
- 使用专用的静态服务器域名，这样在请求静态文件时，就不会传递cookie了，节省带宽
- 推迟加载内容
- 如动画等，可以等页面必备的逻辑执行完后再执行动画
- 预加载
- 空闲的时候，加载接下来可能用到的东西
- 无条件的预加载
测试代码index.html
onload中进行图片预加载
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function parseDom(arg) {
let objE = document.createElement("div");
objE.innerHTML = arg;
return objE.childNodes[0];
};
window.addEventListener('load',function(){
let loader = document.getElementById('preload');
loader.append(parseDom('<img src="pic/IMG_20170914_115807.jpg"/>'));
})
</script>
<body>
<a href="2.html">去下一个页面</a>
<div id="preload" style="display: none;"></div>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<img src="pic/IMG_20170914_115807.jpg"/>
</body>
</html>
访问首页时，进行预加载jpg
访问2.html时，就不需要再次加载了，加快了响应速度
- 有条件的预加载：根据用户的操作预测接下来可能访问的东西，提前加载资源
- 减少dom的数量，检测数量 document.getElementsByTagName('*').length ，数量多造成reflow慢、元素定位慢
- 使用CDN
内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
- 避免使用css expression，因为表达式需要实时更新，使计算次数非常频繁
- 使用外部js和css，因为浏览器可以对其进行缓存，多页面复用同一个文件的时候效果明显
- 对js和css文件进行压缩
- css放在顶端head标签内
- 把可以延迟执行的js放在底部，因为默认情况下script标签的下载和执行都是同步的,想要动态加载script，可以使用第三方的lab.js
- 网上还有说把js打包成png的，看了评论感觉实用性不是很大，压缩效率和gzip差不多，而且好像出现中文内容，就会打包失败，还要求支持canvas（IE8以上）
- 尽量少用全局变量，容易出现混乱而且不易于回收（除非你手动删除），容易造成内存泄漏
- 对于重复运行的代码，用setInterval而不是用setTimeout
- 语句数量最小化
/**不提倡**/
var i = 1;
var j = "hello";
var arr = [1,2,3];
var now = new Date();
/**提倡**/
var i = 1,
j = "hello",
arr = [1,2,3],
now = new Date(); /**不提倡**/
var name = values[i];
i++;
/**提倡**/
var name = values[i++];
- 过深的原型链也会导致效率低下
- 设置动画元素为absolute或fixed
position: static或position: relative元素应用动画效果会造成频繁的reflow。
position: absolute或position: fixed的元素应用动画效果只需要repaint。
- 尽量把多个操作放到一个timer中，而不是使用多个timer
- 字符串连接采用Array.join而是使用+，前者不会创建临时对象，能降低垃圾回收的开销【不同浏览器实现方式不同，因此有不同的争议】
- 性能上来说：
""+字符串>String()>.toString()>new String()。 - dom对象与js对象相互引用、事件绑定等容易造成内存泄漏，因为dom对象一般不会被销毁，除非你去删除dom
- 多个元素的点击事件转换为一个父容器的点击事件，可提高效率
- 尽量在循环外部使用tryCatch（个人理解就是catch语句块会创建一个作用域，循环中创建作用域导致性能低下）
- 对dom定位时，尽量在某个父容器中进行搜索，减小搜索范围
- 减少使用with，with有自己的作用域，会增加作用域链的长度，优化策略是减小作用域的长度，降低作用域链上的搜索时间
dom节点优化
节点优化的关键在于降低reflow次数，先了解以下什么是reflow【可理解为刷新重绘等】
|
accepted
|
|
1.使用 DocumentFragment 可以减少reflow次数
2. css优化
如以下代码逐条更改元素的几何属性，理论上会触发多次
reflow。element.style.fontWeight = 'bold' ;
element.style.marginLeft= '30px' ;
element.style.marginRight = '30px' ;可以通过直接设置元素的
className直接设置，只会触发一次reflow。element.className = 'selectedAnchor' ;
3.当dom元素比较多的时候，可以对要频繁操作的dom元素进行缓存，而不是每次都进行定位
4.innerHTML创建dom的效率要大于createElement()和appendChild()和document.write
5.避免的空的src和href，空的代表加载当前页面，这是没有必要的
6.多innerHTML的多次赋值转换为一次赋值，可降低reflow
var str = "<div>这是一个测试字符串</div>";
/**效率低**/
var obj = document.getElementsByTagName("body");
for(var i = 0; i < 100; i++){
obj.innerHTML += str + i;
}
/**效率高**/
var obj = document.getElementsByTagName("body");
var arr = [];
for(var i = 0; i < 100; i++){
arr[i] = str + i;
}
obj.innerHTML = arr.join("");
闭包优化
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(index) {
return function(evt) {
output.innerText += 'Clicked ' + events[index];
};
})(i);
}
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function(event) {
return function(evt) {
output.innerText += 'Clicked ' + event;
};
})(events[i]);
}
以上两段代码的区别：前者对event形成依赖，而后者不会。当外部的event被修改了或者被删除了，前者由于形成了依赖，无法正常工作，而后者没有依赖，可以正常执行
关于web页面优化的更多相关文章
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- base64：URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
- web页面的优化
众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...
- 用RequireJS优化Wijmo Web页面
用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...
- 转： web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- 隔壁老主精讲web页面性能优化。
首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...
- 小tip: base64:URL背景图片与web页面性能优化——张鑫旭
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
- web页面内容优化管理与性能技巧
来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...
- Web页面性能优化（YSlow）
YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...
随机推荐
- 黑客攻防技术宝典web实战篇：攻击其他用户习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 在应用程序的行为中,有什么“明显特征”可用于确定大多数 XSS 漏洞? 用户提交的输入在应 ...
- SOA架构设计和相关案例分析
一.SOA概念 1.定义: SOA,是一个组件模型,面向服务的体系架构,它将应用程序的不同服务通过这些服务之间定义良好的接口和契约联系起来,不涉及底层编程接口和通讯模型.服务层是SOA的基础,可以直接 ...
- 跟我一起玩Win32开发（9）：绘图（B）
我们今天继续涂鸦,实践证明,涂鸦是人生一大乐趣. 首先,我们写一个程序骨架子,以便做实验. #include <Windows.h> LRESULT CALLBACK MainWinPro ...
- 微信BUG之微信内置的浏览器中window.location.href 不跳转
最近做微信开发遇到这个问题,查了一些文档,总结一下 1.url后面加参数 indow.location.href = url +'?timestamp='+ new Date().getTime()+ ...
- php输出中文字符
中文字符不可以使用imagettftext()函数在图片中直接输出,如果要输出中文字符,需要先使用iconv()函数对中文字符进行编码,语法格式如下:string iconv ( string $in ...
- JS防止页面被其他网站iframe使用方法
if(window.top !== window.self){ window.top.location = window.location;} 这句话的意识是说:如果当前窗体不是顶级窗体,就把自己变成 ...
- zoj3772Calculate the Function(矩阵+线段树）
链接 表达式类似于斐波那契 但是多了一个变量 不能用快速幂来解 不过可以用线段树进行维护 对于每一个点够一个2*2的矩阵 1 a[i] 1 0 这个矩阵应该不陌生 类似于构造斐波那契的那个数列 ...
- POJ1150he Last Non-zero Digit(组合）
链接 题意从尾部找第一个非0的数 这样就可以考虑下怎样会形成0 这个都知道 只有因子2和因子5相遇会形成0 那这样可以先把所有的2和5先抽出来,这样就保证了其它的数相乘就不会再出现0了 这样就可以转 ...
- 移动端UI自动化Appium测试——Android系统下使用uiautomator viewer查找元素
在利用Appium做自动化测试时,最重要的一步就是获取对应的元素值,根据元素来对对象进行对应的操作,如何获得对象元素呢?Appium Server Console其实提供了一个界面对话框&qu ...
- redis本地安装与开发
一.安装(MAC) https://redis.io sudo mv redis-4.0.11.tar.gz /usr/localcd /usr/localsudo tar -zxf redis-4. ...