![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网站优化
lijunlinlijunlin
这个作者很懒,什么都没留下…
展开
-
在设计了100个弹框之后,这些是我的心得
转载自:http://www.codeceo.com/article/100-tip-window-design.html 最近2年一直在做WebApp相关项目,设计过上百个弹框,其中总结了一些心得,将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。 什么是弹框? 弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页转载 2016-07-13 02:27:15 · 472 阅读 · 0 评论 -
在IE8和Chrome,点击或者刷新,整个网页都整体抖动
当然算不上bug,是浏览器兼容的问题 麻烦大家先看下视频:http://www.56.com/u81/v_NTQ2MDc4NTQ.html (官网演示) 测试了6个浏览器, 发现X在IE8和Chrome会抖动,是右边滚动条的原因 目前的解决办法是在body属性加上 overflow-y:scroll !important; overflow-y:转载 2014-12-08 23:38:22 · 2855 阅读 · 0 评论 -
固定位置浮动 DIV 不抖动 IE6 IE7 CSS 写法
CSS: [css] view plaincopyprint? body {background-image: url(text.txt); background-attachment: fixed;} [css] view plaincopyprint? .float_up_controler {position: fixed; width转载 2014-12-08 23:25:02 · 866 阅读 · 0 评论 -
提高页面加载速度支一招
ControlJS官网:http://stevesouders.com/controljs/ //下面是转自http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html 本文总结一下浏览器在 javascript 的加载方式。 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执转载 2014-11-20 04:01:26 · 561 阅读 · 0 评论 -
jQuery页面滚动图片等元素动态加载实现
一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类。 这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。乖乖,估计黄花都变成黄花菜了。所以,我们得做点什么,避免这种糟糕的状况发生。目前很流行的做法就是滚动动态加载,显示屏幕之外的图转载 2014-11-18 02:48:20 · 500 阅读 · 0 评论 -
你还在用jquery.lazyload这个坑爹的图片分屏加载插件么?
百度搜索“图片分屏加载”,映入眼帘的就是jquery.lazyload,相信很多人用过,或许现在还在用,今天我就来说说这个插件的严重BUG。 何为图片分屏加载?顾名思义,就是让图片出现在浏览器可视区域内时,才进行加载。好处就是当页面上图片过多时候,不需要一次性加载完,大大提高了友好性,也减轻的服务器的压力。 关于jquery.lazyload的demo,大家可以看一下:demo转载 2014-11-18 02:35:51 · 2803 阅读 · 0 评论 -
Web性能监控自动化探索之路–初识WebPageTest
无论是从Velocity 2012还是在web技术沙龙,亦或前端同学的学习月报里,相信大家对PageSpeed的概念和原理都有了一定的了解。那么下一步我们要做的就是,将PageSeed分析方法应用到我们日常的发布中去。包括两部分: 1、发布系统上,提测之后,性能报告自动输出(主要针对内网环境,未发布) 2、日常性能回归检查(主要针对外网环境,已发布) 这里henry就不卖关子了,转载 2014-11-16 02:27:43 · 1904 阅读 · 0 评论 -
web前端性能分析--原理篇
web前端性能: 即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。 页面的请求过程: 1、浏览器的url请求 2、递归寻找DN转载 2014-11-16 02:19:12 · 1570 阅读 · 0 评论 -
WEB前端性能分析--工具篇
浏览器插件类: FireBug 这个不用说了,它可以对页面进行调试,可以记录所有网页的访问耗时,下载的资源等。 Page Speed 说明: 基于firebug的web页面优化的评测工具,同时还有支持chrome的插件,因为是google产的。 使用: 直接打开FF的firebug或chrome的开发人员工具,切换到page speed标签,浏览一个网页然后点击分析即可,分转载 2014-11-16 02:14:23 · 575 阅读 · 0 评论 -
12 个免费在线的 Web 网站性能测试工具
1) Web Page Test 从世界各地多个地点,使用真正的浏览器(IE和Chrome),并在真正的消费者连接速度,对你的网站进行速度测试。您可以运行简单的测试,或执行多步交易,视频采集,内容封锁和更先进的测试,包括。您的结果将提供丰富的诊断信息,包括资源加载的瀑布图,网页速度优化检查和改进建议。 2) Load Impact Load Impact 是一个用来测试网站一次性转载 2014-11-16 16:58:19 · 488 阅读 · 0 评论 -
背景图延迟加载(lazyload)技术
图片延迟加载技术目前已经被各种网站广泛的使用,但最近的一篇《PS美女试验的惊人结果 》文章中使用的却是背景图延迟加载技术。为什么要使用背景图延迟加载技术?下面我们就来说一说这个问题。 之所以使用图片延迟加载技术,是为了避免浪费带宽。有些页面上嵌入了很多图片(上面所说的《PS美女试验的惊人结果 》里就嵌入了30多张高清美女图),但电脑的屏幕一次只能显示一张或顶多2张。而当用户进入这个页面时,正常情转载 2014-11-16 02:36:20 · 2271 阅读 · 0 评论 -
网站前端性能优化总结
1. 添加 Expires 或 Cache-Control 信息头 某些经常使用到、并且不会经常做改动的图片(banner、logo等等)、静态文件(登录首页、说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取。接着,客户端考察缓存中的副本,看看是否过期或者失效,以决转载 2014-11-13 21:23:47 · 499 阅读 · 0 评论 -
淘宝首页性能优化实践
转载自:http://www.codeceo.com/article/taobao-home-high-performance.html 想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多串行请求渲染一个模块运营数据和个性化数据匹配和管理数据兜底容灾 本次淘宝首页改版,虽已不再转载 2016-09-26 20:30:30 · 454 阅读 · 0 评论