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


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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jQuery中的select操作详解
Nov 29 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 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
杏林同学录(八)
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php 数组元素快速去重
2017/05/05 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python实现Event回调机制的方法
2019/02/13 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
谈谈python垃圾回收机制
2020/09/27 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
授权委托书范本
2014/04/03 职场文书
营销总监岗位职责
2014/09/16 职场文书