关于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会根据这些规则分析你的网站,并给出评 ...
随机推荐
- CCF2016.4 - C题
思路:先把路径按反斜杠split成数组,然后用一个ArrayList去模拟.如果遇到空或者.则不处理:如果遇到..则删除ArrayList最后一个元素(注意如果只有1个元素则不删除):其他情况直接加到 ...
- Java面试必刷常见真题200+ ，让你“过五关，斩六将”，轻松入大厂
这份面试清单是我从 2015 年做 TeamLeader 之后开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技术盲点,然后修复和完善它,以此来提高自己的技术水平.虽 ...
- JVM的参数详解
今天就整理下JVM的参数!相对而已JVM有很多参数,但对于一般开发人员执行知道和堆栈大小,GC.远程调试的参数即可. JVM Parameters 首先需要说明的是JVM的参数形式: -X 开头的参数 ...
- bzoj2301 [HAOI2011]Problem b【莫比乌斯反演 分块】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2301 很好的一道题.首先把每个询问转化为4个子询问,最后的结果就是这四个子询问的记过加加减减 ...
- [NOIP2018校模拟赛]T1聚会 party
题目链接: 聚会 分析: 设每个点到1号点的距离为dist_{i},每个点的权值为x_{i},目标点到1号点的距离为dist,权值为x,那么对于每一次查询,我们讨论三种情况: ① 目标家庭在区间左边( ...
- Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1) E
Description Bear Limak prepares problems for a programming competition. Of course, it would be unpro ...
- Headmaster's Headache UVA - 10817
UVA-10817 ans[i][s1][s2]表示考虑前i个人时,有至少1人教的科目集合为s1,有至少2人教的科目集合为s2时的最少工资集合用一个数字表示,转换成二进制后从后面开始数第i位的状态(1 ...
- string类常用方法3
- 136 Single Number 数组中除一个数外其他数都出现两次，找出只出现一次的数
给定一个整数数组,除了某个元素外其余元素均出现两次.请找出这个只出现一次的元素.备注:你的算法应该是一个线性时间复杂度. 你可以不用额外空间来实现它吗? 详见:https://leetcode.com ...
- LVS集群-DR模式
同上个实验一样,还是准备三台机器 分发器(sishen_63):eth0 192.168.1.63 RealServer1sishen_64) RealServer2sishen_65) 首先配置网卡 ...