分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

web前端性能优化总结

发布时间:2023-09-06 01:24责任编辑:董明明关键词:前端性能优化

1em=16px(但不完全是)

em会继承父元素的字体大小。
ie 部分浏览器不支持em。

rem继承根元素的字体大小html。 ?px和rem

vue里面用jq只能在mounted里面或者updata里面才可以原因是:dom已经挂载。


什么是web语义化有什么好处?

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

web前端性能优化总结:
1、减少http请求,合理设置 HTTP缓存
2、使用浏览器缓存
3、在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。
4、CSS Sprites
5、LazyLoad Images
6、CSS放在页面最上部,javascript放在页面最下面
7、异步请求Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
8、减少cookie传输
9、CDN加速 ?CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存

性能优化的具体方法(way)
一)内容层面
1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)
?2、避免重定向(/还是需要的)
?3、切分到多个域名
?4、杜绝404

网络传输阶段
1、减少传输过程中实体的大小
???1)缓存
???2)cookie优化
???3)文件压缩(Accept-Encoding:g-zip)

2、减少请求的次数
???1)文件适当的合并
???2)雪碧图

3、异步加载(并发,requirejs)
4、预加载、延后加载、按需加载

渲染阶段
1、js放底部,css放顶部
2、减少重绘和回流
3、合理使用Viewport 等meta头部
4、减少dom节点
5、BigPipe

脚本执行阶段
1、缓存节点,尽量减少节点的查找
2、减少节点的操作(innerHTML)
3、避免无谓的循环,break、continue、return的适当使用
4、事件委托

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

web前端性能优化总结

原文地址:http://www.cnblogs.com/lhl66/p/7822624.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved