JS优化
1.避免全局查找
在一个函数中尽量将全局对象存储为局部变量来查找,因为访问局部变量的数要更快一些。
function(){
alert(window.location.href+window.location.host);
}
//更改为
funciton(){
var location=window.location;
alert(location.href+location.host);
}
2.定时器
如果针对的是不断运行的代码,不应该使用setTimeout,而应该使用setInterval。因为setTimeout每一次都会初始化一个定时器。而setInterval只会在开始的时候初始化一个定时器。
Web性能优化
1.避免css@import
使用@import方法引用css文件可能会带来一些影响页面加载速度的问题。比如导致文件按顺序加载(一个加载完成后才会加载另一个),无法并行加载;
2.合并多个外部css文件
3.合并多个外部js文件
4.延迟js加载
将js代码放在页面底部来延迟js的加载
5.启用压缩/Gzip
使用gzip对html和css文件进行压缩,通常可以大约节省50%到70%,这样加载页面只需要更少的带宽和更少的时间。
6.尽量减少dns查询次数
减少dns查询次数,最好的解决方法就是在页面中减少不同的域名请求的机会
7.避免js阻塞渲染
浏览器在遇到一个引入外部js文件的<script>标签时,会停下所有工作下载并解析执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。这是页面加载就会停止。
谷歌建议删除干扰页面第一屏内容加载 的js,第一屏指的是用户在屏幕中最初看到的页面,无论桌面浏览器,还是手机
页面优化总结
A.减少页面体积,提升网络加载
静态资源的压缩合并(JS 代码压缩合并、CSS 代码压缩合并、雪碧图)
静态资源缓存(资源名称加 MD5 戳)
使用 CDN 让资源加载更快
B.优化页面渲染
CSS 放前面,JS 放后面
懒加载(图片懒加载、下拉加载更多)
减少DOM 查询,对 DOM 查询做缓存
减少DOM 操作,多个操作尽量合并在一起执行(DocumentFragment)
事件节流
尽早执行操作(DOMContentLoaded)
使用 SSR 后端渲染,数据直接输出到 HTML 中,减少浏览器使用 JS 模板渲染页面 HTML 的时间