分享人:chenxingxing
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
一.背景介绍
前端优化的目的:
1. 用户:体验好
2. 服务商:节省资源
简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。
二.知识剖析
2.1 优化途径
1、页面级
HTTP请求数、脚本加载、内联脚本位置等
2、代码级
DOM操作优化、CSS选择符优化、图片及HTML结构优化等
一、页面级优化
1、减少HTTP 请求数————最重要最有效的方法
减少时间成本和资源成本
途径
(1)从设计实现层面简化页面
(2)合理设置 HTTP缓存 原则:能缓存越多越好,能缓存越久越好
(3)资源合并与压缩
(4)CSS Sprites
(5)Inline Images——转化为编码
let fr = new FileReader();
$scope.max = $scope.file.size;//文件大小
fr.readAsDataURL($scope.file);
fr.onprogress = function($event){
$scope.value = $event.loaded;
}
fr.onload = function ($event){//预览图片
preview.src = $event.target.result;
}
缺点:增大了页面的体积,而且无法利用浏览器缓存
(6)图片懒加载
图片地址缓存在 Textarea标签中,待用户往下滚屏的时候才 “惰性” 加载
2、外部脚本置底
3、异步执行inline脚本
4、Lazy Load Javascript
5、将 CSS放在head中
6、减少不必要的 HTTP跳转
7、避免重复的资源请求
二、代码级优化
1、JavaScript
(1)DOM
a. HTML Collection
在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
b. Reflow & Repaint
减少Repaint 和 Reflow
Reflow(回流/重排):元素
Repaint(重绘): 属性
var el = document.getElementById('demo');
el.style.broderLeft = '1px';
el.style.broderRight = '2px';
el.style.padding = '5px';
优化:减少此类操作
(2)减少作用域链查找
低效率的写法:
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar都需要查找到作用域链最顶端,本例中需要访问 100000 次
globalVar += i;
}}
更高效的写法:
// 全局变量 var globalVar = 1;
function myCallback(info){
//局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
//访问局部变量是最快的
localVar += i;
}
//本例中只需要访问 2次全局变量在函数中只需要将 globalVar中内容的值赋给localVar
}
要减少作用域链查找还应该减少闭包的使用
(3)避免使用with(obj){}、evel()Function
(4)数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,
其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销.当出现以下情况时,建议将数据放入局部变量:
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
(5)字符串拼接
"+" :
效率低:因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量;
优化方法:join()
2. CSS选择符
ul li a { color: #444; }
三.常见问题
3.1HTTP缓存怎样设置?
3.2链接后面是否带“/”有什么区别?
3.3如何正确理解 Repaint 和 Reflow?
四.解决方案
3.1
HTTP缓存怎样设置?
meta http-equiv="Cache-Control" content="max-age=7200"
meta http-equiv="expires" content="someGMT"
3.2
链接后面是否带“/”有什么区别?
有/会认为是目录,没/会认为是文件。
加了/浏览器会指向一个目录,目录的话会读取默认文件index等等。
没有/会先尝试读取文件,如果没有文件再找与该文件同名的目录,最后才读目录下的默认文件。
网址没有加上/会给服务器增加一个查找是否有同名文件的过程。
3.3 如何正确理解 Repaint 和 Reflow ?
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
减少性能影响的办法:
总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。
五.编码实战
六.扩展思考
七.参考文献
参考一:
Web前端应该从哪些方面来优化网站?----知乎
参考二:
HTML优化--------阿里云
八.更多讨论
感谢观看
BY :禚洪宇|陈星宇