# Front-end development principles **Repository Path**: iaaing/Front-end-development-principles ## Basic Information - **Project Name**: Front-end development principles - **Description**: Front-end development principles - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-02-11 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 前端优化 #### 减少HTTP请求数 80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。 **合并文件**是通过把所有脚本放在一个文件中的方式来减少请求数。 **CSS Sprites**是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的background-image和background-position属性来定位要显示的部分。 **行内图片**（Base64编码）用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的）样式表中是个好办法，而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。 #### 减少DNS查找域名系统建立了主机名和IP地址间的映射，就像电话簿上人名和号码的映射一样。当你在浏览器输入www.yahoo.com的时候，浏览器就会联系DNS解析器返回服务器的IP地址。DNS是有成本的，它需要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成之前，浏览器无法从主机名下载任何东西。所以通过缓存 DNS查找，可以改善页面性能 #### 让Ajax可缓存 Ajax的一个好处是可以给用户提供即时反馈，因为它能够从后台服务器异步请求信息。然而，用了Ajax就无法保证用户在等待异步JavaScript和XML响应返回期间不会非常无聊。为了提高性能，优化 Ajax响应是很重要的。提高 Ajxa性能的措施中最重要的方法就是使响应具有可缓存性。就像在添上Expires或者Cache-Control。 #### 减少DOM元素的数量一个复杂的页面意味着要下载更多的字节，而且用JavaScript访问DOM也会更慢。举个例子，想要添加一个事件处理器的时候，循环遍历页面上的500个DOM元素和5000个DOM元素是有区别的。 DOM元素的数量很容易测试，只需要在控制台里输入：`document.getElementsByTagName('*').length` #### 尽量少用iframe 用iframe可以把一个HTML文档插入到父文档里，重要的是明白iframe是如何工作的并高效地使用它。 iframe的优点： - 引入缓慢的第三方内容，比如标志和广告 - 安全沙箱 - 并行下载脚本 - iframer的缺点： - 代价高昂，即使是空白的iframe - 阻塞页面加载 - 非语义 #### 杜绝404 HTTP请求代价高昂，完全没有必要用一个HTTP请求去获取一个无用的响应（比如404 Not Found），只会拖慢用户体验而没有任何好处。 #### 选择link舍弃@import 前面提到了一个最佳实践：为了实现逐步渲染，CSS应该放在顶部。在IE中用@import与在底部用效果一样，所以最好不要用它。 #### 把样式表放在顶部把样式表放到文档的HEAD部分能让页面看起来加载地更快。这是因为把样式表放在head里能让页面逐步渲染。 #### 尽量减少DOM访问用JavaScript访问DOM元素是很慢的，所以，为了让页面反应更迅速，应该： - 缓存已访问过的元素的索引 - 先“离线”更新节点，再把它们添到DOM树上 - 避免用JavaScript修复布局问题 #### 用智能的事件处理器有时候感觉页面反映不够灵敏，是因为有太多频繁执行的事件处理器被添加到了DOM树的不同元素上，这就是推荐使用事件委托的原因。如果一个div里面有10个按钮，应该只给div容器添加一个事件处理器，而不是给每个按钮都添加一个。事件能够冒泡，所以可以捕获事件并得知哪个按钮是事件源。 #### 把JavaScript和CSS放到外面外部文件可以让页面更快，因为JavaScript和CSS文件会被缓存在浏览器。HTML文档中的行内JavaScript和CSS在每次请求该HTML文档的时候都会重新下载。这样做减少了所需的HTTP请求数，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS在外部文件中，并且已经被浏览器缓存起来了，那么我们就成功地把HTML文档变小了，而且还没有增加HTTP请求数。 #### 压缩JavaScript和CSS 压缩具体来说就是从代码中去除不必要的字符以减少大小，从而提升加载速度。代码最小化就是去掉所有注释和不必要的空白字符（空格，换行和tab）。在JavaScript中这样做能够提高响应性能，因为要下载的文件变小了。两个最常用的JavaScript代码压缩工具是JSMin和YUI Compressor，YUI compressor还可以压缩CSS。 #### 优化图片尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具） #### 优化CSS Sprite 在Sprite图片中横向排列一般都比纵向排列的最终文件小组合Sprite图片中的相似颜色可以保持低色数，最理想的是256色以下PNG8格式 #### 不要用HTML缩放图片不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要 #### 用小的可缓存的favicon.ico（P.S. 收藏夹图标） favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。 #### Gzip组件 Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。 `Accept-Encoding: gzip, deflate` 如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding相应头来通知客户端。 `Content-Encoding: gzip` 尽可能多地用gzip压缩能够给页面减肥，这也是提升用户体验最简单的方法。 #### 避免图片src属性为空 Image with empty string src属性是空字符串的图片很常见，会引起的问题：浏览器会向服务器发送另一个请求。 #### 对Ajax用GET请求 Yahoo!邮箱团队发现使用XMLHttpRequest时，浏览器的POST请求是通过一个两步的过程来实现的：先发送HTTP头，在发送数据。所以最好用GET请求，它只需要发送一个TCP报文（除非cookie特别多）。IE的URL长度最大值是2K，所以如果要发送的数据超过2K就无法使用GET了。 #### 尽早清空缓冲区当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个flush()函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。 #### 使用CDN（内容分发网络）用户与服务器的物理距离对响应时间也有影响。把内容部署在多个地理位置分散的服务器上能让用户更快地载入页面。内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数（hop）最少的或者响应时间最快的服务器。 #### 添上Expires或者Cache-Control HTTP头对于静态组件：通过设置一个遥远的将来时间作为Expires来实现永不失效多余动态组件：用合适的Cache-ControlHTTP头来让浏览器进行条件性的请求浏览器（和代理）用缓存来减少HTTP请求的数目和大小，让页面能够更快加载。web服务器通过有效期HTTP响应头来告诉客户端，页面的各个组件应该被缓存多久。用一个遥远的将来时间做有效期，告诉浏览器这个响应在2090年4月15日前不会改变。 Expires: Thu, 15 Apr 2090 20:00:00 GMT