浅谈在响应式设计中优化CSS提高前端性能--《科技资讯》2015年10期
浅谈在响应式设计中优化CSS提高前端性能
【摘要】：随着互联网产业和各种手持移动终端的高速发展,响应式网页设计已经成为必然趋势。在手持移动设备中,系统资源分配给浏览器的资源是有限的。我们在进行响应式设计时不仅要考虑页面美观性,各种功能性,还需要从用户体验感的角度,考虑网页显示时设备性能的问题。该文将从前端设计角度,分析如何CSS表现层方面提高前端性能。
【作者单位】：
【分类号】：TP393.092
欢迎：、、)
支持CAJ、PDF文件格式，仅支持PDF格式
【参考文献】
中国期刊全文数据库
王成;李少元;郑黎晓;缑锦;曾梅琴;刘慧敏;;[J];计算机应用与软件;2014年12期
【共引文献】
中国硕士学位论文全文数据库
伊玮珑;[D];哈尔滨理工大学;2015年
【二级参考文献】
中国期刊全文数据库
王愉;潘明明;;[J];北京印刷学院学报;2014年03期
周鹏;周海鹰;左德承;李韬;;[J];计算机工程;2012年24期
赵梦琪;;[J];设计;2014年03期
【相似文献】
中国期刊全文数据库
谢冠怀;;[J];现代计算机(专业版);2014年15期
赵劼;;[J];程序员;2010年09期
邢希;田兴彦;王世运;;[J];琼州学院学报;2013年02期
王愉;潘明明;;[J];北京印刷学院学报;2014年03期
崔松健;;[J];信息与电脑(理论版);2013年10期
陈宽飞;沈华英;;[J];无线互联科技;2013年03期
杨彬;;[J];辽宁行政学院学报;2014年05期
杨叶;陈琳;董启标;;[J];现代教育技术;2013年06期
密海英;;[J];苏州市职业大学学报;2013年02期
曾祥艳;肖新平;;[J];控制与决策;2009年07期
中国硕士学位论文全文数据库
陈曦;[D];北京邮电大学;2015年
林瀛瀛;[D];东华大学;2014年
&快捷付款方式
&订购知网充值卡
400-819-9993推荐这篇日记的豆列
&&&&&&&&&&&&在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，前端的具体优化手段都有哪些？国内是否能像Google一样，优化到那么快。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
开启GZip，精简JavaScript，移除重复脚本，图像优化
使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
避免CSS表达式，避免重定向
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1、使用CDN，使用CDN域名来加载图片、CSS、JS等静态资源
2、CSS压缩、JS压缩，合并，减少文件体积
3、dns-prefetch
4、减少http请求数，比如使用图片CSS_Sprite
6、script async 属性
CDN起了主导作用
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
前面的答案都是从网络入手的。说几个对浏览器加载优化的：
减少重绘和重排
执行js代码的优化
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
再怎么优化也比不上少放东西 东西放多了一定会卡 就算延迟加载也会卡一些东西 何况一个首页也不是单页面app
google界面上除了一个搜索框没别的了
你要跟几大门户比 光翻页就好几页翻不完 外加一堆乱七八糟的广告 这数据都不是一个量级的 怎么比
这是网易的首页 你感受一下 343个请求 我猜一大半用于广告和统计 还有新闻的略缩图之类
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
提供一些浏览器加载部分的可能的优化选择：
可以用CSS3的transform/translate来替代margin实现布局。margin要求浏览器重新计算元素布局，而translate只是单个元素的render过程。
减少CSS选择符的层级。比如在写Less文件时，一个错误的习惯是嵌套写选择符，这样虽然在less组织代码的角度来看非常整洁层次化，然而生成出来的css文件内含有大量的多层次选择符，会影响前端效率。事实上建议减少css选择符层级。
而对于JavaScript的优化，重点是保证程序的逻辑代码是优化的，这完全取决于对业务逻辑的理解。除此之外，从技术角度来讲，模块化的JavaScript可以减少不必要的JavaScript加载，可以延迟JavaScript文件的加载。例如采取CommonJS的方式。
另外html模板在前端的使用非常普遍，可以把它放到js文件中预加载到客户端，减少了多次的请求。这个可以参考html2js:
最后，如果浏览器和Web服务器支持，可以尝试HTTP2协议，能合并减少大量的web请求。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一个点就有很多可以优化的地方
你看，昨天在css conf现场听了奇舞团瓜瓜的web高性能动画，仅仅从优化前端显示动画就加了1个多小时，这还只是拿出来分享部分
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在业务允许的情况下用icon代替图片 减少http请求
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
看了这么多回答，发现竟然没人提到SEO优化。至于怎么SEO已经有许多的文章了，这里我就不copy了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
强烈推荐该文章
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)web前端性能优化基础课程
Web前端性能优化进阶课程
百度外卖用户端运营和基础服务前端方向负责人，参与开发了百度外卖高级活动模板和万能跑腿离线包的开发，主导了高级活动模板vue-ssr重构，在在线和离线h5以及结合node进行的前端性能优化上都有丰富经验
从构建、浏览器渲染、缓存、PWA、服务端优化等多方面，梳理优化点真正理解每个细节的性能优化点，改善前端页面优化，提高页面加载效率用专业的技术排除你一直以来对网页性能的困扰，解决网页加载问题
... 已有340同学加入学习
web前端性能优化相关文章
作者：娇娇jojo 时间：日 php文件怎么调试？借助外在服务器是必须的，今天我就为大家介绍一个我用的工具：WampServer。 WampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包（从网上扒下来的专业术语，哈哈哈）。 下面就教大家怎么去安装和配置（我用的是windows的）。 1、安装和启动 （1）下载地址 http://www.wampserver.com/en/#download-wrapper 根据自己的电脑需求，选择64位或者32位。 （2）安装目录及图标 安装的时候一定要自己
浏览2959推荐9
事情来源自我的知乎回答---单行写一个评级组件 简单的评级，由于就是字符，所以支持css定义大小，和颜色，大部分需求用这个是能满足的，但是有些评论表示不能支持小数，比如2.5这种，当时我也没在意，毕竟一行代码 不能要求太多 这几天闲了下来 翻翻知乎以前的回答，觉得可以扩展一下，丰富成一个支持小数，颜色，大小，星星数量，动画和选择的rate组件，并且支持vue和react 思路 支持小数其实很简单，先用空心的星星当背景，然后把实心的星星放在上层，通过控制width+overflow就可以轻松
浏览1865推荐12
提高 web 应用的性能从来没有比现在更重要过。网络经济的比重一直在增长；全球经济超过 5% 的价值是在因特网上产生的（数据参见下面的资料）。这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点。如果你的网站不能及时的响应，或者你的 app 不能无延时的工作，用户会很快的投奔到你的竞争对手那里。 举一个例子，一份亚马逊十年前做过的研究可以证明，甚至在那个时候，网页加载时间每减少100毫秒，收入就会增加1%。另一个最近的研究特别强调一个事实，即超过一半的网
浏览1140推荐5
引言，有一天我在调试一个界面，xml布局里面包含Scroll View，里面嵌套了recyclerView的时候，界面一进去，就自动滚动到了recyclerView的那部分，百思不得其解，上网查了好多资料，大部分只是提到了解决的办法，但是对于为什么会这样，都没有一个很好的解释，本着对技术的负责的态度，花费了一点时间将前后理顺了下 1.首先在包含ScrollView的xml布局中，我们在一加载进来，ScrollView就自动滚动到获取焦点的子view的位置，那我们就需要看下我们activity的onCreate中执行了什么？ 答：当我们在
浏览1072推荐6
HTTP请求中POST和GET方法使用区别 在DevOPS这个工程中，自动化任务从浏览器端采用POST的方式提交任务数据给后端的ansible任务处理api接口，为什么采用POST而不是GET方法呢？ 这个得从POST方式和GET方式得区别说起： （差别一）GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 （差别二）GET书签可收藏，POST为书签不可收藏。GET能被缓存，POST不能缓存 。GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencod
浏览1919推荐9
前言 　　本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ 面试有几点需注意： (来源程劭非老师 github:@wintercn) (1)面试题目： 根据你的等级和职位变化，入门级到专家级：范围、深度、方向。 题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 (2)进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展
浏览1547推荐7
后台管理系统？ 先说后台管理系统。一个企业的产品，我们通常能看到的都是用户端的产品，而在用户端产品的背后，是更多的后台管理系统来支撑的。就拿电商来说，我们普通用户能看到的，就是搜索商品，加购物车，下单，结账，等快递这些内容，最多再有个优惠券和活动之类的，看起来好像也没有什么。但在这一个用户端产品的背后，是体量更大的后台管理系统，比如商品有发布的系统，有处理订单的系统，有客服系统，还有财务、优惠券管理、物流系统等等，各种各样的支撑系统，才能让用户把购买商品的
浏览3123推荐46
一个优秀的网站为了能够更好地照顾不同的用户，一般都会提供简繁两种版本字体切换，提高用户的体验。例如 : Hexo 官网 。之所以 Hexo 能得到了不少内地忠实粉丝的追捧，是因为 Hexo 的官网不仅提供了适合台湾同胞（作者是来自台湾的）阅读的繁体中文版，还为我们大陆用户提供了简体中文版，照顾了我们平时的写作习惯。同样，我们也可以提供繁体版来照顾那些使用繁体字的台湾、港澳同胞。
下面，我将由浅入深地讲解：如何使用 35 行代码，让网站支持简繁切换功能。 正
浏览2218推荐7
web前端性能优化相关问答
最赞的回答
我觉得这已经算基础课程了，别说计算机专业咋咋的，其实跟你一样。在学习新东西的时候又出现新东西是一脸懵的，然后就去百度，去谷歌，去翻书，去提问，运气不好的话，发现又有新东西。这是一个知识网的问题，可能你只需要广度为1，深度为1的知识点就可以理解一个概念，但是有的东西很复杂，想要彻底理解需要庞大的知识体系去支撑的(然而你可能并不需要了解那么深刻)。我初中的时候学过一段时间的素描，知道圆其实是正方形切出来的。以上是背景，后来有一次在项目中要用到原生js写一个前端抽奖页面(要获取一个图片的偏移角度)的算法的时候，这段经历让我更好的理解这个算法。那我是不是可以说学素描更好学习编程？明显是不可以的，不会了...
最赞的回答
&...图片...&&html&&head&&meta charset=&utf-8&&&title&&/title& &style&
border-collapse:
border:1px solid #
text-align:
vertical-align:
vertical-...
最赞的回答
input是一个自闭合标签，没有&input&&/input&这种写法。
最赞的回答
都要一步步成长，想想刚开始时自己茫然一头雾水不也这样吗。然后被骂，被冷嘲热讽，最后学会怎样提问，怎样成长。
最赞的回答
敲够十万行样式代码即可！
最赞的回答
具体写法如下 打个比方&div class=&background&&&div/&这个是你要让他消失的 背景图 你想让它在800px左右 背景图片消失 @media only screen and (max-width: 800px) {
.background{background:
最赞的回答
http://www.imooc.com/learn/36
JavaScript入门篇http://www.imooc.com/learn/10
JavaScript进阶篇 http://www.imooc.com/learn/277
JavaScript高级篇 先一个个的学吧 基础要打牢 后面学起来就快了
最赞的回答
要是小白自学，而且你现在在大学有时间，就在网上下载哪种视频教程，网上一大堆，什么黑*，尚**（不能打广告），这些培训机构的免费全套视频很多，跟着上面学，再买一本书，最后就是科学上网，不会就上网查解决办法，争取自己能解决的问题，通过自己查资料、上网……这些当时解决，编程能力提升很快的
不迎合、不妥协，择有态度的框架，做实力牛逼的前端！
如何学习微信小程序开发？入门+实战教程完美解决！
有数据显示，2016年Web前端岗位月薪最高达到2-3万元，月平均薪资超过8000元，预计在2017年薪资水平将再一次水涨船高！前端薪资如此诱人，入门有难度吗？对于小白来说，入门前端必是绝佳选择，门槛低、较基础，可以顺利帮你打开通往互联网新世界的大门！迟疑1秒，可能丢失10个offer！慕课网职业路径视频不限期，服务随开随用，让你学的更彻底！
掌握最新面试技巧，面试题，让你在前端面试中脱颖而出
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-2