web前端页面优化——个人见解
web前端页面优化,我们从JavaScript、css、html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨。
一、 有关javascript方面 优化见解。
1. 首先举个例子:下载1个 100KB 的js文件,要比4个 25KB的js文件快。
因此,我们得出了一个结论:
”那就是减少http 请求js的数量“,
但是问题来了,我们又不能把所有的js放在一起,因为当加载一个巨形的js文件,会导致我们的页面卡停(没有加载完引入的js时,页面不会再次执行)
所以,我们引入了 Requirejs.
Requirejs的优点: 1. 实现js文件的异步加载,避免网页失去响应; 2. 管理模块之间的依赖性,便于代码的编写和维护。(有关requirejs的案例网上很多,在此就不说使用方法了)
2. 合并请求js的http链接
例如当我请求2个存放位置在同意目录下的js。
(1). http://www.test/test/js/jquery-1.9.1.js
(2). http://www.test/test/js/tool.js
我们可这样写:
http://www.test/test/js/??jquery-1.9.1.js,tool.js
3. 使用” lazyload” (懒加载),网上有很多这样的教程。
我在此只说明”懒加载”的使用情况时,当你的页面有很多图片的时候,但是每次展示一两张,只有在下拉 或 点击时,才显示后面的图片。 就用懒加载
二、 在css 方面,优化见解。
- 我们还可以通过把采用“精灵图“(sprites)技术,把页面常用的图片如logo,icon等图片合成在一张图片上,到时候再使用css绝对定位。这样可以减少图片的http请求。
- 通用法则:”减少http请求“,合理规划css样式文件的数量和大小。达到加载性能最优。
三、 在html 方面,优化见解
- 把<script>标签放在紧靠body 的闭合标签的</body>标签的上面。 因为,代码是自上而下执行的。把js的引用放在下面,这是页面会展示已经加载的元素(比起浏览器展示空白页面,这样要强一些)
四、 静态资源路径,使用CDN资源路径。
web前端页面优化——个人见解的更多相关文章
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
- Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
- WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
- Java Web 前端高性能优化(二)
一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...
- 阿里巴巴 web前端性能优化进阶路
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
随机推荐
- QT线程使用收集示例
关于多线程问题: Qt和Boost做跨平台的线程封装,OpenMP主要做并行计算,让不精通多线程的人也能高效地利用CPU的计算能力.个人倾向于用boost.thread, boost.mpi. 一 ...
- 读书笔记「Python编程:从入门到实践」_2.变量和简单数据类型
做了大半年RPA了,用的工具是Kapow. 工作没有那么忙,不想就这么荒废着,想学点什么.就Python吧. 为期三个月,希望能坚持下来. 2.1 变量的命名和使用 变量名只能包含字母.数字和下划线. ...
- JavaScript 消息框
警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write( ...
- 基准测试-jmeter压力测试activeMQ之一环境安装配置
jmeter压力测试activeMQ 摘要:linux(CentOS)单机activeMQ安装.window(2008Server)Jmeter配置activeMQ包.Jmeter配置linux监控 ...
- public var tap: ControlEvent
extension Reactive where Base: UIButton { /// Reactive wrapper for `TouchUpInside` control event. pu ...
- C# 递归产生树
//递归产生树 private void CreateTwo(TreeNode node, int id) { #region --根据指定ID查找数据到 dt string strSql = &qu ...
- strusts2_json
引用别人的 Struts.xml <package name="default" extends ="json-default" > <act ...
- 封装基于jq弹窗插件
相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...
- 简述JVM、JRE、JDK的关系及作用
1.JVM:java虚拟机 . 作用:保证java语言跨平台. 2.JRE:java运行环境 jre=java虚拟机+核心类库. 作用:java程序的运行环境. 3.JDK :java开发工具集.JD ...
- Linux进程间通信--进程,信号,管道,消息队列,信号量,共享内存
Linux进程间通信--进程,信号,管道,消息队列,信号量,共享内存 参考:<linux编程从入门到精通>,<Linux C程序设计大全>,<unix环境高级编程> ...