性能优化之代码优化页面加载速度


Posted in Javascript onMarch 01, 2017

页面代码的优化对于页面加载速度也有不小的影响,最广为人知的:

HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾。

其次还有:

1.按需加载,把统计、分享等 JS 在页面 onload 后再进行加载,可以提高访问速度;

2.优化 Cookie ,减少 Cookie 体积;

3.避免 []() 的 src 为空;

4.尽量避免设置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能;

5.合理使用display属性:        

  • display:inline后不应该再使用width、height、margin、padding以及float
  • display:inline-block后不应该再使用float
  • display:block后不应该再使用vertical-align
  • display:table-*后不应该再使用margin或者float

6.不滥用Float 和 Web 字体;

7.尽量使用CSS3动画;

8.使用 AJAX 异步加载部分请求;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
js简单时间比较的方法
Aug 02 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
Angular1.x自定义指令实例详解
Mar 01 #Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
You might like
php数组查找函数总结
2014/11/18 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
python使用插值法画出平滑曲线
2018/12/15 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Keras 使用 Lambda层详解
2020/06/10 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
毕业生自我推荐
2013/11/04 职场文书
国际会议邀请函范文
2014/01/16 职场文书
应届生找工作求职信
2014/06/24 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
不同意离婚答辩状
2015/05/22 职场文书
不同意离婚代理词
2015/05/23 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js