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


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 相关文章推荐
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python数据类型学习笔记
2016/01/13 Python
Python的标准模块包json详解
2017/03/13 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Django--权限Permissions的例子
2019/08/28 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
医学生自我鉴定范文
2013/11/08 职场文书
单位成立周年感言
2014/01/26 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
优秀学生评语大全
2014/04/25 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
民政局个人整改措施
2014/09/24 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
小学生暑假安全公约
2015/07/14 职场文书
运动会开幕式致辞
2015/07/29 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书