CSS 基础1、选择器2、盒模型3、伪类(处理 a 标签的那些和用来处理选择器的:first-child,:nth-child 等)和伪元素(eg. 处理 p 标签首行或首字母的:first-line 和:first-letter ;在元素的内容之前或之后插入内容的:before 和:after)4、页面导入样式时,使用 link 和@import 的区别
link 属于 XHTML 标签,除了加载 CSS 外,定义 rel 连接属性等作用;而@import 是 CSS 提供的,只能用于加载 CSS;
页面被加载的时,link 会同时被加载,而@import 引用的 CSS 会等到页面...
HTML基础1、 Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
作用:声明文件类型定义(DTD),位于文档中最前面,作用是为了告知浏览器应该用哪种文档类型规范来解析文档
定义
严格模式(标准模式),浏览器按照W3C标准来解析
混杂模式,向后兼容的解析方法,浏览器用自己的方式解析代码
如何区分?用DTD来判断
有严格格式DTD——严格模式;
有URL的过渡DTD——严格模式,没有URL的过渡DTD——混杂模式;
DTD不存在/格式不对——混杂模式;
HTML5没有严格和混杂之分
区分的意义严格模式的排版和js运行模式以浏览器支持的最高标准运行。如果只存...
HTTP为什么不安全:
通信使用明文(不加密),内容可能被窃听
不验证通信方的身份,因此有可能遭遇伪装
无法证明报文的完整性,所以有可能被篡改
HTTP+加密+认证+完整性保护=HTTPS(HTTP Secure)
HTTPS则是具有安全性的SSL加密传输协议
HTTPS协议需要CA申请证书
HTTP和HTTPS使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443
HTTPS通过HTTP来传输信息,但是信息通过TLS协议进行了加密
TLShttps仍用http传输信息,但信息通过TLS进行了加密。TLS作用于表示层
两种加密技术
对称加密两边有相同的密钥,...
HTTP 方法
GET 获取资源。当前网络请求中,绝大部分使用的是 GET 方法
POST 传输实体主体。POST 主要用来传输数据,而 GET 主要用来获取资源
HEAD 获取报文首部。和 GET 方法类似,但是不返回报文实体主体部分。主要用于确认 URL 的有效性以及资源更新的日期时间等。
PUT 上传文件
OPTIONS 查询支持的方法
*DELETE 删除文件
*PATCH 对资源进行部分修改
*CONNECT 要求在与代理服务器通信时建立隧道
GET 和 POST 的区别从用法上说,GET 一般用于无副作用、幂等的场景;POST 多用于有副作用、不幂等的情况(一次POST请求...
转载声明:该文章有一部分转载自CavsZhouyou。欢迎大家去原博主观看,总结的更好
概述详细资料可以参考: 《互联网协议入门(一)》 《互联网协议入门(二)》
OSI 七层模型应用层 :为应用程序(进程)提供服务,并管理应用程序之间的通信(SMTP、HTTP、FTP、DNS)表示层 :处理数据的标识问题,比如编码、格式转化、加密解密等会话层 :负责建立管理和断开通信连接,实现数据同步传输层 :负责向两个主机中进程之间的通讯提供服务,端到端传输数据,同时处理传输错误、控制流量等(TCP UDP)网络层 :负责为分组交换网上的不同主机提供通信服务。地址管理、路由选择(IP 协议)数据...
基本篇对webpack的看法webpack是一个模块打包工具。可以用webpack管理我们的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源
entry && outputloaderloader其实就是一个打包的方案,它知道对于某些特定的文件,webpack应该如何去打包。写在配置文件的 module 项中定义...
实现代码实现一个类似webpack的打包工具,代码如下:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273const fs = require('fs')const path = require('path')const parser = require('@babel/parser')const trav...
什么是pluginplugin能帮助我们在webpack打包生成文件的某个事件段帮我们做一些事,类似于Vue中的生命周期函数。例如html-webpack-plugin能帮我们在打包结束生成html文件,并把打包生成的脚本文件插入html中。
plugin的编写假如我们想写一个plugin,这个plguin能帮我们在打包生成文件之后再生成一个.txt文件,里面写我们的版权信息。实现代码如下:
123456789101112131415161718192021class CopyrightWebpackPlugin { // constructor部分仅为演示用的代码 co...
什么是loaderloader其实是一种打包方案,loader可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
自己编写的loader的使用同普通loader一样,在webpack.config.js的module中写新的rule,还要在webpack.config.js新写一个配置项resolveLoader(代码如下所示),意思是按名称现在node_modules中找loader,找不到再去 ./loader 文件夹中找(自己写的loader放在该文件夹中,为replaceLoader.js)
1...
及时更新版本(node,npm等),新版本一般都会有提高打包效率的新特性
在尽可能少的模块上应用loader。可以优化文件搜索范围(即在rule中写include或exclude),eg. 可以不用编译node_modules中的代码,因为里面的都是编译过的
plugin尽可能精简并确保可靠,也尽可能少用
resolve参数合理配置import或require的时候可以不写文件后缀,而在resolva中写resolve.extensions,并尽可能减少后缀列表长度,将出现频率高的后缀排在前面resolve.alias:设置别名的方式映射一个路径,让webpack更快找到路径
DllP...
应用场景懒加载就是将不关键的资源延后加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
实现对于图片来说,先设置图片标签的src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域时,就将自定义属性替换为src属性,这样图片就会去下载资源,实现了图片懒加载。懒加载不仅可以用于图片,也可以使用在别的资源上。例如下面这段代码实现click之后再执行异步函数在页面生成文字。
12...
应用场景当我们的业务逻辑很大的时候(index.js很大),我们打包生成的文件会很大:用户打开页面要一次性加载这个很大的文件,需要很长的加载时间;当文件有一点点修改,用户又要重新加载这个很大的文件,又需要很长加载时间。所以可以用code splitting(代码分割)把代码分离到不同的 bundle 中,可以实现按需加载或并行加载这些文件,优化加载时间。
实现借用SplitChunksPlugin,可以实现对同步加载的代码或者异步加载的代码实现代码分割。把spliChunk写在webpack配置文件的optimization配置项中。代码如下
123456789101112131415o...