关于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会根据这些规则分析你的网站,并给出评 ...
随机推荐
- IT兄弟连 JavaWeb教程 请求转发案例
CheckServlet类与OutputServlet类之间为请求转发关系.在web.xml文件中,为CheckServlet映射的URL为"/check",为OutputServ ...
- 报错org.springframework.dao.DataIntegrityViolationException
最简单的原因可能是数据库外键字段选择了不能为空, 改为允许为空就行了.
- ubuntu 下配置django 项目能够被局域网下的其他电脑访问
在项目下的路径下下运行 python manage.py runserver 后面的端口换成其他可用的端口也可以 如何让外网也能访问呢,有待更新
- pycharm 添加个人信息
2. 可以使用搜索快速找到"File and Code Templates", 右侧菜单选择"Python Script",对模板进行编辑 格式为: ${< ...
- 编译安装Apache:出现错误configure: error: mod_deflate
在进行编译安装Apache时,出现如下错误 checking whether to enable mod_deflate... configure: error: mod_deflate has be ...
- hdu 3172 Virtual Friends (字符串的并查集)
一开始一直wa,因为第一个数字t也是多组输入. 然后一直超时,因为我用的是C++里面的cin,所以非常耗时,几乎比scanf慢了10倍,但是加上了一个语句后: std::ios::sync_with_ ...
- Helga Hufflepuff's Cup CodeForces - 855C
Helga Hufflepuff's Cup CodeForces - 855C 题意:给一棵n个节点的树,要给每一个节点一个附加值,附加值可以为1-m中的一个整数.要求只能有最多x个节点有附加值k. ...
- linux的目录结构详细介绍
linux的目录结构详细介绍 1. /目录(根目录) 2./ect/目录 特定主机系统范围内的配置文件. 3./usr/目录 默认软件都会存于该目录下.用于存储只读用户数据的第二层次:包含绝大多数的用 ...
- 165 Compare Version Numbers 比较版本号
比较两个版本号 version1 和 version2.如果 version1 大于 version2 返回 1,如果 version1 小于 version2 返回 -1, 除此以外 返回 0.您可 ...
- 为RecyclerView打造通用Adapter 让RecyclerView更加好用
原文出处: 张鸿洋 (Granker,@鸿洋_ ) 一.概述 记得好久以前针对ListView类控件写过一篇打造万能的ListView GridView 适配器,如今RecyclerView异军突起, ...