【奥门威尼斯网址】何以客观优化WEB前端,高效升高WEB前端品质

by admin on 2019年11月13日

快速提升前端性能

2015/09/26 · HTML5,
JavaScript · 1
评论 ·
性能

本文由 伯乐在线 –
cucr
翻译,唐尤华
校稿。未经许可,禁止转载!
英文出处:Jonathan
Suh。欢迎加入翻译组。

去年,我写了一篇文章Need for
Speed,分享了在开发我的网站中使用的工作流程和技术(包含工具)。从那时起,我的网站又经过了一次重构,完成了很多工作流程和服务器端改进,同时我对前端性能也给与了额外关注。以下就是我做的工作,为什么我要这么做,以及我在网站上用来优化前端性能的工具。

对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前端性能优化。

webstormJetbrains公司旗下一款JavaScript
开发工具,被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript
IDE”等。也是目前国内前端开发者应用最多的一款编辑工具,常驻内存300M左右,如果你内存只有1G,就不要用webstorm了,启动一个项目所需时间与项目大小有关。但如果电脑性能够好,WS是你的最优选择,它为前端而生。Sublime
Text一套跨平台的文本编辑器,支持基于Python的插件。Sublime Text
是专有软件,可通过包扩充本身的功能。sublime体积较小,运行速度快,也是现在主流前端开发编辑器。Adobe
Dreamweaver
第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页,很多电商公司几乎都用这个编辑器。HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。
HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。相较于其他比较成熟的编辑器,没有明显的优势,如果是入门不建议使用,代码提示太智能,不利于入门程序员成长。TopStyle
一款 CSS 开发辅助工具,即 HTML5 / CSS3 编辑器,它专注于 HTML CSS
设计辅助,提供比较多的功能,如 CSS 代码检查等,据称 TopStyle
的帮助文件非常好,有详细的 CSS 指令,适于初次接触 CSS 的学习之用Komodo
一个跨平台支持多种程序语言的Integrated Development Environment
软件,目前他支持了在Windows与Linux上 ,Pythone, Ruby, Rails, Perl, HTML,
CSS, and JavaScript,等的程序语言开发,以及多种程序语言语法着色

最小化请求

所有在你的网站加载时用来渲染页面(外部CSS或JS文件、web字体、图片等等)的资源,都是不同的HTTP请求。一般的网站平均有 93个请求!

我的目标是减少HTTP请求。一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(例如使用构建工具 Grunt 或 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。

奥门威尼斯网址 1
Google Chrome开发者工具的网络选项卡

例如,Facebook的脚本发起3次请求。测试环境中使用一些来自著名社交网站的社交分享脚本,可以看到他们快速增加:

站点 文件 大小
Google+ 1 15.1KB
Facebook 3 73.3KB
LinkedIn 2 47.7KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 4 52.7KB
Total 14 203.2KB

来源:更有效的社会分享链接

这有额外的14个HTTP请求,共203.2KB。相反,我看看 “share-intent” 这个url,它基本上是通过传递和构建数据来生成一个共享,可以只使用HTML来创建社交共享链接。它让我丢掉用于共享的第三方脚本,这些脚本需要7次请求。我在Responsible
Social Share
Links这篇文章有更多的阐述。

评估每一个第三方脚本并确定其重要性。也许存在一种不依赖第三方的方法来完成它。你可能会失去一些功能(例如like、tweet、分享数量),但是请问一下自己:“像数量统计就那么重要吗?”

服务器部分

VueVue.js
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue
的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。国人开发的框架,呼声很高。Angular完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术(HTML、CSS和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。angular诠释了什么是真正的IT行业,活到老,学到老!每更新一版,都会给你一种没学过angular的错觉。backboneBackbone.js
的适用场景非常广,无论是 Web-Page 还是 Web-App
都可以应用,但最合适的还是大型的 Web-App,对于中小型项目来讲 Backbone.js
的 MVC 结构还是有点臃肿了,用不好很容易 over design。Backbone.js
是非常典型的 MVC 框架,但是相对于传统的 server 端 MVC
来讲还是有一些特殊的地方的。原文链接

压缩、优化

现在我找到了减少请求的方法,我开始寻找各种方法来减重。文件越小,加载速度越快。通常平均的页面大小为1950KB。按照内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB
其它:126KB

我使用这些数据作为参考和比较的起点,同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少?是一个由Tim
Kadlec编写的很棒的工具,可以用来帮助你测试和可视化,来自世界各地的访问在你的网站上消耗的流量。

尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;

ReactReact是Facebook开发的一款JS库,React不处理Ajax、路由和数据存储,也不规定数据组织的方式。它不是一个Model-View-Controller框架。如果非要问它是什么,他就是MVC里的“V”。React的精简允许你将它集成到各种各样的系统中

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符)
方法论编写CSS,这将导致冗长的类名。重构我的一些代码变得更简短(“navigation”为
“nav”, “introduction” 为
“intro”),这让我节省了一些空间,但和我期望的后期压缩相比并不是那么明显。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript,大约96KB是jQuery库——71%之多!这里并没有很多需要依赖于jQuery,所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,我设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

压缩CSS、JS文件,缩短文件传输时间;

原文链接:

图片

图片通常占到一个网站的大头。通常网站平均有1249
KB的图片。

我抛弃了图标字体,取而代之的是内联SVG。此外,任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。相比之下,当前网站的一个页面只加载10KB内联SVG,这可是93%的差异。

SVG
sprites看起来很有趣,它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。然而,浏览器兼容性可能是现代CSS使用的一个问题;因此,充分利用 caniuse.com 和逐步改进。

你也可以通过优化图片来压缩字节。有两种方法来优化图片:

  1. 有损压缩:降低图像的质量
  2. 无损压缩:不影响质量

要同时使用两种方法取得最好的效果,顺序是很重要的。首先使用有损图像压缩方法,比如在不超过必要大小的情况下调整图像大小然后在略低质量且不压缩太多的情况下导出如我通常在82
– 92%下导出JPG图片

奥门威尼斯网址 2

ImageOptim是OS X下的一个图像优化工具

接下来,使用无损图像优化工具比如 ImageOptim进行处理,从而通过删除不必要的信息,如元数据或颜色配置文件来进一步减少图像文件大小。

避免404错误:特别要避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;

可能有人会问react也是库么?的确它就是一个库,为什么呢?React和react-router, react-redux结合起来才叫框架,本身只是充当一个前端渲染的

页面渲染

在这一点上,经过工作和汗水得出这些细节,我确信我的 Google PageSpeed
Insights 的分数将是90s。

奥门威尼斯网址 3

在移动平台PSI分数为73/100,而桌面平台上好一点在88/100。它建议我“消除render-blocking的JavaScript和CSS”。

render-blocking文件增加了浏览器显示内容的时间,因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们,等待时间进一步增加。

奥门威尼斯网址 4

优化JavaScript、CSS和web字体的传输,可以提高页面的“第一时间渲染。将这个时间降到最低,理解“关键的渲染路径”很重要,它描述了在当页面的第一个字节被收到,与页面第一次渲染成像素之间发生了什么。

WebPagetest 是用来帮助你配置网站和页面性能最好的可视化工具。

奥门威尼斯网址 5

About页面在渲染优化前的WebPagetest结果

当最小化第一次渲染时间时,我们更多的关注以尽可能快的速度渲染内容,然后允许额外的“东西”在处理过程中逐步渲染。

一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机名,这里要做一个权衡;

本人未使用过React开发,没有话语权,官方给出的说明是react是一个库

CSS

默认情况下,浏览器将CSS作为渲染阻塞;因此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和处理。外部样式表意味着更多的网络线程,它增加了等待时间,同时大型样式表也会增加等待时间。

我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间,这样浏览器可以不用再等待下载整个样式表,就可以快速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

XHTML

<head> <style> /* inline critical CSS */ </style>
</head>

1
2
3
4
5
<head>
  <style>
    /* inline critical CSS */
  </style>
</head>

确定哪些CSS是关键需要(1)查看移动或桌面下页面视口(viewport
)大小,(2)识别视口中可见的元素(3)选择这些元素关联的CSS。

这可能有点棘手,特别是手工完成,但是有一些神奇的工具可以帮助加快甚至自动化这个过程。我使用 Filament
Group编写的 grunt-criticalcss来帮助我为页面生成关键CSS,然后再手动优化一些CSS(合并重复的媒体查询和删除我认为不必要的CSS)。

奥门威尼斯网址 6

About页面只加载关键CSS(左侧)和加载整个CSS(右侧)的对比

现在关键CSS已经内联到<head>标签内,我使用loadCSS工具来异步加载样式表的其余部分。

XHTML

<head> <style> /* inline critical CSS */ </style>
<script> // inline the loadCSS script function loadCSS( href,
before, media, callback ){ … } // then load your stylesheet
loadCSS(“/path/to/stylesheet.css”); </script> <noscript>
<link href=”/path/to/stylesheet.css” rel=”stylesheet”>
</noscript> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  <style>
    /* inline critical CSS */
  </style>
  <script>
   // inline the loadCSS script
   function loadCSS( href, before, media, callback ){ … }
   // then load your stylesheet
   loadCSS("/path/to/stylesheet.css");
  </script>
  <noscript>
    <link href="/path/to/stylesheet.css" rel="stylesheet">
  </noscript>
</head>

谷歌也给出non-render-blocking加载CSS的 另一个示例 。

使用CDN加速,使用户从离自己最近的服务器下载文件;

jQuery 最新版v2.1.3
兼容IE9+,文档说明很全很想起,社区很大。操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能Zepto
最新版v1.7.2 兼容IE10+,一个轻量级的针对现代高级浏览器的JavaScript库,
它与jquery有着类似的api

JavaScript

JavaScript也会导致render-blocking因此它的加载也应该优化可以使用以下的方法:

  1. 小的内联脚本。
  2. 在文档底部加载外部脚本。
  3. 使用defer属性推迟执行脚本。
  4. 使用async属性异步加载的脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script
src=”/path/to/independent-script.js” async> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script src="/path/to/independent-script.js" async>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

在解析HTML时 defer推迟下载脚本,一旦页面渲染完成执行脚本。defer支持很不错,但据报道存在不一致和不可靠性,所以最好同时使用defer并把脚本放置在文档底部。

在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行;然而,他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。

async支持大不如defer,这就是为什么我选择使用loadJS,用来异步加载JS文件的脚本。它支持老式浏览器,同时有一个有用的特性,即根据条件加载脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script> // inline loadJS function
loadJS( src, cb ){ .. } // then load your JS
loadJS(“/path/to/script.js”); </script> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script>
    // inline loadJS
    function loadJS( src, cb ){ .. }
    // then load your JS
    loadJS("/path/to/script.js");
  </script>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少Cookie的反复传输对主域名的影响;

Bootstrap
目前开源社区最受欢迎的项目之一,可谓大名鼎鼎了,最新版本3.x兼容IE9+Layui诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。weUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信
Web
开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、
progress、 toast、article、actionsheet、icon等各式元素。jQuery UI
IE6+,以 jQuery 为基础的开源 JavaScript
网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件Foundation
属于WEB前端框架的先驱者,知名度被Bootstrap反超,但其优秀程度相比Bootstrap只强不弱!最新版本5.x兼容IE9+knockout
一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,官网还有一个视频教程。

Web字体

Web字体使内容更加清晰和漂亮,但是也对页面渲染产生了负面影响。在加载页面时,特别是移动端的连接,你可能已经注意到文本在一段时间看不见。这被称为 FOIT(不可见文本闪动)。

奥门威尼斯网址 7

我的网站出现FOIT的样子

当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它完成字体下载,才显示文本。在最糟糕的情况下,文本无限期地不可见,使内容完全不能阅读。

我处理FOIT 的方式是逐步加载字体,首先依赖默认和系统字体(例如Helvetica和Georgia)允许快速呈现的内容。Web字体然后使用loadCSS异步加载,同时通过 Font
Face
Observer库来检测字体何时下载成功。一旦字体下载且可用,一个类被添加到文档中,用于设置页面正确的字体。

JavaScript

<head> <style> body { font-family: Helvetica, Arial,
sans-serif; } .fonts-loaded body { font-family: Roboto, Helvetica,
Arial, sans-serif; } </style> <script> // inline loadCSS
function loadCSS( href, before, media, callback ){ … } // load
webfonts
loadCSS(“//fonts.googleapis.com/css?family=Roboto:400,500,700”); //
inline FontFaceObserver (function(){ … } // detect loading of fonts
var roboto400 = new FontFaceObserver(“Roboto”, { weight: 400 }); var
roboto700 = new FontFaceObserver(“Roboto”, { weight: 700 });
Promise.all([ roboto400.check(), roboto700.check() ]).then(function()
{ document.documentElement.className += ” fonts-loaded”; });
</script> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
  <style>
    body { font-family: Helvetica, Arial, sans-serif; }
    .fonts-loaded body { font-family: Roboto, Helvetica, Arial, sans-serif; }
  </style>
  <script>
    // inline loadCSS
    function loadCSS( href, before, media, callback ){ … }
    // load webfonts
    loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700");
    // inline FontFaceObserver
    (function(){ … }
    // detect loading of fonts
    var roboto400 = new FontFaceObserver("Roboto", {
      weight: 400
    });
    var roboto700 = new FontFaceObserver("Roboto", {
      weight: 700
    });
 
    Promise.all([
      roboto400.check(),
      roboto700.check()
    ]).then(function() {
      document.documentElement.className += " fonts-loaded";
    });
  </script>
</head>

逐步加载字体将导致FOUT(没有样式的文本闪动)和FOFT(仿文本闪动),这取决于它是如何做的。

奥门威尼斯网址 8

字体逐步加载,不产生FOIT

然而,好处是内容一直可见,而不会出现看不见的情况。关于如何击败FOIT,我写了一篇的深入文章
使用字体事件加载字体。

为文件头指定Expires,使内容具有缓存性;

《大巧不工》2013年7月19日,以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践.同时对Web前端设计领域的经典设计思维进行了剖析,为读者提供了极具指导价值的思想和极具操作性的实践方法。此外,《大巧不工:Web前端设计修炼之道》还讲解了前端性能的测试和度量方法,总结了大量前端性能优化技巧

其它

其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。基于篇幅所限,我不会深入他们。然而我想强调的是,我推荐使用这些方法,他们将会对你的网站性能有一个全面和积极的影响。

我将提到,因为我的网站的访问量百分比相当一部分来自美国以外,而我的服务器是位于纽约,我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon
S3  bucket上,绑定到一个CloudFront版本。

使用gzip压缩内容;

《Web性能权威指南》2014年5月1日,适合所有Web应用及站点开发人员阅读,包括但不限于前端、后端、运维、大数据分析、UI/UX、存储、视频、实时消息,以及性能工程师。

综述

在过去的几个月中我一直在做性能改进,尽管这有很多工作,我确实注意到了差别。我偶尔得到关于我的网站速度的评论,这是性能调整的结果。

我还没有在指标跟踪上做得很好(特别是早期),但让我们看看基于已有数据的一些比较。

平均大小 我的站点 差别
Requests 93 19 -87.6%
Page size 1950KB 524KB -73.1%
HTML 58KB 2.8KB -95.1%
Images 1249KB 66.3 -94.7%
CSS 60KB 14.6KB -75.7%
JS 303KB 6.1KB -98.0%
Fonts 87KB 10.2KB -88.3%

总体上87.5%优于平均水平!不是很坏。现在谷歌PageSpeed也给我的网站一个不错的分数。

奥门威尼斯网址 9

优化后谷歌PageSpeed的结果

关于WebPagetest的结果**,**我注意到,尽管About页面字节增加了,但开始渲染和加载的时间大大减少。

奥门威尼斯网址 10

About页面在渲染优化后的WebPagetest结果

性能改进将永远是进行时,在 HTTP/2到来的路上其中一些将改变,之前好用的技术可能不再好用,同时有些可能完全弃用。

我觉得在过去的几个月,我取得了很大的进展,也学到了很多。我的网站在Github上是开源的,所以大家可以随时看一看。我还没有弄明白这一切,但希望我所分享的所做所学,会给你一些见解。如果你有任何问题或想聊一聊,随时骚扰我的Twitter @jonsuh或者给我发 邮件。

奥门威尼斯网址 11

《Web站点优化》Andy
King重视搜索引擎营销与Web优化之间内在的协同。他是一个思想领导者并且确实懂得Web站点优化的复杂性。这本书中研究的深度和所教授的经验令人惊讶。本书是优化你的Web站点和进行利润最大化的最佳实践所必需的一本书

资源

这里是丰富的有用资源,让你深入了解网站性能。

  • 深入谷歌PageSpeed
  • SpeedCurve
  • WebPagetest
  • 我的网站耗费的流量有多少?
  • 网页设计师和前端开发人员需要关注的前端性能
  • 如何让RWD网站的速度飙起来
  • 提升Smashing
    Magazine的性能:案例学习
  • 网站更庞大并不意味着更多的等待时间
  • 优化性能
  • RWD 膨胀 第一部分 和
    第二部分
  • 谷歌PageSpeed模块
  • 负责任的社交分享链接
  • 首次访问的内联关键CSS
  • async 和
    defer属性的比较
  • 使用字体事件加载字体
  • 使用字体事件再次加载字体
  • 关于字体加载后续——仿文本闪动
  • 播客——通往高性能网站

    1 赞 9 收藏 1
    评论

Javscript部分

《Node.js开发指南》首先简要介绍Node.js,然后通过各种示例讲解Node.js的基本特性,再用案例式教学的方式讲述如何用Node.js进行Web开发,接着探讨一些Node.js进阶话题,最后展示如何将一个Node.js应用部署到生产环境中

关于作者:cucr

奥门威尼斯网址 12

新浪微博:@hop_ping
个人主页 ·
我的文章 ·
17

奥门威尼斯网址 13

尽量少用全局变量;

《JS高级程序设计》将对JavaScript追根溯源,从它在最早的Netscape浏览器中诞生谈起,一直谈到今天的它对DOM和AjaX的强大支持。读者将通过《JavaScript高级程序设计》掌握如何运用和扩展这门语言,从而更好地满足自己的需求,以及如何实现客户端与服务器的无缝通信,而又不必求助于Java或隐藏的网页框架

使用事件代理绑定事件,如将事件绑定在body上进行代理;

《JS权威指南》经典权威的JavaScript工具书,是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript
API的指南和综合参考手册。第6版涵盖HTML5和ECMAScript5

避免频繁操作DOM节点;

《JS语言精粹》一门美丽的、优雅的、轻量级的和非常富有表现力的语言,它使您创建高效的代码,不管您编写代码的目的是管理对象库还是仅仅使Ajax运行得更快。如果您为web开发站点或应用程序,这本《JavaScript语言精粹》绝对应该是必备的

不使用EVAL;

《CSS权威指南》告诉你怎样将最新的CSS2以CSS2.1里面所定义的各种CSS元素应用到实际工作当中。通过书中的例子,你将学会怎样使用CSS创建或修改网站的外观,并且达到普通HTML无法实现的效果

减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;

《深入浅出Node.js》Node.js让JavaScript在服务器端焕发生机,这是一本带着文艺调调的好看的技术书,书中详细阐述TNode.js的方方面面。如果你是前端工程师,这会是你迈向全端工程师的关键一步

类型转换:把数字转换成字符串使用”” +
1,浮点数转换成整型使用Math.floor或者Math.round;

《JS设计模式》如何把经典和现代设计模式应用到JavaScript语言中,来编写优美、结构化和可维护的代码。如果想让代码保持高效、更易于管理,并且能同步最新的最佳实践,那么本书正是为你打造的

对字符串进行循环操作,譬如替换、查找,应使用正则表达式;

《HTTP权威指南》详细解释了HTTP协议,包括HTTP是如何工作的,如何用HTTP来开发基于Web的应用程序,核心的因特网协议如何与架构构建块交互,如何正确实现因特网客户和服务器等。《HTTP权威指南》的中心内容是HTTP,本质是理解Web的工作原理,以及如何将这些知识应用到Web编程和管理之中,主要涵盖HTTP的技术运作方式、产生动机、性能和目标以及一些相关技术问题

删除重复的JS;

《Web前端黑客》Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本、跨站请求伪造、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、字符集、跨域、原生态攻击、高级钓鱼、蠕虫思想等,这些都是研究前端安全的人必备的知识点。《安全技术大系:Web前端黑客技术揭秘》作者深入剖析了许多经典的攻防技巧,并给出了许多独到的安全见解

奥门威尼斯网址 14

Paul Irish
著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、
Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer

CSS部分

TJ Holowaychuk
程序员兼艺术家,Koa、Co、Express、jade、mocha、node-canvas、commander.js
等知名开源项目的创建和贡献者

避免使用
CSSExpressions(CSS表达式):如background-color:expression(
(new
Date).getHours%2
? “#B8D4FF” : “#F08A00″ ) ;

Addy Osmani 谷歌前端开发工程师,创建了 TodoMVC、jQuery UI
Bootstrap、jQuery Plugin Patterns 和 Backbone
Paginator,出版了《Learning JavaScript Design Patterns》和《Developing
Backbone.js Applications》两本技术书籍,而且还是著名的 jQuery、Modernizr
以及Backbone.js 框架的贡献者

避免使用 CSS Filter(CSS滤镜);

John Resig
jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师。著有《Pro
JavaScript Techniques》(即《精通JavaScript》)等经典JavaScript书籍

使用CSS缩写,减少代码量;

Douglas Crockford
JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《JavaScript:
The Good Parts》的作者。他同时也服务于ECMA的JavaScript2.0技术委员会

通过CSSSprites把同类图片合成一张,减少图片请求;

Mike Bostock 纽约时报图形编辑,知名可视化库 D3.js的主要作者

减少查询层级:如.header .logo要好过.header .top .logo;

Mark Otto Twitter前设计师,与Jacob
Thornton合作开发了大名鼎鼎的CSS/HTML框架Bootstrap

减少查询范围:如.header>li要好过.header li;

James Halliday node社区最活跃的贡献者,NPM排名仅次于TJ
Holowaychuck,在写代码之外他还是个自成一派的
插画家。目前substack在NPM上发布了300+的模块

避免TAG标签与CLASS或ID并存:如a.top、button#submit;

Mr.doob JS三维模型库three.js, Code Editor的作者

删除重复的CSS;

Jessica Lord 2013年5月份加入Github设计团队。是开源项目sheetsee.js的作者

奥门威尼斯网址 15

Steve Souders 就职于Google;《High Performance Web
Sites》的作者,创建了YSlow,位居Firefox扩展TOP25的首位,创建了很多其他的性能工具和服务,包括HTTP
Archive、Cuzillion、Jdrop、SpriteMe、ControlJS和Browserscope,担任Velocity的联合主席,Firebug
Working Group的联合创始人,在斯坦福大学教授 “CS193H: High Performance
Web Sites”科目,经常进行公开演讲

HTML部分

Mathias Bynens 协助开发多个开源项目,如jsPerf、HTML5 Boilerplate

语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;

玉伯 淘宝前端类库
KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人

减少DOM节点:加速页面渲染;

阮一峰
70年代生于上海。毕业于上海财经大学,经济学博士,同时也是程序员,个人博客访问量过千万,译有《黑客与画家》、《软件随想录》。目前供职于一所上海本地高校。本文为阮一峰笔记体博客文集《如何变得有思想?》和《一个寻找作者的读者》的代序

给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;

老赵
金融行业程序员,目前就职于摩根大通。多年微软MVP,InfoQ中文站兼职编辑。虽然广泛涉猎各类技术,但早就被人民群众贴上“微软”标签,现已认命

防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;

朴灵 阿里数据平台数据产品部资深工程师。致力前端、数据可视化、Node等领域

正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成

克军 前雅虎中国前端工程师,现豆瓣前端工程师,休闲范儿长发帅哥一枚

div>的过程;

司徒正美
著名的JavaScript专家,去哪儿网前端架构师,立志做考古学家的日语系工程师,穿梭于二次元与二进制间的“魔法师”,做过陶艺,写过小说,涉猎Java、Ruby、
JavaScript。曾出版《JavaScript框架设计》一书

链接为目录或首页的地址后面加”/”,如

Winter
阿里巴巴高级技术专家,著名JavaScript专家。曾参与Bambook开发,更早为微软工作,开发Windows
CE平台的IE浏览器

用LINK而不用@import方式导入样式;

周爱民
Node-Webkit的项目发起人。目前任职于Intel公司开源技术中心,从事Web和浏览器技术开发工作。现在主要工作是开发和维护Node-Webkit项目。此前从事过MeeGo、Tizen和JNI
xml性能库的开发和数据中心解决方案服务。毕业于中科大少年班,在计算机系获得博士学位,研究方向为高性能计算

样式放在页头,JS放在页尾;

汤姆大叔熟悉Waterfall、Agile(Scrum&XP),染指C#、ASP.NET、MVC、EF、NHibernate、SQL
Server、Oracle、JavaScript、HTML5、CSS3、JQuery、Knockout、Silverlight、WPF、WCF、ADFS等技术

缩小favicon.ico并缓存;

GitHub 一个分布式的版本控制系统,最初由Linus
Torvalds编写,用作Linux内核代码的管理。在推出后,Git在其它项目中也取得了很大成功,尤其是在Ruby社区中

奥门威尼斯网址 16

StackOverflow
一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题,浏览问题,索引相关内容,在创建主页的时候使用简单的HTML。在问题页面,我们不会弹出任何广告,销售信息,JavaScript
窗口等

一个人的努力是加法效应,一个群体的努力是乘法效应。如果在学习的道路上你孤立无援,可以加入我们的web前端学习群:618522268,群里有海量资料,每天都有技术大牛分享最前沿的前端案例,大家一起学习一起进步。

SegmentFault
一家中文的开发者社区及媒体。最初的产品原型来自于国外最大的程序员问答社区
StackOverflow,但其产品形态经过一年多的发展,已经有问答、博客、活动等,它还是多个黑客马拉松活动的组织方。

奥门威尼斯网址 17

Google Code
Google公司利用自身服务器资源提供的开发人员主页。其最初目的是为Google自身的开源软件提供开发平台,以及协助开发者扩展Google产品的功能。随着Google开源之夏等项目的推进,Google代码正在成为一个开放的项目托管平台。

掘金 掘金是中国质量最高的技术分享社区,邀请稀土用户作为 Co-Editor
来分享优质的技术干货,从前端到后端开发,从设计到产品,让每一个掘金用户都能挖掘到有价值的干货。

如果文章对你有用,欢迎点赞~我只是知识搬运工,原文链接:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图