lazyload,现在做web前端是不是必须会小程序开发

lazyload，现在做web前端是不是必须会小程序开发？

结论

就是看场景，不一定要学，学了有加分

关于学习

现在Web前端的知识面有点广，至于需不需要会小程序开发，主要是取决于你的项目。如果你已经是Web前端工作者，可以了解下小程序，毕竟这东西不难，花几个小时基本就入门了，到时候有项目来时，你自然会花时间去详细了解。

庄子有句话讲的好：“吾生也有涯，而知也无涯。以有涯随无涯，殆已”

精力专注

前端的技术迭代又快又多，你不可能所有的知识面都学习的很精坚，所以你得选择性强攻，这边只是说强攻，了解你还是需要了解一点的，这样，真到要用的时候，你不会一脸懵逼，而是很淡定的和老板说：这个我知道，可以用XX方案，我药半日调研下，晚上给你分析结果。老板会说你这小子，做事谨慎，懂的也多，可靠！

大公司

如果你还是个学生，或者准备找工作，你就得看重心了，这个重心是指你需要面试的公司重心，比如你如果去一个大规模的公司，这种公司在乎的是人的潜力，你不一定要会小程序开发，基础扎实，理解力强，就可以慢慢培养。

创业公司

如果你去小创业公司，这种公司在乎的是你能不能现在就给我造个东西出来，经常是赶鸭子上架，这时候，你会小程序，他可能就直接要你了。

总结

小程序很简单，学习不难，花几个小时先了解下还是要找好web前端的基础，基础打扎实项目经验是可以通过实践快速积累的

前端工程师应该关注些什么？

一、基础

1、H5标签

1.1、H5引进的一些新的标签，需要注意article、header、footer、aside、nav以及HTML的标题结构

1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API

1.3、理解HTML标签在各个浏览器上的默认样式（代理样式），理解CSS中的重置样式表的概念

1.4、理解Canvas、SVG、video等功能性标签

1.5、理解form、iframe标签，理解文件提交过程

2、CSS知识

2.1、学习基础知识，包括大部分常用属性、选择器的用法，了解大多数标签基本概念

学习浏览器兼容性问题，知道兼容性的主要问题及解决方法

2.2、深入理解盒子模型，区分块级元素、行内元素，一些重要的属性： display、float、position，必须要会区分盒子、行内盒子的概念

还可以学一些简单的预编译语言：sass、less

2.3、学习常用框架，可以使用bootstrap构建项目

2.4、学习框架的代码组织方式

包括：12格栅系统、组件化、组件的风格化等

2.5、学习CSS 3的新功能，特别是动画效果、选择器

2.6、学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS

2.7、可以看看扁平化设计，还有简洁性

2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念

学习方法：

多看别人的代码，优秀的设计网站

要学会使用grunt、gulp压缩CSS

display + position + float 可以组合出很复杂的效果，多练习盒子模型

尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局

3、深入学习javascript

3.1、重新学习JS语法，注意：表达式、语句、类型

主要倾向于“原生”JS哦，不要使用框架

3.2、深入理解JS的“一级函数”、对象、类的概念

学会使用函数来构造类、闭包，学会用面向对象的方式组织代码

3.3、深入理解JS的作用域、作用域链、this对象

理解函数的各种调用方法（call、apply、bind等）

3.4、理解对象、数组的概念

理解对象的“[]”调用，理解对象是一种“特殊数组”

理解for语句的用法

深入理解JS中原始值、包装对象的概念（重要）

3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，更高级的：backbone、angularjs、ejs、jade比较多个框架的使用方法，总结常见用法，提高学习速度学习模块化开发（使用require.js、sea.js等）

3.6、适当看一些著名框架的源码，比如jQuery重要的是学习框架中代码的组织形式，即设计模式

3.7、了解JS解释、运行过程，理解JS的单线程概念

深入理解JS事件、异步、阻塞概念

3.8、理解浏览器组成部件，理解V8的概念

学习V8的解释-运行过程

在V8基础上，学会如何提高JS性能

学会使用chrome的profile进行内存泄露分析

成都朗沃web前端培训机构为你总结了以下学习方法：

提高对自己的要求

多看优秀框架的源码，特别是框架的架构模式、设计模式

多学设计模式

学习原生JS、DOM、BOM、Ajax

4、跨终端

理解混合APP的概念

理解网页在各类终端上的表现

理解网页与原生app的区同，重在约束

理解单页网站，特别要规避页面的内存泄露问题

入门nodejs，对其有个基础概念

5、工具

学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩

会用PS进行切图、保存icon

入手sublime、webstorm

学会使用chrome调试面板，特别是：console、network、profile、element

二、进阶：

1、性能

1.1、理解资源加载的过程

包括：TCP握手连接、HTTP请求报文、HTTP回复报文

1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动

1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响

1.4、理解CDN加速

1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响

1.6、深入理解浏览器的render过程

2、http及TCP协议族

2.1、学习http协议，理解http请求-响应模式

2.2、理解http是应用层协议，它是构建在TCP/IP协议上的

2.3、理解http报文（请求-响应报文）

2.4、理解http代理、缓存、网关等概念，指定如何控制缓存

2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）

2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念

3、安全性

XSS、SQL注入

web课程培训哪个机构好？

在互联网时代，web软件开发是IT行业里非常重要的一个分支。目前已经发展到了web 2.0，使得用户和互联网有着非常紧密的关系，未来web 3.0和web4.0时代，将会给世界带来更大的创新，所以学习web开发，将是一个很有前途的发展方向。

1、目前流行的web开发语言

web开发分为前端和后端开发，前端开发所需要的知识包括Html、CSS和JavaScript等，

这些技术掌握起来比较容易，但是内容比较多和杂，所以我们需要进行大量的实践才能掌握。

当然，最重要的是JavaScript，目前的应用领域比较广泛。

后端开发所需的知识。包括PHP、Java、Python、C#等，这些编程语言使用范围非常广泛，也非常成熟，其中PHP在Web开发领域比较流行，且学习周期比较短。当然，Java和Python也是Web开发解决方案，其中Java语言已经流行很多年，具有较强的扩展性，而且在大型的互联网平台往往会选择Java开发方案。

2、web培训机构

目前市面上培训机构非常多，比如有名的兄弟连，黑马培训，csdn等等，可以说是鱼龙混杂的培训机构也非常多，所以在选择培训机构时，

主要参考几方面：

（1）培训课程

学习一门技术，一定要了解这门技术是否与时俱进，能不能满足当下客户的需求，在学习理论知识的情况下，是否有参与项目实践的课程，因为企业对web开发者的技术能力和动手实战能力有着非常高的要求，同时也决定你薪资的高低。

（2）师资力量

因为web开发技术知识的专业性较强，遇到一个好的讲师，不仅能带你在技术世界里遨游，同时会让你了解职场中的方方面面，对你未来

职业生涯非常有帮助。

（3）口碑及费用

IT口碑比较好的培训机构，学员对培训机构比较认可，机构会把精力放在了学员身上，才是真正对教育事业做贡献的。同时，也要了解培训费用，是否可以分期付费，了解利息情况等。

（4）就业状况

报名前，深入了解前几期学员就业情况，是否在大的互联网企业里就职，如阿里巴巴，百度，腾讯，今日头条等，反向可以看出机构的培训质量。

图片网站如何加速？

除了直接的使用CDN加速服务外，您也可以使用：替换或者提高压缩算法和策略

如果你有特别的客户端，可以考虑使用自定义的更高压缩比的压缩方式，这个做手机应用的童鞋或许接触过，和十年前大家压缩MP3以及做软件压缩包一样，使用自己软件算法和策略替代市面上已有的算法和策略。如果没有特别的客户端，不妨对图片和视频使用更好的压缩格式，比如webp和webm，以及适当情况下的gif替代png等。

其他层面的方法：

服务器性能：

说到服务器性能，可能多数人会停留在几核几G几百G这种概念上，但是对于网站服务器，关注的应该是单机/VPS的数字运算能力和IO读写能力，如果不是单机服务器，那么请关注自己实际能使用的资源数量，尤其是高峰时刻够用且有余力！

机房带宽资源：

带宽资源或许是除了高端存储设备外，价格最贵的资源之一了。所以，评估带宽是否满足你的站点，是特别重要的事情。一般来说小站点，1~2M的带宽绝对够用。如果不知道你的机器的带宽能力，不妨登录机器后台观察流量图峰值，或者机器安装speedtest-cli，来进行数据收集。

服务器的上行带宽，即是我们常说的网站带宽，一般而言，此数值越大，提供的访问能力就越强。

服务器软件性能：

“尺有所短，寸有所长”，软件也是一样，小站点，资源有限的情况下：

如果你以前使用apache，且没有使用一些三方模块，或者不需要使用apache软件套装里的高级功能，或者没有软件必须依赖apache，以及三方模块能在nginx中找到替代的，可以考虑替换为nginx。

如果你的程序允许实现数据库缓存/站点内容缓存，但是没有使用缓存的，请开启缓存功能；如果你的程序使用了文件缓存，在内存资源有富裕的情况下，请使用内存缓存（自己考虑缓存策略）；如果你的程序原来的运行环境执行速度不够快，那么请考虑升级或运行环境，诸如php5.2->php.5.6+，或者php5.6->hhvm 3.x，asp/php->nodejs；如果你的程序中多数功能你用不到，考虑使用更轻便的小程序；如果你启用了缓存，且数据库（关系数据库）读取热数据频率高于冷数据，且访问量不是特别大，不需要考虑数据库效率，否则需要考虑数据库进行分库分表和建立适当的索引，以提高数据库吞吐能力。

根据自己情况适当调整nginx/mysql/redis/memcache等软件的数据分块大小。

优化程序关键逻辑的流程，尽可能让程序始终遵循最短路径结束任务。

尽可能让TCP链接重用，或者适当调整持久链接的时间和数量（Keep-Alive），以及考虑使用SPDY、防火墙/服务器代理软件/程序对访客限制流量以及过滤或者禁止能力范围内的异常流量。

DNS查询速度：

DNS对于站点首次打开速度至关重要，所以请尽可能选择靠谱的DNS提供商来解决DNS查询问题。

除此之外，对于webkit支持DNS预缓存的浏览器，可以在页面头部尽少和尽合理的添加要缓存的DNS，以加快页面展示速度。

替换或者提高压缩算法和策略：

页面提供资源数量：

尽可能减少同一时间的资源请求数量：

1. 对于静态样式和脚本，使用合并策略。针对单页面程序，你可以将所有样式或者脚本都合并为一个单独的文件。但是针对多页面，以及带有皮肤策略的站点，则考虑抽象基础的Base内容和额外的内容，并通过前后端脚本进行策略加载。

2. 对于图片和视频资源，在交互允许的情况下，使用延时加载，跨屏预加载一定数量，来取代页面文档加载完成后就加载全部的策略。

对不同浏览器使用不同的脚本：

差异对待浏览器，对古老浏览器不使用一些功能，以及差异对待浏览器使用的基础脚本库。如果你使用下一节提到的JS加载器，那么这个很容易做到。

页面增量更新：

如果你的内容支持异步增量更新，那么使用接口更新增量内容的模式，来替换打开新页面的模式。

客户端缓存：

简单的说，尽可能给所有资源使用最长时间的缓存，对于不支持200 cache的客户端提供304 Modified缓存（前者不需要额外HTTP请求）。

客户端本地缓存：

对于变化不大的站点，配合脚本，对支持使用本地缓存的客户端进行适当的数据缓存。

页面资源加载时机：

将页面主要样式尽可能放在文档顶部、将三方不可合并脚本尽可能放置页面底部、将页面inline脚本尽可能替换为配置内容。

用户终端某时刻性能：

受限于客户端宿主机性能以宿主机网络环境。和最开始提到的服务器性能一样，CPU时间片被其他程序占用时，或者硬件古老，以及网络被其他程序占用的时候，会带来浏览的不畅。

如果你对网站的一般访问速度有信心（通过收集到的数据的反馈），且网站属于内容展示类的，可以在适当的位置加诸如以下的提示（程序打底提示）：

页面加载过慢，不妨检查网络环境是否有其他软件占用（下载工具/在线视频），并刷新页面。资源加载失败，请刷新重试。

待页面加载完成，干掉以上提示。但是请权衡此内容的存储位置和脚本执行时机，考虑搜索引擎将提示和内容都缓存的情况。

用户终端浏览器性能：

如果你的用户使用者古老的浏览器，软件性能成为页面数据下载和渲染瓶颈，那么不妨给其一个提示，或者强制其使用新版本的浏览器进行访问：

请更新浏览器以获得更加体验。

本站仅支持新的浏览器：A,B,C。

为了您的访问速度和安全考虑，我们推荐您安装：X,Y,Z。

用户直观感受：极致畅快体验！！！

jQuery如何实现预加载图片功能？

在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。

1)概念：

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

2)区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

服务器端区别：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

例子：

<!DOCTYPE html>

<head>

<title>preload</title>

<style>

* {

margin: 0;

pading: 0;

}

a {

text-decoration: none;

}

.box {

text-align: center;

}

.btn {

display: inline-block;

height: 30px;

line-height: 30px;

border: 1px solid #ccc;

background: #fff;

padding: 0 10px;

margin-right: 50px;

color: #333;

}

.btn:hover {

background: #eee;

}

/*进度条样式*/

.loading {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

//撑满整个屏幕 background: #eee;

text-align: center;

font-size: 30px;

font-weight: bold;

}

.progress {

margin-top: 300px;

}

</style>

</head>

<body>

<!--无序预加载需要写进度条，当加载完毕后才能操作；

有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张...

-->

<p>

</p>

</div>

</div>

var imgs = ['http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg',

'http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png',

'http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg'],

index = 0,

len = imgs.length;

$progress = $('.progress');

//有序预加载,可以不用写进度条部分，如果有写，需要手动配置each()、all()方法

// $.preload(imgs,{

// order:'ordered'

// });

//调用无序预加载 --imgs 数组存放预加载的图片

$.preload(imgs, {

//每张图片加载(load事件)一次触发一次each()

each: function (count) {

//进度条显示百分比进度

$progress.html(Math.round((count + 1) / len * 100) + '%');

//加载完毕

all: function () {

$('.loading').hide();

document.title = '1/' + len;//初始化第一张

}

});

//未封装成插件的无序预加载

// $.each(imgs,function(i,src){

// var imgObj = new Image(); //Image()实例用于缓存图片

// $(imgObj).on('load error',function(){

// $progress.html(Math.round((count + 1) / len * 100) + '%');

// if(count >= len - 1){

// $('.loading').hide();

// document.title = '1/' + len;

// }

// count++;//每加载完一张图片count加1

// });

// imgObj.src = src;//缓存图片

// });

$('.btn').on('click', function () {

if ('prev' === $(this).data('control')) {

index = Math.max(0, --index);

} else {

index = Math.min(len - 1, ++index);

}

document.title = (index + 1) + '/' + len;

$('img').attr('src', imgs[index]);

});

</script>

</body>

</html>

插件：

; (function ($) {

function PreLoad(imgs, options) {

//保存图片到数组

this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

this.opts = $.extend(PreLoad.defaults, options);

// this._unordered();//如果只有无序预加载

if (this.opts.order === 'ordered') {

this._ordered();

} else {

this._unordered();//默认是无序预加载

}

};

PreLoad.defaults = {

order: 'unordered', //指定默认加载方式为无序

each: null, //每一张图片加载完毕后执行

all: null //所有图片加载完毕后执行

};

//有序预加载

PreLoad.prototype._ordered = function () {

var opts = this.opts,

imgs = this.imgs,

len = imgs.length,

count = 0;

load();

function load() {

var imgObj = new Image();

$(imgObj).on('load error', function () {

//相当于if(opts.each){ opts.each(); } ，如果有配置each()方法则调用，后面的all()同理

opts.each && opts.each(count);

if (count >= len) {

//所有图片加载完毕

opts.all && opts.all();

} else {

//如果没加载完，继续调用自身加载下一张

load();

}

count++;

});

imgObj.src = imgs[count];//缓存图片

};

//无序加载

PreLoad.prototype._unordered = function () {

var imgs = this.imgs,

opts = this.opts,

count = 0,

len = imgs.length;

$.each(imgs, function (i, src) {

//判断图片数组中的每一项是否为字符串，不是字符串会导致出错，因此返回

if (typeof src != 'string') return;

var imgObj = new Image();

$(imgObj).on('load error', function () {

//判断opts.each是否存在，不存在则不执行

opts.each && opts.each(count);

if (count >= len - 1) {

//判断opts.all是否存在，存在则执行

opts.all && opts.all();

}

count++;

});

imgObj.src = src;//缓存图片

});

};

//由于不用具体的对象去调用，因此用$.extend(object)挂载插件.

$.extend({

//preload为插件名

preload: function (imgs, opts) {

new PreLoad(imgs, opts);

}

});

})(jQuery);

lazyload,现在做web前端是不是必须会小程序开发