笔试题总结
CSS JavaScript HTML 计算机网络 数据结构 算法 程序设计 计算机组成原理
前端优化的方案
一、减少http请求次数
1. 脚本合并。
一些网站需要多个js文件,可以将多个脚本文件合并为一个。 Grunt JSCompress等代码压缩工具。
2. CSS sprites。
- 允许将一个界面所涉及的所有零星图片都包含到一个大图中,使用background-image,background-repeat,background-position等来调整位置;
- CSS Sprites整理起来更为方便,解决了图片命名困扰,只需要对一张集合图片进行命名,提升了网页制作的效率。
- 但是CSS精灵图片合并麻烦、定位繁琐。
3. 文件(CSS、JavaScript、图片)压缩。
4. 延迟加载图片。
只加载第一屏图片,当用户滚动到下面的界面时再加载相应的图片。
5. 避免页面重定向(使用完整的URL地址)
二、使用CDN【内容分发网络】加速
CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。。
CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求。
三、代码优化
1.减少DOM操作
- 使用innerhtml代替DOM操作
- 多次读取的节点设置变量存储
2.减少重绘和重排
四、缓存AJAX
参考资料
前端性能优化方案
雅虎web优化的14条法则
前端性能优化—-yahoo前端性能团队总结的35条黄金定律
Web前端性能优化总结
yahoo军规35条