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


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
详解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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
ADODB类使用
2006/11/25 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
Javascript验证方法大全
2015/09/21 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Sanic框架流式传输操作示例
2018/07/18 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
公司承诺书格式
2014/05/21 职场文书
初中政教处工作总结
2015/08/12 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python