前端优化
文章平均质量分 79
TracyZhou0907
这个作者很懒,什么都没留下…
展开
-
前端性能优化之字体@font-face
@font-face使用 @font-face ,可以定义某个特定字体资源的位置,其样式特征用于网页。用法示例@font-face { font-family: 'Awesome Font'; font-style: italic; font-weight: 400; src: local('Awesome Font Italic'), url('/fonts/awesome-i.woff转载 2016-11-09 10:11:32 · 3429 阅读 · 0 评论 -
图标字体运用以及其优势与劣势
在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化。在微社区项目中,有很多小的Icon(图标),如分享、回复、赞、返回、话题、访问、箭头等,这些Icon(图标)一般都是纯色的。开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清转载 2016-11-09 12:57:06 · 1317 阅读 · 0 评论 -
滚动加载图片(懒加载)实现原理
本文主要根据一、什么是图片滚动加载?通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。二、为什要使用这个技术?比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放转载 2016-11-16 20:20:05 · 434 阅读 · 0 评论 -
前端性能优化(整理中)
1. 页面内容1.1 减少 HTTP 请求数 1.2 减少 DNS 查询 用户输入 URL 以后,浏览器首先要查询域名(hostname)对应服务器的 IP 地址,一般需要耗费 20-120 毫秒 时间。DNS 查询完成之前,浏览器无法从服务器下载任何数据。 1.3 避免重定向原创 2016-11-21 17:19:10 · 295 阅读 · 0 评论