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


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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
JS实现随机抽取三人
Nov 06 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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
详解Yii实现分页的两种方法
2017/01/14 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python实现多线程抓取知乎用户
2016/12/12 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
市场营销求职信范文
2014/02/21 职场文书
白岩松演讲
2014/05/21 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
Python数据类型最全知识总结
2021/05/31 Python