前端面试题 性能优化

前端页面性能优化方法

对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

  1. http请求次数优化

    • CSS Sprites(很多小图片放在一个大图片,用切割方式使用,图标经常采取这种做法)
    • 小图片打包时,可以以base64编码形式打包到源文件
    • 前面页面缓存(Expire,Cache-control,Etag,Last-modified)
    • 不经常改变的数据,ajax获取到之后,保存到内存或localstorage中,再次使用,不用重复请求
  2. http请求大小优化

    • js、css源码压缩,图片压缩
    • 网页Gzip
    • ajax请求,返回json格式数据
    • 不要随意将变量存在cookie中,每次请求都会携带
  3. http请求速度优化

    • 图片服务器
    • 静态文件CDN托管
  4. 页面CSS代码优化

    • 当需要设置的样式很多时设置className而不是直接操作style
    • 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)
  5. 页面javascript代码优化

    • 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
    • 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
  6. 页面HTML代码优化

    • 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳
    • 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

前端页面缓存

  1. Cache-Control: no-store 禁止缓存,public,响应被缓存,多用户间共享,private私有缓存,不能在用户间共享,no-cache:提醒浏览器要从服务器提取文档进行验证。max-age:相对过期时间,秒
  2. Last-Modified:资源最后修改时间,下一次发送 Http 请求时,将会发生带 If-modified-since 的 HttpHeader 。未过期, 304 响应,从缓存中读取。
  3. Etag 代表资源的版本,服务器端生成。如果带有 Etag ,下一次发送带 Etag 的请求,如果Etag 没有变化将收到 304 的响应,从缓存中读取。
  4. Expires 代表资源的过期时间,由服务器段设置。 Expire 过期前不会发生Http 请求,直接从缓存中读取。用户强制 F5 例外。
  5. Etag 和 Expire 一起使用时,先判断 Expire ,如果已经过期,再发起 Http 请求,如果 Etag 也过期,则返回 200响应。如果 Etag 没有过期则返回 304 响应。三者同时使用时。先判断 Expire ,然后发送 Http 请求,服务器先判断 last-modified,再判断 Etag ,必须都没有过期, 304 响应。
gzdaijie            updated 2018-05-04 01:47:18

results matching ""

    No results matching ""