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


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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
JavaScript 学习 - 提高篇
Feb 02 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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开发中常用的8个小技巧
2008/08/27 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python获取代码运行时间的实例代码
2018/06/11 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python页面加载的等待方式总结
2021/02/28 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
护理专业自我鉴定
2014/01/30 职场文书
建房协议书
2014/04/11 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
聘任书格式及范文
2015/09/21 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏