一般来说，Web前端开发是指网址的域模型的前一部分，包括浏览器加载、网址主视图的实体模型、图片服务项、CDN服务项等。重点推广方法包括改进浏览器浏览、应用反向代理、CDN提速等。
1、降低HTTP请求当浏览器(手机客户端)与网络服务器通信时，已经占用了大量的时间，尤其是在互联网情况不好的时候，这个问题尤为突出。
一个普通HTTP请求的步骤概述:如果在浏览器中输入“www.xxxxxx.com”并按住Enter键，浏览器会用这个URLbias创建一个与web服务器的连接，然后浏览器就可以向服务器发送请求信息，web服务器收到请求信息后会返回相关信息。在收到来自web服务器的回复信息后，浏览器将表达这些数据信息。
HTTP是一种无状态的应用层协议，这意味着每个HTTP请求都必须创建一个通信链路并传输数据。当我们请求的网页文件中有很多图片、CSS、JS、歌曲等信息时，我们可能经常会和网络服务器创建一个连接，然后释放连接，这肯定会导致资源消耗。在服务器端，每个HTTP必须启动一个单独的进程来解决它。这种通信和服务项目都很贵，每个HTTP请求都很贵。
在网速相同的标准下，下载一个100KB的镜像比免费下载两个50KB的镜像要快。
减少HTTP的关键是把CSS，JavaScript，图片拼在一起。将浏览器浏览一次所必需的JavaScript和CSS结合到一个文件中，这样浏览器只需要请求一次。也可以生成图片，几个图片可以合成一个。如果每张图片都有不同的网页链接，可以根据CSS偏移量来响应鼠标点击的实际 *** 作，以及不同结构的URL。
2、应用浏览器缓存文件对于一个网站来说，CSS、JavaScript、logo、Logo等静态数据资源文件的升级频率较低，基本上每一次HTTP请求都需要这类文件。如果在浏览器中缓存这类文件，可以大大提高特性。根据HTTP头中的Cache-Control和Expires属性，可以设置浏览器缓存文件，这个过程可以持续几天甚至几个月。
在某些情况下，静态数据资源文件的转换必须立即应用于手机客户端浏览器。这种情况可以通过改变文件名来完成，即升级JavaScript文件并不是升级JavaScript文件的内容，而是在现代战争中引入新的JS文件，升级HTML文件。
应用浏览器缓存文件策略的网站在升级静态数据资源时，应选择批号升级方式。比如必须升级10个logo文件，不适合一次性升级全部10个文件。而应该是一个文件一个文件的升级，有一定的时间间隔，防止客户端浏览器突然失效，集中升级缓存文件，导致网络服务器负载剧增，网络拥塞。
3、服务器端开启缩小在服务器端收缩文件，在浏览器中解压文件，可以合理减少通信传输的信息量。文本的压缩系数在80%以上，所以在HTML、CSS、JavaScript文件中对GZip的还原可以达到很好的实用效果。但是网络服务器和浏览器的减少会造成一定的工作压力，在通信网络带宽很优秀但服务器空不足的情况下要考虑到这一点。
4、CSS放到页面最上边、JavaScript放到页面最下边浏览器会在3D渲染所有页面之前免费下载所有的CSS，所以最好的办法就是把CSS放在页面的最上面，让浏览器尽快免费下载CSS。HTML标准明确强调CSS应该包含在页面的区域中。另一方面，浏览器加载JavaScript后立即执行JavaScript，可能会阻塞所有页面，导致页面信息显示缓慢。所以JavaScript最好放在页面底部。但是，如果在页面分析中必须使用JavaScript，那么将其放在这里的底部是不合适的。
是浏览器中的JavaScript高手。为什么这么说？因为当浏览器实现JavaScript编码时，它不能做别的，即 有一个关键的规则从来没有被提到过，那就是CSS和JavaScript的减少，免费下载文件的量立即减少。我经常用YUI压缩机，它的特点是:清除评论；清除附加空案例；轻微抬升；标识符的改变。 Yucompressor是一个java程序流。如果对java比较了解，可以快速上手yuicompressor.jar；如果对java不熟悉，可以应用YUI压缩器。 以自己的yuicompressor-2.4.2.jar为例: DOM的实际运行成本昂贵，这通常是网页应用中的一个特性短板，天生速度慢。在高性能JavaScript中是这样描述的:“把DOM看成一个岛，把JavaScript(ECMAScript)看成另一个岛，用收费桥连接起来”。所以每次访问DOM都会教一笔过桥费，访问越频繁，付出越多。所以一般建议避免过江的频率。 改变和浏览DOM元素会导致页面的重绘和重排，循环系统对DOM的实际操作也是一种罪恶的个人行为。因此，请有效使用JavaScript参数存储内容，并在众多DOM原语中考虑循环系统的开销，在循环系统完成时一次性加载。减少DOM元素的查看和修改，查看时把它们的值带到局部变量。 重画和回流是重画和重新排列。当元素外观改变，但合理布局(高度和宽度)不变时，如改变可见性、轮廓和背景色，就会产生Repaint。 Reflow(重排)是指DOM的变换损害了图元的几何特征(宽度和高度)。浏览器将再次测量图元的几何特征，这将使3D渲染树的损坏部分无效。浏览器会认证DOM分支所有其他节点的可见性特征，这也是回流效率低的原因。如改变窗口大小、改变字体大小、改变内容、改变浏览器对话框、改变样式特征。如果回流过于频繁，CPU利用率会增加，所以前端开发一定要了解重绘和回流的专业知识。 如上所述，如果根据设置样式特性改变节点样式，每一次设置都会引起一次回流，所以最好根据方法设置类；具有实际动画效果的元素的位置特征应设置为固定或绝对，不会轻易危及其他元素的合理布局；如果在动作需求上不能将位置设置为固定或绝对，那么将测量速率的平滑度。 总之，因为回流焊有时候是不可避免的，所以我们不得不尽量限制回流焊的危害范畴。 JSON是一种轻量级的数据传输文件格式，完全独立于语言，是一种理想的数据传输文件格式。另外，JSON是JavaScript的原始文件格式，也就是说你不需要任何独特的API或者工具箱来解决JavaScript中的JSON数据信息。 与XML实例化相比，JSON实例化后的数据信息量普遍小于XML实例化后的数据信息量，因此在脸书等知名论坛上选择JSON作为数据传输方式。 在JSON中，有两种结构:目标和数组。 1.一个目标以“{”开头，以“}”结尾。每个“名字”后面都有一个“:”；“名称/值对”由“，”(分号)分隔。用冒号将名称括起来；如果值是字符串数组，则必须用冒号括起来，但不使用值类型。比如: 2.数组是值有序组合。数组以“[”开头，以“]”结尾。值应该用“，”(分号)分隔。比如: 这种数组和目标文字的实际操作非常方便和高效。如果事先知道JSON的结构，用JSON传递数据和信息真的很奇妙，而且可以写成好用、美观、易读的代码。如果你是前台接待的纯开发者，你会很喜欢JSON的。 一方面，每个请求和响应中都包含了cookie，大的cookie会严重危害传输的数据。因此，必须仔细考虑哪些数据信息必须加载到cookie中，并尽可能避免cookie中传输的信息量。另一方面，用于浏览一些静态数据资源，如CSS、脚本等。，推送Cookies是没有意义的。可以考虑静态数据资源要用单独的网站域名浏览，防止请求静态数据资源时推送cookie，减少cookie传输的频率。 由于cookie是本地硬盘文件，每个浏览器都会加载相关的cookie。因此，建议删除多余的Coockies，并使Coockies的体积尽可能小，以减少对客户响应的伤害。 将cookies应用于跨域实践时，要注意在融入该级别的网站域名上设置coockie，这样二级域名就不会受到它的伤害。 Cookies是有寿命的，一定要注意设置一个有效的过期时间，有效过期时间，过早的淘汰coockie，这些都会提高客户的响应速度。 CDN的全称是内容分发网络，即内容分发互联网。 本质上，CDN还是一个缓存文件，将数据信息缓存在客户附近的区域，让客户在最短的时间内读取数据。 因为CDN部署在桐庐县，一个运营商，也是终端产品用户的互联网服务提供商，客户请求路由器的第一跳到达CDN网络服务器。当浏览器请求的资源存储在CDN时，立即从CDN返回浏览器，最短路径算法返回响应，加快客户网站打开速度，减少大数据中心工作量。一般CDN中可以缓存的文件都是静态数据资源，比如图片、文件(比如视频)、CSS、脚本编写、静态页面等。这类文件浏览频率较高(比如NBA总决赛之类的热门视频文件)，缓存在CDN中可以大大提高网页的打开率。 实用性差是CDN的劣势。随着CDN需求的逐渐增加，这一缺点将得到改善，使得来自虚拟服务器的互联网内容的网页将保持与本地网络服务器或缓存文件中的网页相同。解决方法是当互联网内容发生变化时，立即将新的互联网内容从服务器转移到缓存文件服务器，或者当互联网内容的浏览得到改善时，尽快将数据库网络服务器的互联网内容复制到cdn。 摘要 前端开发攻城工程师这个职位越来越被各个互联网公司所重视，前端工程师这个职位加入的盆友也越来越多。要掌握大量关于Web前端开发性能优化的建议，请参考以下链接。 欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）