随笔分类 -  Web前端优化

摘要：前端简介Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明 显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端... 阅读全文

摘要：1. 缩小 Cookie (Reduce Cookie Size)每个客户端最多保持 300 个 Cookie，针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多，比如 Firefox 是 50 个) ，每个 Cookie 最多 4K，注意这里的 4K 根据不同的浏览器可能不是严格的 4096 ，对于 Cookie 最重要的就是，尽量控制 Cookie 的大小，不要塞入一些无用的信息。2. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)Web 组件(Component)，多指静态文件，比 阅读全文

摘要：1. 使用 CDN (Use a Content Delivery Network)我们有独特的电信、网通之间的问题，如果针对这个作优化，基本上也算能收到 CDN 或类似的效果吧。2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)各个浏览器都有针对的方案, Apache 例子【注意：下面的说明例子还不够精细，具体的环境上还要加一些调整】:ExpiresActive OnExpiresByType image/gif "modification plus 1 weeks"Li 阅读全文

摘要：1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)1) 合并js,css文件；2) CSS Sprites: 通过CSS的background-image和 background-position属性来显示图片的不同部分；3) 图片地图：图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用。 导航栏，确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；（类滑动门？？）4) 内联图象: 内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样... 阅读全文