浅谈前端优化的那些事

前端优化方面的一些事情，也算是老生常谈了，不论是开发er 面试中，或者是实际项目中，都是应该掌握的，本文将就作者本身所知晓的一些地方来和大家谈谈前端优化的几个点，如有错漏，辛苦补充与修改。

前端优化是一个庞大的体系工程，代码、服务、部署服务器硬件、cdn、等等多个方面，本次涉及方面主要以用户感知为中心，重点为用户体验方面

$\color{red}{ps：代码层次的性能优化(dom缓存、css滤镜、js懒加载、eval、模块打包等)，有必要的话，可以另开一文细讲}$

话不多说，直接正题

先从代码层级切入、更容易切身体会到

文档声明

HTML 4.01 基于 SGML，声明引用 DTD，DTD 规定了标记语言的规则，所以正确的声明才能让浏览器正确地呈现内容

样式前置，脚本后置

根据浏览器的渲染流程，样式的前置在于使dom展现的时候有自身应有的样式，避免因dom先渲染样式后加载导致的 “页面闪烁” 问题。

同理脚本后置更能使用户更快的获得界面体验，从而避免了JavaScript的问题阻塞页面的渲染

样式/脚本文件压缩

文件压缩去除多余空格、精简变量等操作能够显著的减少你文件的体积、达到更快的在协议上（第二点讲）传输

骨架图

骨架图的出现，更好的提升了用户体验，从而使用户加载页面时白屏的时间得到缩减，同时能大体的看出网站的布局，体验上更加接近app
需注意骨架图本身也是一种资源，合理的在需要的地方使用骨架图也是你需要考虑的地方

请求优化等等主要表现在如何更快速的拿到所需要的代码
以下已目前常使用的1.1和1.0版本为背景

代码合并、注释去除

通常项目中我们书写代码均是以格式化的形式进行书写，一方面提升了可阅读性，也同时更方便了开发，但是当面对用户时，多余的回车、空格等都会增加脚本或样式文件的大小，此时我们应该在构建时去除多余的字符，并精简方法名等，达到缩小文件体积，更快的在网络中传输的目的。

规范协议类型

目前我们常用的类型主要集中在GET、POST、PUT、DELETE中。合理的使用协议的对应类型很有必要、GET，POST举例来说，GET的效率会略高于POST，产生影响的点在于POST会比GET多封装一个包，但是就目前的硬件配置来说，此项可以忽略，传输速率基本上相同，更多的区别体现在安全性上，涉及一些需要隐藏的信息，或增删改操作，一般情况下使用POST，在做简单数据查询展示时，可直接使用GET。此项更多偏向于开发代码层次，不做深入，如有必要，再说~

合理使用协议缓存

缓存是前端常见的一个优化点，合理的使用缓存是目前项目中必须的一个点。
这里我大概提两个点，一个是server端缓存，另一个是浏览器缓存。
server端缓存静态资源更多的是通过nginx等来实现静态资源快速获取，在指定时间内将会通过确认是否过期，如果过期才会重新获取资源，这里简单的再提一下，判断是否有缓存主要通过协议ETag字符串信息的对比，和Last-Modified最后一次修改时间的对比来确定。
浏览器缓存就是常见的304，加载页面浏览器会首先查看当前文件是否缓存如果会那么请求中只包含head信息并无body。否则重新拉取
缓存字段cache-control、pragma、IF-match/IF-no-match、IF-modified-since等等字段请自行深入

正确使用cdn

再次之前我们需要简单了解一下cdn
cd的大概组成可以理解为dns服务器和负载均衡设备以及多个节点组成的网络体系，各个点中还设计到更加复杂的负载均衡算法，高性能Cache磁盘等自行了解
CND又是如何工作的呢，首先用户一条正常的请求通过dns解析后发送到对应的运营商，运营商在给出目标服务器的ip，此时目标服务器就是cdn自己的dns，他将通过分析用户的ip的出地区和想要的url资源发送至当前区域内的负载均衡设备上，在通过算法得出当前地区内所有节点压力最小相应最快的节点返回给用户想要的资源，此时本身在做自己的缓存策略

可以看到，合理的使用CND能够有效地解决不同地区节点相差甚远导致的网络传输问题，同时自身也有成熟的缓存解决方案。

先写到这里吧，脑子里太多要优化的地方了，每一个点都又能详细的展开介绍，受限于文笔，无法将自身的思路合理的表达出来。有问题请私信