前端优化还可以这么优化!

做了将近两年的前端工作,我也来总结总结一下在工作中学到的经验 。

首先了,跟着我的思维一起走,用户打开网页的这个动作,可以理解为 涉及到如下 两个大项    浏览器 和服务端 。

我先谈谈服务器端 ,如图

上图可以看出 访问页面动作(客户端) 在服务端拿HTTP 。既然是拿东西那就好说了,(求更合适的比喻)

    一:速度要快,前端能做的就是使用CDN服务了。

二:够轻,前端能做的事情有很多,比如压缩图片 压缩css js文件 html+css高效使用 (避免 table tr td  和  .div ul  li  span div{} 等等类似的代码出现)  ,json数据交互(比xml txt 轻n多倍啊)。

三:次数少, 比如合成图片 css  js文件整合 , 缓存 (cookie,缓存重要的东西即可 ,因为缓存是以文件的方式存在客户端的,若是太大会影响浏览器读取文件的效率)

下面了我们就来看看浏览器和客户端之间的关系了,同样先看图

一: 浏览器解析页面的顺序是从上到下的,而js是浏览器中的霸主(因为浏览器在执行javascript时 是不能同时做其他操作的javascript执行完后浏览器才能继续渲染页面。),

所以css放在 头部,js放在底部。

二:Repaint(重绘) Reflow(重排)  重绘就是一个元素的外观被改变,但是没有改变布局(宽高)的情况  如改变 outline 颜色 背景色等等。 重排就是DOM的变化影响到了元素

的宽高,浏览器会重新计算元素的宽高,会影响页面的排版,这也是reflow低效的原因,如改变窗口大小 改变文字大小  内容改变等等。解决方案是尽可能避免reflow,难以

避免的话尽量将元素定位成fixed和absolute。

三: css的效率 id>class>tag>伟类 。这个不做多的解释。

四:DOM的操作。js和DOM可以看成两个岛,js每操作一次DOM元素便要经过一次桥,操作的次数越多那么过桥的次数越多 效率就低了 所以尽量减少次数。而且修改DOM元素

会造成重绘和重排,循环操作DOM元素那就是更大的罪恶了。

五:另外就是cookie了。大家都懂的。

一总结发现优化就是这么回事儿,不过我总觉得我的比喻不是很恰当,大家要是有好的比喻的话 一定要告诉我,方便大家一起学习和理解。我的QQ是523463345

时间: 2024-12-15 01:46:33

前端优化还可以这么优化!的相关文章

web前端-雅虎34条规则优化

1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的

深圳北易信息:网站做了优化还不被收录的原因

现在每家企业都有一个网站,那么相信很多站长在优化企业网站的时候都会遇到许多情况,网站排名莫名其妙下降,或者权重下降,再或者就是网站做好了优化也没被搜索引擎收录.许多突然的情况都让企业站长,搞不懂情况.那么这篇文章为大家讲解:深圳网站SEO优化,网站做了优化还不被收录的原因. 一.网站属于新站 对于一个新站来说,想要达到秒收的效果,一般都有点困难,一般六个月以内的都可以称之为新站,如果网站上线还没有达到六个月,那么出现收录慢都是正常现象,不用过度担心,坚持做好正确的事情就好. 二.内容原创度低 网

前端应该知道的SEO优化(转)

网站SEO优化分为站内.站外. 一.站内优化 1.做好HTML头标签 标题(title):标题是网页优化中相当有分量,一般网页title主要包含一些关键词.网站名称等. 关键词(keyword):重要性大家都知道!关键词设定要参考热度.百度指数等一些手段,当然选择这些的前提要与自己网站的主题相关.关键词不宜多,一般就是1-3个. 描述(description):主要是对网站的一个介绍,虽然没有前两个标签在搜索引擎蜘蛛眼中作用大,但是也是不可忽略的一个因素.用户搜索时显示在搜索引擎网页中的只有它跟

Java编译期优化与运行期优化技术浅析

Java语言的“编译期”是一段不确定的过程,因为它可能指的是前端编译器把java文件转变成class字节码文件的过程,也可能指的是虚拟机后端运行期间编译器(JIT)把字节码转变成机器码的过程. 下面讨论的编译期优化指的是javac编译器将java文件转化为字节码的过程,而运行期间优化指的是JIT编译器所做的优化. 编译期优化 虚拟机设计团队把对性能的优化集中到了后端的即时编译器(JIT)中,这样可以让那些不是由javac编译器产生的class文件也同样能享受到编译器优化所带来的好处.但是java

Web优化之YaHoo Web优化的14条法则

Yahoo Web优化建议原文:Best Practices for Speeding Up Your Web Site Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页

性能优化指南:性能优化的一般性原则与方法

作为一个程序员,性能优化是常有的事情,不管是桌面应用还是web应用,不管是前端还是后端,不管是单点应用还是分布式系统.本文从以下几个方面来思考这个问题:性能优化的一般性原则,性能优化的层次,性能优化的通用方法.本文不限于任何语言.框架,不过可能会用Python语言来举例. 不过囿于个人经验,可能更多的是从Linux服务端的角度来思考这些问题. 本文地址:http://www.cnblogs.com/xybaby/p/9055734.html 一般性原则 依据数据而不是凭空猜测 这是性能优化的第一

MySQL优化---DBA对MySQL优化的一些总结

MySQL优化---DBA对MySQL优化的一些总结 http://blog.163.com/li_hx/blog/static/183991413201572522214601/ 1. 要确保有足够的内存数据库能够高效的运行,最关建的因素需要内存足更大了,能缓存住数据,更新也可以在内存先完成.但不同的业务对内存需要强度不一样,一推荐内存要占到数据的15-25%的比例,特别的热的数据,内存基本要达到数据库的80%大小. 2. 需要更多更快的CPUMySQL 5.6可以利用到64个核,而MySQL

百度推广优化 关键字质量度优化指南

百度推广中的质量度是关键词的一项属性,它是百度推广系统根据关键词的创意质量.点击率.账户结构.帐户历史表现(账户生效时间.账户内其它关键词的点击率)等多种因素计算得出的值.在帐户中,质量度来说分为10个级别,10颗星是优,1颗星是差. 高质量度的好处主要有:对于广告主来说,可以用更低的点击价格获得更优的排名,从而降低整体推广费用,提高投资回报率.同时质量度的提高,广告可能跳左,提高点击率.对于搜索用户来说,搜索用户越感兴趣,越多人点击,访问者体验越好,质量度越高,对提高用户体验度有帮助. 第一篇

Android 性能优化:使用 Lint 优化代码、去除多余资源

读完本文你将了解到: 前言 什么是 Lint Lint 工作方式简单介绍 从命令行运行 Lint Android Studio 中使用 Lint 团队中建立代码规范利器提升降低问题的等级 Lint 虽好也不能贪杯 在 Java 代码中忽略 Lint 警告 在 XML代码中忽略 Lint 警告 Gradle 中配置 Lint 自动删除查找出来的无用资源文件 总结 Thanks 前言 在保证代码没有功能问题,完成业务开发之余,有追求的程序员还要追求代码的规范.可维护性. 今天,以"成为优秀的程序员&