金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 前端性能优化方案索引,我的前端之路

前端性能优化方案索引,我的前端之路

发布时间:2019-12-15 23:15编辑:web前端浏览(193)

    CSS: 试试,然后做的更好

    2015/08/28 · CSS · CSS

    本文由 伯乐在线 - 赖信涛 翻译,JustinWu 校稿。未经许可,禁止转载!
    英文出处:css-tricks.com。欢迎加入翻译组。

    你有没有担心过自己写的 CSS 都错了?有没有想过会错过一些让一切变得更好更简单的新方法?是不是想在 CSS 方面更有自信呢?

    那在这方面你和 Anna 肯定感同身受:

    我的 CSS充满了自我怀疑。现在 class 使用什么样的名字系统更合适呢?以后什么又是最好的?什么是差的?

    ——Anna Debenham (@anna_debenham) November 13, 2014

    如果你也写了很多 CSS,但是从来没有过这样的疑虑,那么就比较令人担心了。要么就是你顶级聪明,要么,呵呵,你懂的

    我最近写 CSS 的方法是:尽管尝试,做的更好。我不是想要宣扬特殊的方法论或者严格的规则。这更像是一些宽松的法则,保证事情在可控的范围内,积极地尝试,然后做的更好一些。

    警告:这是我个人的方法。我工作的项目几乎只有我自己负责 CSS。从最近 css-tricks 上的投票来看,其中55%也同样适用于你。我推测,和你一起工作的人越多,我的建议的作用就越小。 //译注:原文 csstricks 网站边栏有一个投票。

    以下就是详细的法则:

    不要懒惰。你什么时候偷懒了,自己心里都清楚。比如对某个问题你喜欢草草的快速修正,而不是彻底了解这个问题。或者是哪个文件看起来合适就立马将 CSS 放进去而不是想想它到底该放在哪里。又或者是当某个场景明显需要新的模式时你却背道而驰。

    使用你喜欢的方式。知道吗?在模块中我喜欢光明正大地使用子选择器。.module > h2这种形式经常出现在我的 CSS 中。严格的方法论肯定不支持这种做法,但是我可不管。在它出错之前,我会一直这么使用,但是到现在为止都是对的。如果它出错了,我再改。原因正如我之前所提到的。

    用你喜欢的方式进行命名。如果让我根据某个规则来命名,我脑子里肯定会一团糟。我应该会花上一两天的时间来接受这个规则,并且重新进行管理。我们的项目完全是根据我自己的爱好进行命名的。总体上来说,我感到更自在,更高效。

    使用自己觉得高效的工具。我不会推荐什么工具,因为好的工具是因人而异的。如果我觉得某个工具很有用,我就会去用。只要它能节省时间,做出更好地效果,更好地组织,解决性能问题,自动做出最佳选择,不管它是什么,我用了。

    有一条原则是我一直以来坚信的:在整个项目中保持选择器的低特异性。结合 Harry 的特异性图表可以很好地理解这句话。特异性是会逐渐升高的,因此要防止一开始就产生高特异性,否则它会很快成为一个问题。可以考虑多用:.class{}

    有目的性地重新访问页面的各个部分。目的不仅仅是检查各个部分的 CSS 良好,还要试图做的更好,适用于大多数人。我发现每次我重新访问一个地方,都是做最后润色的一个机会,这让我对旧代码更有自信。

    1 赞 2 收藏 评论

    前端性能优化方案索引

    2015/10/07 · CSS, HTML5, JavaScript · 性能

    原文出处: HaoyCn   

    陆续整理和不断更新网络上给出的前端性能的优化方案。

    这里只是做一个总概括式的索引,每一个方案都十分值得推敲和细说。

    我的前端之路

    2016/07/18 · 前端职场 · 4 评论 · 职场

    原文出处: 王下邀月熊   

    笔者的Web前端开发文章索引目录

    撰写本文的时候笔者阅读了以下文章,不可避免的会借鉴或者引用其中的一些观点与文字,若有冒犯,请随时告知。文列如下:

    • RePractise前端篇: 前端演进史
    • 前端的变革
    • 致我们终将组件化的Web
    • 我感觉到的前端变化
    • 解读2015之前端篇:工业时代 野蛮发展
    • 前端工程化知识要点回顾&思考
    • Thoughts about React, Redux & javascript in 2016

    如果你想进行WebAPP的学习,建议先看下我的编程之路:知识管理与知识体系相关内容
    顺便推广下笔者总结的泛前端知识点纲要总结:Coder Essential之客户端知识索引(iOS/Android/Web)、Coder Essential之编程语言学习知识点纲要、Coder Essential之编程语言语法特性概论

    几年前初入大学,才识编程的时候,崇尚的是一路向下,那个时候喜欢搞Windows、Linux底层相关的东西,觉得那些做网页的太Low了。直到后来偶然的机会接触到HTML、JavaScript、CSS,很长一段时间觉得这种这么不严谨的,毫无工程美学的搭配不过是诗余罢了。后来,深入了,才发现,能够有幸在这片星辰大海里游荡,可以以几乎领先于其他方向的技术变革速度来感受这个时代的脉动,是多么幸运的一件事。这是一个最坏的时代,因为一不小心就发现自己Out了;这也是一个最好的时代,我们永远在前行。繁华渐欲,万马齐鸣!

    借用苏宁前端结构师的总结,任何一个编程生态都会经历三个阶段,第一个是原始时期,由于需要在语言与基础的API上进行扩充,这个阶段会催生大量的Tools。第二个阶段,随着做的东西的复杂化,需要更多的组织,会引入大量的设计模式啊,架构模式的概念,这个阶段会催生大量的Frameworks。第三个阶段,随着需求的进一步复杂与团队的扩充,就进入了工程化的阶段,各类分层MVC,MVP,MVVM之类,可视化开发,自动化测试,团队协同系统。这个阶段会出现大量的小而美的Library。当然,笔者以Tools-Frameworks-Library只是想说明我个人感觉的变化。

    笔者从jQuery时代一路走来,经历了以BootStrap为代表的基于jQuery的插件式框架与CSS框架的兴起,到后面以Angular 1为代表的MVVM框架,以及到现在以React为代表的组件式框架的兴起。从最初的认为前端就是切页面,加上一些交互特效,到后面形成一个完整的webapp,总体的变革上,笔者以为有以下几点:

    • 移动优先与响应式开发
    • 前端组件化与工程化的变革
    • 从直接操作Dom节点转向以状态/数据流为中心

    笔者在本文中的叙事方式是按照自己的认知过程,夹杂了大量个人主观的感受,看看就好,不一定要当真,毕竟我菜。梳理来说,有以下几条线:

    • 交互角度的从PC端为中心到Mobile First
    • 架构角度的从以DOM为中心到MVVM/MVP到以数据/状态为驱动。
    • 工程角度的从随意化到模块化到组件化。
    • 工具角度的从人工到Grunt/Gulp到Webpack/Browserify。

    在正文之前,重要的事情说三遍,我是菜鸟!我是菜鸟!我是菜鸟!从来都没有最好的技术,而只有合适的技术与懂它的人。我感谢这些伟大的类库/框架,感恩它们的Contributor,给我呈现了一个何其广阔的世界。虽然2015的前端领域有点野蛮生长,但是也体现了前端一直是开源领域的扛鼎之处,希望有一天我也能为它的繁荣做出自己的贡献。

    关于作者:赖信涛

    图片 1

    个人网站 个人主页 · 我的文章 · 18 ·  

    图片 2

    1 请求和响应

    缓存控制

    请求头里,可以发送 If-Modified-Since 以及 If-None-Match 等信息,来询问服务端请求内容是否有更新,如果没有更新,可返回304,告诉浏览器使用缓存,避免重新下载资源。Pragma 和 Cache-Control 等也能控制缓存。如告诉服务端不要缓存等。

    响应头里,Expires 可以告诉浏览器过期时间,Last-Modified 最近更新时间,ETag 则可允许浏览器进行缓存验证(在 If-None-Match 请求信息中使用)。

    复用TCP

    请求头里,Connection 可控制 TCP 通道的使用,使用 keep-alive 可以复用上次打开的 TCP。

    GZIP压缩

    如果可以启用 gzip 压缩,将减少响应数据大小,加快响应。请求头里面可用 Accept-Encoding 告知浏览器支持的压缩方式,而服务端则用 Content-Encoding 作为回应。

    Cookies

    发送请求时,cookies 也在请求之中。因此,cookies 也可以作为减少请求的优化对象。如,根据同源限制策略,可以使用多个域名加载资源,如加载静态资源,就不会发送多余的 cookies;同时,合理设置 cookies 的路径和域名,如在子站避免不必要的来自父站的 cookies。

    减少HTTP请求

    有很多细节可以实现,比如CSS Sprites、Data URL等等,由于此部分内容和下述内容有所重复,故部分细节在下面会讲到。

    多域名分发

    同域下浏览器能并发的请求有限,而为了增加并发,尤其是一些静态资源上,可以使用多个域名。但由于域名DNS解析本身也是耗时的,所以实践原则是2-4个为宜。

    需要额外提醒的是,加载图像资源的时候,并发没有问题;但在加载 JavaScript 脚本的时候,还是会暂停加载其他资源。

    使用CDN

    根据用户能访问的最快位置加速访问。

    避免重定向和404

    重定向和404将浪费加载请求。

    favicon.ico

    浏览器默认加载的资源,最好能够缓存之。

    基石与催化剂

    2 HTML

    减少DOM

    过多的DOM元素会影响渲染、加载、执行。除了精简页面结构外,还可以适时删除不必要的DOM元素(页面内已经不会再访问的元素),又或者可以懒加载(不一定会使用到的元素,如登录框)。

    CSS 和 JavaScript 文件位置

    CSS 放 head,JavaScript 放 body 闭标签前。乃是因为:

    • 样式表不参与 DOM 修改,所以不会为了解析样式停止文档解析
    • 浏览器要避免重绘,在没有拿到全部样式前不会开始渲染
    • 解析样式时,有的浏览器(FF)会停止脚本运行,而有的(Webkit)则会在脚本访问样式属性但可能受未加载样式影响时停止脚本运行
    • 脚本解析中可能请求样式,如果样式还未解析完毕就会出错
    • 脚本执行将暂停文档的解析和资源的下载

    因此,将二者放在适当的位置,能够极大提高渲染效率。

    脚本延迟加载

    可将脚本添加 defer 和 async 属性。两个属性的共通点在于,脚本的加载和文档的解析是同步进行的,而区别在于:async 一旦加载完毕,立即停止文档解析并执行脚本;defer 等待文档解析完毕后再执行。

    合理使用内联

    脚本和样式,应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面,可以考虑使用内联样式从而减少 HTTP 请求。但如果页面访问频繁,样式脚本在多个页面经常复用,使用外链则是最优选择。

    无论如何,需要避免使用 @import 来导入样式。

    而图像也是一样,高级浏览器支持将图像数据直接 base64 编码在 src 属性里,必要时可直接在 HTML 里输出图片数据。

    减少iframe

    iframe 本身有许多优点,比如可以并行下载脚本,适合加载慢内容(如广告),同时浏览器可以对其进行安全控制。

    减少使用 iframe 的主要考虑是:iframe 会阻碍页面加载,同时也没有语义。

    浏览器的跃进

    现在H5已经成为了一个符号,基本上所有具有绚丽界面或者交互的Web界面,无论是PC还是Mobile端,都被称为基于H5。笔者一直认为,H5技术的发展以及带来的一系列前端的变革,都离不开现代浏览器的发展与以IE为典型代表的老的浏览器的消逝。目前浏览器的市场分布可以由如下两个图:

    • 浏览器分布图
      图片 3
    • 国际浏览器分布图
      图片 4

    这里顺嘴说下,如果想要明确某个属性是否可以使用可以参考Can I Use。话说虽然微信内置的某X5内核浏览器连Flexbox都不支持,不过它帮我们屏蔽了大量手机的底层差异,笔者还是非常感恩的。当然了,在有了Webpack之后,用Flexbox不是问题,可以查看这嘎达。

    3 CSS

    选择器

    选择器效率排行如下:

    1. ID选择器
    2. 类选择器
    3. 标签选择器
    4. 相邻选择器
    5. 子选择器
    6. 后代选择器
    7. 通配符选择器
    8. 属性选择器
    9. 伪类选择器

    效率与优先级并不是对等关系,优先级高的不一定效率高。如 #id.class 合用比 单个 #id 的优先级高,但效率却比值慢。

    选择器书写建议是:

    1. 避免使用通配符
    2. 不使用标签名或类名修饰ID规则:如果规则使用ID选择器作为关键选择器,不要给规则添加标签名。因为ID本身就是唯一的,添加标签名会不必要地降低匹配效率
    3. 不使用标签名修饰类:相较于标签,类更具独特性
    4. 尽量选择最具体的方式:造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式,可以减少规则去匹配标签的时间
    5. 关于后代选择器和子选择器:避免使用后代选择器,非要用的话建议用子选择器代替,但子选择器也要慎用,标签规则永远不要包含子选择器
    6. 利用可继承性:没必要在一般内容上声明样式

    避免滤镜、表达式、Hack

    效率低。

    Sprites

    合并图片可减少 HTTP 请求。其他建议有:

    1. Sprite 中水平排列图片,垂直排列会增加文件大小
    2. Sprite 中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式
    3. 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素,1000×1000就是100万像素

    使用3D动画

    使用 transform: translate3d 等可加速 GPU 渲染。

    ECMAScript

    2015年是JavaScript诞生的20周年。同时又是ES6标准落地的一年。ES6是迄今为止 ECMAScript标准最大的变革(如果不算上胎死腹中的ES4的话),带来了一系列令开发者兴奋的新特性。从目前es的进化速度来看,es后面应该会变成一个个的feature发布而不是像以前那样大版本号的方式,所以现在官方也在推荐 ES+年份这种叫法而不是 ES+版本。在ES2015中,笔者觉得比较欣赏的特性如下,其他完整的特性介绍可以参考这篇文章ES6 Overview in 350 Bullet Points。

    • Module & Module Loader:ES2015中加入的原生模块机制支持可谓是意义最重大的feature了,且不说目前市面上五花八门的module/loader库,各种不同实现机制互不兼容也就罢了(其实这也是非常大的问题),关键是那些模块定义/装载语法都丑到爆炸,但是这也是无奈之举,在没有语言级别的支持下,js只能做到这一步,正所谓巧妇难为无米之炊。ES2016中的Module机制借鉴自 CommonJS,同时又提供了更优雅的关键字及语法(虽然也存在一些问题)。
    • Class:准确来说class关键字只是一个js里构造函数的语法糖而已,跟直接function写法无本质区别。只不过有了Class的原生支持后,js的面向对象机制有了更多的可能性,比如衍生的extends关键字(虽然也只是语法糖)。
    • Promise & Reflect API:Promise的诞生其实已经有几十年了,它被纳入ES规范最大意义在于,它将市面上各种异步实现库的最佳实践都标准化了。至于Reflect API,它让js历史上第一次具备了元编程能力,这一特性足以让开发者们脑洞大开。

    除此之外,ES2016的相关草案也已经确定了一大部分其他new features。这里提两个我比较感兴趣的new feature:

    • async/await:协程。ES2016中 async/await 实际是对Generator&Promise的上层封装,几乎同步的写法写异步比Promise更优雅更简单,非常值得期待。
    • decorator:装饰器,其实等同于Java里面的注解。注解机制对于大型应用的开发的作用想必不用我过多赘述了。用过的同学都说好。

    更让人兴奋的是,JavaScript慢慢不再局限于前端开发中,NodeJs的提出让人们感受到了利用JavaScript进行全栈开发的能力,从此大大提高了开发的效率(至少不用多学习一门语言)。JavaScript在物联网中的应用也曾经引起一些追捧与风潮,不过今年物联网社区更加冷静地看待着这个问题,但是并不影响各大厂商对于JavaScript的支持,可以参阅javascript-beyond-the-web-in-2015这篇文章。笔者还是很看好JavaScript在其他领域继续大放异彩,毕竟ECMAScript 6,7已经是如此的优秀。

    4 JavaScript

    避免重排

    渲染中可能存在的高成本操作:

    1. 修改、增加、删除DOM节点
    2. 移动DOM位置或者动画效果
    3. CSS样式修改(重绘比重排好些)
    4. 调整窗口大小,或者滚动时有绝对定位、fixed 背景以及动画
    5. 修改页面默认字体

    浏览器一般会缓存Render Tree的更新渲染,但以下情况除外:

    1. 调整窗口大小和修改页面默认字体
    2. client/offset/scroll
    3. getComputedStyle() currentStyle

    优化建议:

    1. 修改 className 而非 style
    2. 离线 DOM 后修改,如 documentFragment 或者 display:none 后再调整样式
    3. 缓存属性值
    4. 动画使用 absolute/fixed
    5. 不使用 table 布局(牵一发动全身)
    6. 修改层级比较低的 DOM

    事件委托

    将多个节点上的事件放到其父节点(经典案例:将 li 上的事件绑定到 ul 上)。

    内存管理

    合理释放和缓存内存。如缓存复用的属性,接触对象引用等。

    WebAssembly

    WebAssembly 选择了跟ES2015在同一天发布,其项目领头人是大名鼎鼎的js之父Brendan Eich。WebAssembly旨在解决js作为解释性语言的先天性能缺陷,试图通过在浏览器底层加入编译机制从而提高js性能。WebAssembly所做的正是为Web打造一套专用的字节码,这项标准在未来应用场景可能是这样的:

    1. 开发应用,但使用任何一门可被编译为WebAssembly的语言编写源代码。
    2. 用编译器将源代码转换为WebAssembly字节码,也可按需转换为汇编代码。
    3. 在浏览器中加载字节码并运行。

    图片 5

    需要注意的是,WebAssembly不会替代JavaScript。越来越多的语言和平台想在Web上大展手脚,这会迫使JavaScript和浏览器厂商不得不加快步伐来补充缺失的功能,其中某些功能通过复杂的JavaScript语义来实现并不合适,所以WebAssembly可以作为JavaScript的补集加入到Web阵营中来。WebAssembly最一开始的设计初衷就是作为不依赖于JavaScript的编译目标而存在,进而获得了主流浏览器厂商的广泛支持。很期待有一天WebAssembly能够发展起来,到那个时候,我们用JavaScript编写的应用也会像现在用汇编语言写出的大型程序的感觉咯~

    5 资源

    压缩大小

    压缩样式、脚本、图像等资源的大小。

    针对图像资源,可从预览小图、格式选择等多角度优化。

    懒加载

    如图像的懒加载(滚动到显示区域后才加载)等。

    预加载

    针对之后会用到的资源提前加载。

    渐隐的jQuery与服务端渲染

    6 客户端

    localStorage 缓存

    相比 cookies,localStorage 存储容量更大。可以将一些静态资源(如 jQuery库)等缓存。

    1 赞 4 收藏 评论

    图片 6

    HTML:附庸之徒

    前端用于数据展示

    在笔者最早接触前端的时候,那个时候还不知道前端这个概念,只是知道HTML文件可以在浏览器中显示。彼时连GET/POST/AJAX这些概念都不甚明了,还记得那个时候看到一本厚厚的AJAX实战手册不明觉厉。笔者阅读过Roy Thomas Fielding博士的Architectural Styles andthe Design of Network-based Software Architectures这篇论文,也就是RESTful架构风格的源处。在这篇文章里,笔者反而感觉最有感触的是从BS到CS架构的跃迁。一开始我觉得网页是典型的BS的,咋说呢,就是网页是数据、模板与样式的混合,即以经典的APS.NET、PHP与JSP为例,是由服务端的模板提供一系列的标签完成从业务逻辑代码到页面的流动。所以,前端只是用来展示数据。

    那个时候笔者更菜,对于CSS、JS都不甚明了,一切的数据渲染都是放在服务端完成的。笔者第一次学HTML的时候,惊呆了,卧槽,这能算上一门语言嘛?太简单了吧。。。原来做个网页这么简单啊,然后生活就华丽丽打了脸。那个时候,根本不会以script或者link的方式将资源载入,而是全部写在一个文件里,好吧,那时候连jQuery都不会用。记得那个时候Ajax都是自己手写的,长长的毫无美感的大量重复冗余的代码真是日了狗。

    为什么说HTML只是附庸之徒呢,那个时候我们没有把Browser的地位与其他的Client并列,换言之,在经典的Spring MVC框架里,如下所示,用户所有的逻辑操作的核心我们都会放置到Java代码中,根本不会想到用JavaScript进行控制。另一个方面,因为没有AJAX的概念,导致了每次都是表单提交-后台判断-重新渲染这种方式。这样导致了每一个渲染出来的网页都是无状态的,换言之,网页是依赖于后端逻辑反应不同有不同的呈现,自身没有一个完整的状态管理。

    图片 7
    图片来源于《前端篇:前端演进史》

    AJAX与客户端开发

    笔者最早的区分CS与BS架构,抽象来说,会认为CS是客户端与服务器之间的双向通信,而BS是客户端与服务端之间的单向通信。换言之,网页端本身也变成了有状态。从初始打开这个网页到最终关闭,网页本身也有了一套自己的状态,而拥有这种变化的状态的基础就是AJAX,即从单向通信变成了双向通信。图示如下:

    图片 8

    本文由金沙国际官网发布于web前端,转载请注明出处:前端性能优化方案索引,我的前端之路

    关键词: