图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片,可以使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。
如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。
HTML 结构语义化:
更符合 W3C 统一的规范标准,是技术趋势。
没有样式时浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
对 SEO 友好。
以前端角度出发的SEO:
搜索引擎主要以:外链数量和质量网页内容和结构来决定某关键字下的网页搜索排名。
前端应该注意网页结构和内容方面的情况:
Meta 标签优化
主要包括主题(Title),网站描述(Description)。还有一些其它的隐藏文字比如 Author(作者),Category(目录),Language(编码语种)等。
符合 W3C 规范的语义性标签的使用。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词(一般在 5 个上下),然后针对这些关键词进行优化,包括关键词密度(Density),相关度(Relavancy),突出性(Prominency)等等。
在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求后进行缓存处理,例如dns 缓存,cdn 缓存,浏览器缓存,服务器缓存。