web前端小知识

一、前端性能优化方法：
1、对于网页内容来说：
(1)、 减少http的请求次数
保持页面简洁、减少资源的使用
(2)、 避免页面跳转
对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。
(3) 、减少DOM元素的跳转
网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。
(4)、避免404
404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
2、对于服务器来说：
(1)、Gzip压缩传输文件
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。
(2)、避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。
3、对于Cookie来说：
减少Cookie的大小
　Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，

• 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
• 将cookie的大小减到最小
• 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
• 设置合适的过期时间，比较长的过期时间可以提高响应速度。
  4、对于CSS来说：
  (1)、将样式表置顶
  经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
  　　如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。
  (2)、避免CSS表达式
  CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。
  5、对于Javascript来说：
  (1)、将脚本置底
  (2)、使用外部Javascirpt和CSS文件
  因为每次页面渲染，html会被重新加载，但js、css会被浏览器缓存，所以在html页面中尽量不要写js、css了。将脚本内容在页面信息内容加载后再加载，尽可能的往后挪。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。
  (3)、精简Javascript和CSS
  重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。
  (5)、减少DOM访问
  二、Cookie，sessionStorage,localStorage的区别
  相同点：都保存在浏览器端，且都是同源的；
  区别：Cookie在浏览器与服务器端来回传递，而sessionStorage与localStorage不会主动把数据发送给服务器，只在本地保存；存储大小限制不同：Cookie数据不能超过4k，同时因为每次http请求都携带者Cookie，故Cookie只适合保存很小的数据，而sessionStorage与localStorage虽然也有存储大小的限制，但是比Cookie大得多，可以达到5M或更多；数据有效期不同：Cookie只在设置的Cookie有效期之前有效，即使浏览器或窗口关闭，sessionStorage仅在当前浏览器窗口关闭之前有效，所以不能持久保持，而localStorage一直有效，不管窗口或浏览器是否关闭，一直保存在本地，因此用做持久数据；作用域的不同：Cookie在所有同源窗口都是共享的，sessionStorage不在不同的浏览器窗口中共享，即使在同一个页面中，localStorage在所有的同源窗口中都共享。