前端面试资料（包含web前端优化方法和js面试常见内容以及一些面试常见问题）
需积分: 19 124 浏览量
2018-01-08
13:23:51
上传
评论
收藏 21KB DOCX 举报
web 前端优化（SEO）
1. 减少 HTTP 请求。
CSS Sprites,最常用的方式。
图片地图： map 标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图
像。这是在所有主流浏览器中都可以兼容的一个标签属性。
2.使用内容发布网络（CDN）
什么是 CDN，是分布在不同位置的服务器，主要存放静态资源（图片,css, js 等），以便用户更加快速
的访问内容。
3.添加本地缓存
加入本地缓存，在第一次访问时，把静态资源缓存到浏览器，第二次访问不会再次发送请求。浏览本
身的缓存机制并不是十分靠谱，个人推荐用 html5 的 manifest,只需要一个配置文件就 ok。还有一种存
放到 localStorage 的（个人没有尝试过）。
4.压缩资源文件
5、使用精灵图的缺点就是当需要更改图标的时候将会很麻烦，需要手动一个个地去修改，特别是当页面很多的
时候，所以在使用的时候也要考虑好哪些东西适合哪些不适合做精灵图，尽量在项目开始前就统一好。
5.将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
6.避免使用 CSS 表达式
7.配置 ETag
Etag 在请求资源是会对比服务器上次返回的 etag 是否一致，如果一致，则请求为 304（协商缓
存）。还是推荐 manifest 的方式缓存。
8.减少 DNS 查询
DNS 查询有时间开销，通常一个浏览器查找一个给定主机名的 IP 地址需要 20-120ms。缓存 DNS：缓
存 DNS 查询可以很好地提高网页性能，一旦缓存了 DNS 查询，之后对于相同主机名的请求就无需进
行再次的 DNS 查找，至少短时间内不需要。所以在使用页面中 URL、图片、js 文件、css 文件等时，
不要使用过多不同的主机名。
9.使用外部 javascript 和 CSS
10.精简 javascript
移除不必要的字符，包括所有的注释、不必要的空白字符。
11.避免重定向
重定向的英文是 Redirect，用于将用户从一个 URL 重新跳转到另一个 URL。
最常见的 Redirect 就是 301 和 302 两种。
在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置 URL 的时候，最后的“/”，
有些人有时候会忽略，其实你少了“/”，这时候的 URL 就被重定 向了，所以在给页面链接加 URL 的时
候切记最后的“/”不可丢。
12.删除重复脚本
13.使 Ajax 可缓存
针对页面中主动的 Ajax 请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果
不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些 Ajax 请求返回
的数据增加一个 MD5 值的判断，每次请求会判断当前 MD5 是否变化，如果变化了取最新的数据，如
果不变化，则不变.
14，图片 lazyLoad
代码优化：
资源评论
