日记2.1

这周继续学习 前端：

文件的放置顺序也是挺重要的，

将css放在页面最上面

最好的方式是：在文档<head/>内加载样式表，这样做的好处是：提高网页渲染性能，避免网页出现白屏或者是没有样式的内容。

将script放在页面最下面

将script标签放在页面底部（body结束标签之前），这样做可以让页面内容优先呈现出来，而非先暴露script脚本中可能存在的错误，能够带来更好的用户体验。此外即便脚本正确无误，但是脚本的加载和执行是阻塞的，如果需要加载的脚本过多，将会延长页面内容的加载时间，造成不好的用户体验。 

将Script放在页面的最下面，因为浏览器加载和解释网页的顺序是从左到右从上到下的，如果JavaScript代码有死循环的问题，网页可能是空白一片的，如果放在页面的最下面即使如此，页面也能正常展现出来，用户体验更好。


避免在CSS中使用Expressions


表达式的问题就在于：它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 

一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

把JavaScript和CSS都放到外部文件中

内联和外置都有不同的好处与坏处：

单独提取好处： 

(1)提高了js和css的复用性 
(2)减小页面体积 
(3)提高了js和css的可维护性 

内联的好处： 
(1)减少页面请求 
(2)提升页面渲染速度 


使用内联的情况： 
(1)脚本和样式只应用于一个页面 
(2)页面不经常被访问 
(3)脚本和样式很少的情况 

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

压缩 JavaScript 和 CSS

压缩是指从去除代码不必要的字符减少文件大小从而节省下载时间。 

方法： 
1.去除不必要的空白符（空格、换行、tab缩进）、格式符、注释符 
2.简写方法名、参数名来压缩js脚本 
在 JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。

避免重定向

301(永久重定向)和302(临时重定向),这两个重定向用的比较多。 
但是要记住重定向会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。

移除重复的脚本

重复脚本会引起不必要的HTTP请求和无用的JavaScript运算，这降低了网站性能。

配置实体标签（ETag）

Entity tag（ETag）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。如果一致，则直接使用缓存中的内容，不需要服务器提供了。 

增加ETag为实体的验证提供了一个比使用”last-modified date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有 ETag文件头的响应指定页面内容的ETag。