- 减少http请求
http请求每次都需要建立通信链路，进行数据传输，在服务端每个http都需要启动独立的线程去处理，这些开销很昂贵，减少请求的数量可有效的提高访问性能。 - 使用浏览器缓存
通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。可改变文件名来进行更新，进行避免一次性过多的更新，那样会导致服务器负载骤增，网络阻塞等问题。 - 启用压缩
压缩可分为代码压缩和服务器Gzip压缩两者不冲突。 - CSS sprites
合并图片可有效的减少http强求数量。 - Image懒加载
网站中图片相对大小还是较大，先使网页加载完毕再加载图片，也可分批加载图片。 - css放在头部 js放在body闭合标签前
css尽量都放在一起且位于头部，如果在页面渲染的过程中再次遇到css会导致dom回流，位于javascript下方的css样式会被阻塞影响页面。 - 避免页面回流和重绘
回流是会导致页面重新渲染的一些元素，从而影响性能，回流是元素大小位置发生变化，重绘是字体颜色，背景颜色等发生变化相对回流性能影响较小。 - 减少cookie传输
cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，对于静态资源来说不需要存在cookie 可使用独立的域名访问。 - javascript 代码优化
- 避免使用 eval和 Function
- HTML Collection请转为数组使用
- 减少作用域链查找
- 数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
另外，还应当尽可能的减少对对象以及数组深度查找。 - 字符串拼接推荐使用数组的join
- css选择器优化
css选择符的解析是由右到左，尽量层级不要多 - 使用cdn(内容分发网络)
就近访问，加快用户访问速度，减少数据中心负载压力。 - 避免重定向
- Ajax请求使用缓存
- javascript按需加载
- 根据文件内容产生hash串
如果文件发生改变则文件名改变，没有改变则可进行缓存，尽量将一些不常改动的文件合并到一起，常改动的单独分开。 - 减少DNS的解析速度
在访问一个网站的时候首先要经过DNS的解析。
从前端开始的全链路优化
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
