打造高性能网站

网站性能优化

如何解决网站性能

• 减少 HTTP 请求数量

• 控制资源文件加载优先级

• 利用浏览器缓存

• 使用 CDN

• 减少重排

• 雪碧图(也是为了减少 http 请求)

• 合并脚本和样式表

CSS 雪碧图

雪碧图也叫 CSS 精灵,是一 CSS 图像合成技术

CSS 雪碧图应用原理:

其实就是 截取 大图一部分显示,而这部分就是一个小图

使用雪碧图可以减少网络请求的次数，加快允许的速度 通过 background-position，去定位图片在屏幕的哪个位置

优缺点

• 优点:调用简单,维护方便,

• 缺点:请求文件过多,引发性能问题 每个小图标都单独调用一图片,即意味着每个小图标的显示都产生一个 HTTP 请求,一般情况下每次创建一个 HTTP 请求,请求到的内容往往是次要的,性能代销主要在请求、以及响应阶段。

为什么要减少网络请求

• HTTP 请求建立和释放需要时间

• 浏览器对同一个域名的并发数量有限制

如何提高首频加载速度

1. js 外联文件放到 body 底部，css 外联文件放到 head 内

2. http 静态资源尽量用多个子域名

3. 服务器端提供 html 和 http 静态资源时最好开启 gzip

4. 在 js,css,img 等资源响应的 http headers 里设置 expires,last-modified

5. 尽量减少 http requests 的数量

6. js/css/html/img 资源压缩

7. 使用 雪碧图(css sprites)，可以减少 img 请求次数

8. 大图使用 lazyload 懒加载

9. 避免 404，减少外联 js

10. 减少 cookie 大小可以提高获得响应的时间

11. 减少 dom elements 的数量

12. 使用异步脚本，动态创建脚本

iframe 有那些缺点？

• iframe 会阻塞主页面的 Onload 事件；

• 搜索引擎的检索程序无法解读这种页面，不利于 SEO;

• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用 iframe 之前需要考虑这两个缺点。

• 如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。

网页验证码是干嘛的，是为了解决什么安全问题？

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

把 script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

之前推荐的方法（已过时）： 之前解决这个问题的方法是把 script 标签放到 body 标签之后 ，这确保了解析到</body>之前都不会被 script 中断。这个方法是有问题的: 浏览器在整个文档解析完成之前都不能下载 script 文件，如果文档很大的话，解析完 HTML，用户依然要等待 script 文件下载并执行完成之后，才能操作这个网站。

现在推荐的解决方案： 现在浏览器 script 标签支持 async 和 defer 属性. 应用这些属性当 script 被下载时，浏览器更安全而且可以并行下载（下载 script 并不阻断 HTML 解析）。

1. async 标记的 Script 异步执行下载，并执行。这意味着 script 下载时并不阻塞 HTML 的解析，并且下载结束 script 马上执行。

2. defer

   标签的 script 顺序执行。这种方式也不会阻断浏览器解析 HTML。

   • 跟 async 不同, defer scripts 在整个文档里的 script 都被下载完才顺序执行。

你有用过哪些前端性能优化的方法？

1. 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器。

2. 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数

3. 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。

4. 当需要设置的样式很多时设置 className 而不是直接操作 style。

5. 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。

6. 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。

7. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

8. 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显示出来，显示比 div+css 布局慢。

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

移动端 html 标签几个体验优化

html,
body {
  overflow: hidden;
  overflow-x: hidden;
  /* 手机上写会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话 ios7 系统会出现留白 */
  -webkit-overflow-scrolling: touch;
  /* 流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上/ */
  position: relative;
  /* 直接子级如果是绝对定位有运动到屏幕外的话，会出现留白  */
}