这么多前端优化点你都记得住吗？

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践

为 HTML 内容设置 Cache-Control 或 Expires 可以将 HTML 内容缓存起来，避免频繁向办事器端发送请求。前面讲到，在页面 Cache-Control 或 Expires 头部有效时，浏览器将直接大年夜缓存中攫取内容，不向办事器端发送请求。

环绕前端的机能不可偻指算，涉及到方方面面，我们将环绕 PC 浏览器和移动端浏览器的优化策略进行列举留意，是列举不是展开，碰到不会不懂的点还请站外扩大
开车速度有点快，坐稳了。
url("./iconfont.ttf") format("truetype");
4．应用 touchstart 代替 click
PC 浏览器前端优化策略
收集加载类
(1)削减 HTTP 资本请求次数
在前端页面中，平日建议尽可能归并静态资本图片、JavaScript 或 CSS 代码，削减页面请求数和资本请求消费，如许可以缩短页面初次拜访的用户等待时光。经由过程构建对象归并雪碧图、CSS、JavaScript 文件等都是为了削减 HTTP 资本请求次数。别的也要尽量避免反复的资本，防止增长多余请求。
(2)减小 HTTP 请求大年夜小
除了削减 HTTP 资本请求次数，也要尽量减小每个 HTTP 请求的大年夜小。如削减没须要的图片、JavaScript、CSS 及 HTML 代码，对文件进行紧缩优化，或者应用 gzip 紧缩传输内容等都可以用来减小文件大年夜小，缩短收集传输等待时延。前面我们应用构建对象来紧缩静态图片资本以及移除代码中的注释并紧缩，目标都是为了减小 HTTP 请求的大年夜小。
(3)将 CSS 或 JavaScript 放到外部文件中，避免应用 style或script或标签直接惹人
在 HTML 文件中引用外部资本可以有效应用浏览器的静态资本缓存，但有时刻在移动端页面 CSS 或 JavaScript 比较简单的情况下为了削减请求，也会将 CSS 或 JavaScript 直接写到 HTML 琅绫擎，具体要根据 CSS 或 JavaScript 文件的大年夜小和营业的场景来分析。如不雅 CSS 或 JavaScript 文件内容较多，营业逻辑较复杂，建议放到外部文件惹人。

<linkrel="stylesheet"href=http://news.51cto.com/art/201711/"//cdn.domain.com/path/main.css">

<scriptsrc=http://news.51cto.com/art/201711/"//cdn.domain.com/path/main.js">

(4)避免页面中空的 href 和 src
当 <link>标签的 href 属性为空，或 <script>、 <img>、 <iframe>标签的 src 属性为空时，浏览器在衬着的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载掉败，如许就壅塞了页面中其他资本的下载过程，并且最终加载到的内容是无效的，是以要尽量避免。
6．尽量避免在选择器末尾添加通配符

<img src=http://news.51cto.com/art/201711/"" alt="photo" >
<a href=http://news.51cto.com/art/201711/"">点击链接
(5)为 HTML 指定 Cache-Control 或 Expires
<meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">

(6)合理设置 Etag 和 Last-Modified

合理设置 Etag 和 Last-Modified 应用浏览器缓存，对于未修改的文件，静态资本办事器会向浏览器端返回 304，让浏览器大年夜缓存中攫取文件，削减 Web 资本下载的带宽消费并降低办事器负载。

<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

(7)削减页面重定向

页面每次重定向都邑延长页面内容返回的等待延时，一次重定向大年夜约须要 200 毫秒不等的时光开销（无缓存），为了包管用户尽快看到页面内容，要尽量避免页面重定向。

(8)应用静态资本分域存放来增长下载并行数

浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，是以可以应用多个域名的主机来存放不合的静态资本，增大年夜页面加载时资本的并行下载数，缩短页面资本加载的时光。平日根据多个域名来分别存储 JavaScript、CSS 和图片文件。

<link rel="stylesheet" href=http://news.51cto.com/art/201711/"//cdn1.domain.com/path/main.css" >
...
<script src=http://news.51cto.com/art/201711/"//cdn2.domain.com/path/main.js">

(9)应用静态资本 CDN 来存储文件

如不雅前提许可，可以应用 CDN 收集加快同一个地舆区域内反复静态资本文件的响应下载速度，缩短资本请求时光。

(10)应用 CDN Combo 下载传输内容

HTTP 请求平日默认带上浏览器端的 Cookie 一路发送给办事器，所以在非须要的情况下，要尽量削减 Cookie 来减小 HTTP 请求的大年夜小。对于静态资本，尽量应用不合的域名来存放，因为 Cookie 默认是不克不及跨域的，如许就做到了不合域名下静态资本请求的 Cookie 隔离。

CDN Combo 是在 CDN 办事器端将多个文件请求打包成一个文件的情势来返回的技巧，如许可以实现 HTTP 连接传输的一次性复竽暌姑，削减浏览器的 HTTP 请求数，加快资本下载速度。例如同一个域名 CDN 办事器上的 a.js，b.js，c.js 就可以按如下方法在一个请求中下载。

<script src=http://news.51cto.com/art/201711/"//cdn.domain.com/path/a.js,b.js,c.js">

(11)应用可缓存的 AJAX

$.ajax({

url : url,

type : 'get',

cache : true, //推荐应用缓存

data : {},

success (){//...},

error (){//...}

1/5 1 2 3 4 5 下一页尾页

　　推荐阅读

　　从大概率看，你的隐私数据是时代进步的牺牲品！

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践若何更好地保护小我隐私，是网平易近十分关怀的问题。在大年夜数据时代，人们在网上的一切行动，都在向计>>>详细阅读

本文标题：这么多前端优化点你都记得住吗？

地址：http://www.17bianji.com/lsqh/38705.html

1/2 1