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


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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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转成EXE文件
2006/10/09 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
详解vue路由
2020/08/05 Javascript
Django卸载之后重新安装的方法
2017/03/15 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Django forms组件的使用教程
2018/10/08 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
vue路由实现登录拦截
2021/03/24 Vue.js
专科文秘应届生求职信
2013/11/18 职场文书
小区门卫工作职责
2013/12/14 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年体育工作总结
2014/11/24 职场文书
机关保密工作承诺书
2015/05/04 职场文书
提档介绍信范文
2015/10/22 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
解决mysql的int型主键自增问题
2021/07/15 MySQL
python脚本框架webpy模板控制结构
2021/11/20 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS